The Interactive Periodic Table is a single-page HTML application that provides a comprehensive, educational exploration of all 118 known chemical elements. It runs entirely in your browser with no internet connection required and no installation needed.
Click any element to view 22 properties, its electron configuration, and a real-time 3D atom model.
Color-map the entire table by electronegativity, atomic radius, density, and more.
Drag a slider from 0 K to 6000 K and watch elements change between solid, liquid, and gas.
Test your chemistry knowledge across three difficulty levels with randomized questions.
Simply open PT.html in any modern web browser (Chrome, Firefox, Edge, or Safari). The application loads instantly with Hydrogen pre-selected.
The screen is divided into two main areas:
Below the periodic table you will find the Definitions Carousel and Tools Panel, both hidden by default until toggled on.
The table displays all 118 elements arranged in the standard periodic table layout with 18 groups (columns) and 7 periods (rows). Group and period numbers are labeled along the top and left edges.
Each element cell shows:
When you click an element, the left panel updates with a comprehensive property table displaying 22 data fields. The table header shows the element name and symbol in a gradient bar.
| Property | Description | Example (Iron) |
|---|---|---|
| Atomic Number | Number of protons in the nucleus | 26 |
| Atomic Mass | Weighted average mass in amu | 55.845 |
| Neutrons | Number of neutrons | 30 |
| Protons | Number of protons | 26 |
| Electrons | Number of electrons (neutral atom) | 26 |
| Period | Horizontal row in the table | 4 |
| Group | Vertical column in the table | 8 |
| Phase | State at standard conditions | Solid |
| Radioactive | Whether the element is radioactive | No |
| Natural | Whether it occurs in nature | Yes |
| Type | Element category | Transition Metal |
| Atomic Radius | Size of the atom in Angstroms | 1.56 |
| Electronegativity | Ability to attract bonding electrons | 1.83 |
| First Ionization | Energy to remove one electron (eV) | 7.9024 |
| Density | Mass per volume (g/cm³) | 7.874 |
| Melting Point | Temperature to become liquid (K) | 1811 K |
| Boiling Point | Temperature to become gas (K) | 3134 K |
| Isotopes | Number of known isotopes | 10 |
| Discoverer | Who discovered the element | Ancient |
| Year | Year of discovery | (Ancient) |
| Specific Heat | Heat capacity (J/g·K) | 0.449 |
| Shells | Number of electron shells | 4 |
| Valence | Number of valence electrons | 2 |
Below the property table, a monospace box displays the full electron configuration calculated using the Aufbau principle filling order:
1s2 2s2 2p6 3s2 3p6 4s2 3d6
Example: Iron (Fe), atomic number 26
The atom model is a real-time, animated 3D visualization that shows the internal structure of the currently selected element. It is hidden by default to conserve screen space.
Click the "Atom Model" toggle button at the top of the info panel. Click it again to hide.
Small red spheres packed inside the nucleus. The exact number matches the element's proton count. Each proton has a radial gradient for a 3D lit-sphere effect and a subtle red glow.
Small blue/cyan spheres interleaved with protons inside the nucleus. The exact number matches the element's neutron count. They share the same gradient and glow treatment as protons but in a cool blue tone.
Golden glowing orbs orbiting the nucleus on 3D tilted orbital rings. Distributed across shells following the filling order: 2, 8, 18, 32, 32, 18, 8. Each electron pulses with its own glow animation.
The nucleus is rendered as a semi-transparent glass sphere containing all protons and neutrons. Key features:
Electrons orbit on 3D rings that are each tilted at a different angle in 3D space, creating the classic interlocking orbital geometry. Even-numbered shells spin clockwise; odd-numbered shells spin counter-clockwise. Outer shells rotate slower than inner ones.
A frosted-glass badge at the top center of the visualization shows the element symbol and atomic number (e.g., Fe #26).
A frosted-glass legend in the bottom-left corner shows the three particle types with their colors and exact counts for the selected element.
The search bar at the top of the info panel lets you find elements instantly.
The color-coded legend below the periodic table displays all 11 element categories. Each legend item is clickable.
Click the "Dark Mode" toggle button to switch between light and dark themes. The entire application, including the periodic table, info panel, tabs, and all controls, adapts to the selected theme.
Clean white/slate background with dark text. Optimized for well-lit environments and printing.
Deep navy/slate background with light text. Reduces eye strain in low-light environments. The 3D atom visualization always uses a dark space-like background regardless of theme.
The Definitions Carousel is a built-in glossary containing 40+ chemistry terms with clear explanations. It is hidden by default.
Definitions include: Periodic Table, Alkali Metals, Alkaline Earth Metals, Transition Metals, Post-Transition Metals, Metalloids, Nonmetals, Halogens, Noble Gases, Hydrogen, Lanthanides, Actinides, Atomic Number, Element, Symbol, Atomic Mass, Neutrons, Protons, Electrons, Period, Group, Phase, Radioactive, Natural, Metal, Nonmetal, Metalloid, Type, Atomic Radius, Electronegativity, First Ionization, Density, Melting Point, Boiling Point, Isotopes, Discoverer, Year, Specific Heat, Shells, and Valence.
The Tools Panel contains three advanced features organized as tabs. It is hidden by default.
Click the "Tools" toggle button. A tabbed panel appears below the periodic table with three tabs:
Color-map the table by a chosen property. See Section 11.
Explore solid/liquid/gas states at any temperature. See Section 12.
Test your knowledge with a multiple-choice game. See Section 13.
Click a tab name to switch between tools. The selected tab is highlighted with an indigo underline.
This tool overlays a color gradient on the entire periodic table based on a chosen chemical property, revealing how that property changes across periods and groups.
| Property | Range | Key Pattern |
|---|---|---|
| Electronegativity | 0.7 – 4.0 | Increases left→right, decreases top→bottom |
| Atomic Radius | 0.3 – 3.0 Å | Decreases left→right, increases top→bottom |
| First Ionization | 3.9 – 24.6 eV | Increases left→right, noble gases highest |
| Melting Point | 14 – 3800 K | Transition metals tend to be highest |
| Boiling Point | 4 – 5900 K | Similar to melting point patterns |
| Density | 0.0001 – 22.6 g/cm³ | Osmium is the densest element |
This tool lets you drag a temperature slider and watch every element on the periodic table change color to show whether it is a solid, liquid, or gas at that temperature.
Quick-jump to common temperatures:
| Preset | Temperature | What Happens |
|---|---|---|
| Absolute Zero | 0 K / −273 °C | All elements solid (except Helium) |
| Water Freezing | 273 K / 0 °C | Mercury is liquid, noble gases are gaseous |
| Room Temperature | 293 K / 20 °C | Standard conditions — Mercury and Bromine are liquid |
| Water Boiling | 373 K / 100 °C | Most metals still solid, Francium becomes liquid |
| Metal Melting | ~1000 K / 727 °C | Many metals begin to melt |
Test your periodic table knowledge with a multiple-choice quiz featuring over 100 questions across three difficulty levels.
| Level | Topics | Example Question |
|---|---|---|
| Easy | Element names, symbols, basic groups | "What is the symbol for Gold?" |
| Medium | Properties, periodic trends, atomic structure | "Which element has the highest electronegativity?" |
| Hard | Electron configurations, ionization energy, obscure elements | "What is the electron configuration of Silver?" |
| Shortcut | Action |
|---|---|
| Ctrl + F | Focus the search bar (overrides the browser's default find) |
| Esc | Clear search text, remove element highlights, and clear any active category filter |
The periodic table uses 11 color categories. Click any category in the legend to filter the table.
Quick reference for the scientific units and meanings of displayed properties.
| Property | Unit | Notes |
|---|---|---|
| Atomic Mass | amu | Weighted average of naturally occurring isotopes |
| Atomic Radius | Å (Angstroms) | Empirical or calculated radius |
| Electronegativity | Pauling scale | Dimensionless, ranges from ~0.7 (Fr) to ~4.0 (F) |
| First Ionization | eV (electron-volts) | Energy to remove one electron from neutral atom |
| Density | g/cm³ | At standard conditions |
| Melting Point | K (Kelvin) | To convert: °C = K − 273.15 |
| Boiling Point | K (Kelvin) | To convert: °F = (°C × 9/5) + 32 |
| Specific Heat | J/(g·°C) | Energy to raise 1 g by 1 °C |