HandyTools Hub

Periodic Table

Explore all 118 chemical elements with detailed properties. Search by name, symbol, or atomic number.

How to Use

  1. Browse the interactive table — Each element tile is color-coded by category (metal, nonmetal, noble gas, etc.) for easy visual scanning.
  2. Click any element — Opens a detailed info card showing atomic mass, electron configuration, electronegativity, melting/boiling point, density, and discovery year.
  3. Search for elements — Use the search bar to filter by name, symbol (e.g., “Fe”), or atomic number (e.g., “26”). Results highlight in real time.
  4. Explore element details — All data is preloaded and displayed instantly with no page reload.

Features

  • 36 elements displayed — Clean, colorful layout with categories distinguished at a glance.
  • Detailed element pop-ups — Atomic mass, electron configuration, electronegativity, melting/boiling point, density, and discovery year at your fingertips.
  • Real-time search — Find any element by name, symbol, or atomic number with instant highlighting.
  • Color-coded categories — Alkali metals, transition metals, nonmetals, noble gases, and more for easy learning and memorization.
  • Client-side rendering — Loads instantly and works offline after the first visit.
  • Responsive design — Adapts the grid for desktop, tablet, and mobile screens.

Use Cases

  • Chemistry study: Students can quickly look up element properties without flipping through a textbook.
  • Teaching: Demonstrating periodic trends (electronegativity, atomic radius) with a live, interactive table.
  • Research reference: Verifying element data like melting point or discovery year for a project.
  • Curiosity: Anyone can explore the elements visually and learn through category colors.

Frequently Asked Questions

How many elements are in the periodic table?

The complete periodic table contains 118 confirmed elements. Our interactive table currently displays the first 36 elements (Hydrogen through Krypton) with complete property data. These 36 elements cover the first four periods and include all major element categories.

What information does each element show?

Each element square in the grid displays the chemical symbol and atomic number. Clicking an element opens a detailed modal showing: element name, symbol, atomic number, atomic mass, element category, group number, period number, electron configuration, electronegativity, melting point, boiling point, density, and year of discovery.

How do I search for elements?

Use the search bar at the top of the page. You can search by element name (e.g., 'Iron'), chemical symbol (e.g., 'Fe'), or atomic number (e.g., '26'). The search filters in real time, showing only matching elements. Clear the search field to return to the full table view.

What do the colors mean?

Each color represents a different element category: red for alkali metals, light red/orange for alkaline earth metals, gold for transition metals, light green for post-transition metals, light blue for metalloids, green for nonmetals, light purple for halogens, and light gray-blue for noble gases.