An interactive periodic table is a clickable, browser-based grid of all 118 chemical elements in which every cell opens the element's full data and acts as a live filter for the rest of the table. The grid mirrors the standard IUPAC layout — 18 columns by 7 rows, with the lanthanide and actinide series drawn as two separate rows below the main body — so you instantly recognise where each element sits. Every cell shows the atomic number, the symbol, the name, and the standard atomic weight, and every element is colour-coded by category: alkali metals, alkaline earth metals, transition metals, post-transition metals, metalloids, reactive nonmetals, halogens, noble gases, lanthanides, and actinides. Clicking an element opens a detail panel with the full set — atomic number, symbol, standard atomic weight, category, period, group, and electron block — while typing in the search box or clicking a legend entry highlights just the matches and dims the rest. Atomic weights come from the IUPAC 2021 abridged values, with radioactive elements that have no stable isotope shown in square brackets following the same convention the official IUPAC table uses. The whole table runs locally in your browser, so the short answer to how an interactive periodic table works is this: it turns a static chart into a clickable, searchable, filterable reference.
The Three Interactions That Power the Table
Every interactive periodic table is built around three simple interactions that turn a static chart into a working tool: browse, click, and filter. The Interactive Periodic Table uses exactly these three.
The "browse" part is the 18-by-7 grid itself. Each cell is colour-coded by category, so a quick scan reveals the shape of chemistry — alkali metals clustering at the far left, halogens on the right, noble gases at the far-right edge, and the long transition-metal block running through the middle. The "click" part is the detail panel that opens when you tap any element, giving you the full set of properties for that one element without leaving the page. The "filter" part is what makes the table genuinely interactive: the search box narrows the grid to one or a few elements, and the category legend does the same thing by chemical family.
Together, those three interactions cover every common question a student, teacher, or working chemist might ask the table, and they explain the mechanics behind phrases like "click any element" or "use the search to filter the grid." Nothing is fetched from a remote server and nothing is computed on the fly beyond the visual filter — the data is already loaded in the page.
How to Use the Interactive Periodic Table
Open the table in any modern browser and follow these steps to browse, click, and filter through all 118 elements.
- Open the Interactive Periodic Table in your browser. Nothing to install and no sign-in — the whole grid renders locally.
- Scan the 118-element grid by eye. Each cell shows the atomic number, symbol, name, and standard atomic weight, with the colour of the cell indicating the element category.
- Click or tap any element cell to open its detail panel, which lists the atomic number, symbol, standard atomic weight, category, period, group, and electron block.
- Type a name (like "iron"), a symbol (like "Fe"), or an atomic number (like "26") into the search box. Matching elements stay highlighted while the rest of the grid fades.
- Click any category in the legend to filter the table to just that family — alkali metals, halogens, noble gases, and so on — and dim every other element.
Because the search and the category filter are independent, you can combine them — for example, search for "gold" and then click "transition metals" to confirm that Au is in the transition family.
What Each Element Cell Shows at a Glance
Every cell is designed to communicate four facts at a glance, even when the cell is small. The atomic number sits at the top in a bold font because it is the element's unique identifier. The element symbol — one or two letters, capitalised the IUPAC way — is the largest item on the cell and is the fastest way to spot a familiar element from across the screen. The element's full name appears in smaller type, useful when you know what you're looking for but have forgotten the spelling. The standard atomic weight rounds out the cell, with bracketed values such as [97] or [294] used for radioactive elements that have no stable isotope.
The detail panel that opens on click is where the rest of the data lives. The cell keeps the four most-recognised values so the grid stays readable, and the panel supplies the structural fields — period, group, and electron block — that are useful for trend work and homework problems. Splitting the data this way is what keeps the table scannable at a glance while still letting one click surface every property a chemist needs.
| Field | Cell | Detail panel |
|---|---|---|
| Atomic number | Yes | Yes |
| Symbol | Yes | Yes |
| Name | Yes | — |
| Standard atomic weight | Yes | Yes |
| Category (by colour) | Yes | Yes, named |
| Period | — | Yes |
| Group | — | Yes |
| Electron block (s, p, d, f) | — | Yes |
Reading the Colours and the Category Legend
The Interactive Periodic Table groups the elements into ten colour-coded categories. The table below lists each family, what it includes in plain language, and a couple of familiar examples so you can read the legend at a glance.
| Category | Where it sits | Examples |
|---|---|---|
| Alkali metals | Group 1, excluding H | Lithium (Li), Sodium (Na), Potassium (K) |
| Alkaline earth metals | Group 2 | Beryllium (Be), Magnesium (Mg), Calcium (Ca) |
| Transition metals | The d-block, groups 3–12 | Iron (Fe), Copper (Cu), Gold (Au) |
| Post-transition metals | Soft metals after the d-block | Aluminium (Al), Tin (Sn), Lead (Pb) |
| Metalloids | Diagonal band between metals and nonmetals | Boron (B), Silicon (Si), Germanium (Ge) |
| Reactive nonmetals | The non-metal families | Hydrogen (H), Carbon (C), Oxygen (O) |
| Halogens | Group 17 | Fluorine (F), Chlorine (Cl), Bromine (Br) |
| Noble gases | Group 18 | Helium (He), Neon (Ne), Argon (Ar) |
| Lanthanides | f-block, period 6 (separate row) | Cerium (Ce), Neodymium (Nd) |
| Actinides | f-block, period 7 (separate row) | Thorium (Th), Uranium (U), Plutonium (Pu) |
Clicking any category in the legend acts as a filter. Matching elements stay at full brightness while everything else fades back. This is useful when you want to see only the transition metals, only the lanthanides, or only the reactive nonmetals, without manually scanning the grid.
Bracketed Numbers Like [294]: What They Mean
If you scan across the bottom of the periodic table, you'll notice that the heaviest elements show numbers in square brackets: Tc [97], Pm [145], and Og [294], for example. Those bracketed values are not measured atomic weights. They are the mass numbers of each element's most stable (longest-lived) isotope, which is the convention the official IUPAC periodic table uses for radioactive elements that have no stable isotope with a fixed natural abundance.
For naturally occurring elements with a characteristic isotopic composition — carbon at 12.011, iron at 55.845, gold at 196.97, thorium at 232.04, and uranium at 238.03 — the value shown is the conventional standard atomic weight. Both conventions are taken straight from the IUPAC 2021 abridged values published by the Commission on Isotopic Abundances and Atomic Weights (CIAAW), the international authority for atomic-weight data.
The square brackets are more than a typographic detail: they make it clear that the figure is theoretical rather than measured. That distinction matters when the value is being used in a calculation. If a teacher or textbook asks for the atomic weight of uranium, the answer is 238.03; if they ask for the mass number of the most stable isotope of oganesson, the answer is 294.
Why Position on the Grid Tells You So Much
The layout of the interactive periodic table mirrors the printed one because position is information. Each column is a group, and elements in the same group share the same number of valence electrons and tend to react in similar ways — that is why the alkali metals all sit in group 1, the halogens in group 17, and the noble gases in group 18. Each row is a period, and the period number tells you which electron shell is being filled. The long block of transition metals in the middle of the table fills d-orbitals; the lanthanide and actinide rows underneath fill f-orbitals.
Those two f-block rows are pulled out separately because placing them inline would make the table 32 columns wide, so by long-standing convention they sit below the main body with small placeholders marking where they belong in group 3. Because the Interactive Periodic Table follows this layout exactly, scrolling across a period with the search box dimming the unrelated elements becomes a quick way to read off trends — for example, the steady rise in atomic weight as you move from lithium (6.94) to neon (20.180) across period 2, or the way reactivity rises as you move down the alkali-metal column.
Practical Reasons to Reach for the Interactive Periodic Table
Once the mechanics are clear, the next question is what to do with the table. The most common uses fall into a few clear groups:
- Looking up the standard atomic weight of an element for a stoichiometry or molar-mass calculation.
- Checking the category of an unfamiliar element when reading a paper, a materials spec, or a safety data sheet.
- Filtering to a single family — say, all halogens or all lanthanides — when teaching a lesson or studying for an exam.
- Confirming an atomic number or symbol while writing a lab report or a homework problem.
- Spotting periodic trends visually, such as the increase in atomic weight across a period or the way reactivity rises at the left of the table.
Because the tool runs locally in the browser, it works on any device with no install and no sign-in. That portability — combined with the search box and the legend filter — is what makes the difference between a chart on a wall and a working chemistry reference. For a broader look at how the table gets used day to day, the guide How Is the Periodic Table Useful: Browse All 118 Elements walks through the practical side in more detail.