Using the interactive periodic table: features and terminology
167
January 30, 2026
Daniel LuFull-Stack Engineer | Content Creator
The interactive table combines element lookup, visualisation and comparison. This guide explains the controls and the terms used in the data panels.
Categories：Tool Guides
The interactive table combines element lookup, visualisation and comparison. This guide explains the controls and the terms used in the data panels.
🔗 Open Interactive Periodic Table
Explore all 118 chemical elements with 3D atomic models, isotopes, electron shells, and periodic trends visualization.
→
Main Interface Overview
Click to enlarge
When you open the tool, you'll see a complete periodic table of 118 elements. Each element cell is color-coded by its category (alkali metals, transition metals, noble gases, etc.).
Core Operations:
- Click an element: Instantly opens a detail card with atomic number, atomic mass, melting/boiling points, density, electron configuration, and discovery year.
- Search box: Enter element name (e.g., "Oxygen"), symbol (e.g., "O"), or atomic number (e.g., "8") for quick lookup.
- Category filter: Click category labels at the bottom (like "Transition Metals") to highlight all elements of that type.
Feature Tabs Explained
After clicking any element, the detail card has 4 tabs at the bottom providing deeper visualizations:
🔬 3D Atomic Model
Click to enlarge
This is a three-dimensional atomic model you can drag and rotate.
- Center sphere: Represents the nucleus containing protons and neutrons.
- Orbiting particles: Represent electrons. The number of orbits corresponds to the element's electron shells.
This model helps you understand: why elements with higher atomic numbers have more electron shells and larger atomic radii.
⚛️ Isotopes
Isotopes are variants of the same element with the same number of protons but different numbers of neutrons.
In this tab, you can view:
| Data | Description |
|---|---|
| Abundance | The proportion of this isotope in nature. For example, Carbon-12 has ~98.9% abundance, while Carbon-14 is rare. |
| Half-life | Time required for half of a radioactive isotope to decay. Stable isotopes are marked "Stable". |
| Decay Mode | How radioactive isotopes release energy, such as α decay, β decay, etc. |
Why learn about isotopes? Carbon-14 dating uses the half-life of Carbon-14 to determine the age of ancient artifacts. Medical radioactive isotopes (like Iodine-131) are used for diagnosis and treatment.
🎯 Electron Shells
Click to enlarge
This 2D animation clearly shows how electrons are distributed across different shells (K, L, M, N...).
- Each concentric circle represents an electron shell.
- Dots on the circles represent electrons in that shell.
- Total electrons = Atomic number (for neutral atoms).
Electron Configuration Rules: K shell holds max 2 electrons, L shell max 8, M shell max 18, outermost shell max 8.
📊 Periodic Trends
This tab lets you compare property trends across the same period (row) or group (column).
| Property | Description |
|---|---|
| Electronegativity | An atom's ability to attract electrons. Increases left to right, decreases top to bottom. Fluorine has the highest electronegativity. |
| Atomic Mass | Total mass of protons and neutrons in the nucleus (in Daltons). Increases with atomic number. |
| Density | Mass per unit volume. Transition metals typically have highest density (e.g., Osmium). |
| Melting Point | Temperature at which a solid becomes liquid. Carbon (graphite/diamond) and Tungsten have extremely high melting points. |
Chemistry Glossary
Atomic Structure
| Term | Definition |
|---|---|
| Atomic Number | Number of protons in the nucleus. Defines what element it is (e.g., 6 protons = Carbon). |
| Atomic Mass | Total mass of protons and neutrons, measured in Daltons (u). |
| Proton | Positively charged particle in the nucleus. Proton count = Atomic number. |
| Neutron | Uncharged particle in the nucleus. Neutron count can vary, forming isotopes. |
| Electron | Negatively charged particle orbiting the nucleus. In neutral atoms, electron count = proton count. |
| Electron Configuration | Notation describing electron distribution across shells/orbitals, e.g., 1s² 2s² 2p⁴ for Oxygen. |
Element Categories
| Category | Representative Elements | Characteristics |
|---|---|---|
| Alkali Metals | Lithium (Li), Sodium (Na), Potassium (K) | Soft, reactive, react vigorously with water |
| Alkaline Earth Metals | Magnesium (Mg), Calcium (Ca) | Slightly harder than alkali metals, less reactive |
| Transition Metals | Iron (Fe), Copper (Cu), Gold (Au) | High hardness, high melting points, multiple oxidation states |
| Metalloids | Boron (B), Silicon (Si), Germanium (Ge) | Between metals and non-metals, used as semiconductors |
| Non-metals | Carbon (C), Nitrogen (N), Oxygen (O) | Poor conductors, diverse forms |
| Halogens | Fluorine (F), Chlorine (Cl), Bromine (Br) | Most reactive non-metals, form salts |
| Noble Gases | Helium (He), Neon (Ne), Argon (Ar) | Very unreactive, full outer electron shells |
| Lanthanides/Actinides | Lanthanum (La), Uranium (U) | Rare earth elements (lanthanides) or radioactive elements (actinides) |
Periods and Groups
| Term | Definition |
|---|---|
| Period | Horizontal rows of the periodic table. Elements in the same period have the same number of electron shells. |
| Group | Vertical columns of the periodic table. Elements in the same group have the same number of outer electrons, thus similar chemical properties. |
Using the data panels
Start with the property you want to compare, then keep the units and data conditions consistent. A visual atomic model is an aid to explanation, not a literal photograph of an atom.