Periodic Table (PSE) — Manual

Back to the overview: Periodic Table (PSE) · Open the tool live: www.jpkc.com/tools/pse/

This manual describes the Periodic Table (PSE) in full: how the grid is built, which views it offers, which data is shown for each element, how search, filter, detail view, and direct links work, how the molar mass calculator reads formulas, and how the language toggle behaves. The interface is bilingual and starts in your browser's language — German if your browser is set to German, English otherwise. The labels quoted here are the English ones; you can switch the whole table to German with a single click.

How the periodic table is laid out

The PSE renders the periodic table in its classic form: a grid of 18 groups (columns) and 7 periods (rows), with each of the 118 elements in its fixed place. The two inner transition rows — the lanthanides (atomic numbers 57–71) and the actinides (89–103) — sit, as is conventional, as two separate f-block rows below the main table. At their actual position in the main grid (group 3, periods 6 and 7) you'll find two placeholder tiles that point to the relocated rows ("57–71 Lanthanides" and "89–103 Actinides"). A narrow gap visually separates the main table from the f-block.

The tiles scale with the available width — from 54 to 96 pixels across, with the type staying comfortably large. If there isn't room even for the smallest tile size, the table becomes horizontally scrollable; on narrow screens a hint above it says so ("Swipe sideways to see the whole table.").

The element tiles

Each element is shown as a colored tile. Right on the tile — without opening it — you see the key facts:

the atomic number (top),
a small, colored dot for the state of matter (at 25 °C; in the temperature view, at the temperature you've set),
the element symbol (large and centered),
the name in the currently selected language,
the atomic mass (in u; for elements without a standard atomic weight shown in square brackets, e.g. [267], indicating the most stable isotope).

The tile color depends on the selected view (see the next section): by default the element category, alternatively the state of matter or the value of a property. Every tile is keyboard-reachable and opens on click, Enter, or Space to bring up the detail view. Hover over a tile and a tooltip shows name, symbol, and atomic number — in the "State at a temperature" view and on the color scales, it adds the state or "no data" respectively.

Views: Colour by

The Colour by selector above the grid decides what the tile colors mean. There are eight views:

View	What the color shows
Category	the ten element categories (default)
State at a temperature	solid, liquid, gas, or unknown at a temperature of your choice
Electronegativity	color scale by Pauling value
Density	color scale, logarithmic
Melting point	color scale
Boiling point	color scale
Year of discovery	color scale, elements known since antiquity at the left end
Atomic mass	color scale

Next to it sits the Temperature unit selector with K, °C, and °F (default: K). It applies everywhere temperatures appear: on the temperature slider, in the legend of the melting and boiling point scales, and in the detail view. The tool remembers the unit locally in your browser.

Category view

The default view colors each tile by its category. Only here do you get the clickable color legend with its category filter and the small state legend below the grid (see Color categories and legend).

State at a temperature

Pick State at a temperature and a temperature slider appears, running from 0 to 6000 K in steps of 1 K; next to it, the current temperature in your chosen unit. The slider starts at 298 K (25 °C), and the Room temp. button resets it there at any time. The tiles recolor live:

gray — solid,
cyan — liquid,
yellow — gas,
dashed outline, nearly transparent — unknown.

The legend above the grid counts how many elements are currently in each state — at room temperature that's 2 liquids (bromine and mercury) and 11 gases.

The tool derives the state from each element's melting and boiling point (at standard pressure): below the melting point solid, between melting and boiling point liquid, above it gas. Two special cases are built in:

Sublimation: if the boiling point lies below the melting point (arsenic), the element goes straight from solid to gas — the tool shows no liquid phase for it.
Missing values: without a melting point the state stays "unknown" (the superheavy elements from rutherfordium to oganesson); if only the boiling point is unknown, the element counts as liquid above its melting point. This affects fermium through lawrencium: the detail view and the tile dot in the other views list them as "Unknown", while the temperature view works from the stored melting point and shows them as solid at room temperature and liquid above the melting point.

Property color scales

The remaining six views lay a color scale over the grid: the element with the lowest value gets one end of the scale, the one with the highest value the other; everything else falls linearly in between. The scale runs from dark violet through blue and green to yellow (modeled on viridis) — an order that stays readable with color vision deficiencies. Each tile's text switches automatically between black and white so symbol and name remain legible.

The legend shows the minimum, the gradient, and the maximum with units — temperatures in your chosen unit, density in g/cm³, atomic mass in u.
Density uses a logarithmic scale (the legend says "(logarithmic)"). On a linear scale all gases and light metals would be crammed into a single color, because the values range from 0.0000899 g/cm³ (hydrogen) to 22.59 g/cm³.
For Year of discovery, elements known since antiquity sit at the left end of the scale; the legend therefore starts with "Antiquity" and adds "(antiquity shown at the left end)".
Elements without a value — such as the electronegativity of most noble gases or the melting point of the superheavy elements — appear hatched; the legend labels that "no data".

Element data shown

Clicking a tile opens a detail view (modal dialog) with the element's complete data set. The header shows the symbol in the category color, name and symbol, a tinted category badge, the atomic number (#26), and the atomic mass. Below it the properties appear in two tables plus a footer:

Left table — placement

Atomic number — the proton count.
Atomic mass — in u, as an abridged IUPAC standard atomic weight; if the value is in square brackets, the tool adds "(mass number of the most stable isotope)".
Period — the row in the periodic table.
Group — the column; for lanthanides and actinides this reads "f-block".
Block — the element's orbital block: s-, p-, d-, or f-block.
State (25 °C) — solid, liquid, gas, or unknown at room temperature. This field keeps the 25 °C value even in the temperature view.
Oxidation states — the typical oxidation numbers.

Right table — physics & chemistry

Electron configuration — in noble-gas shorthand (e.g. [Ne] 3s² 3p²).
Electronegativity — with the suffix "(Pauling)" where a value exists.
Melting point — in your chosen temperature unit; with °C or °F the Kelvin value follows in parentheses, e.g. 1538 °C (1811 K) for iron. Negative values get a proper minus sign.
Boiling point — likewise.
Density — in g/cm³ for solids and liquids, in g/L for gases (hydrogen: 0.0899 g/L instead of an unwieldy figure in g/cm³).

Footer — history & identifier

Discovered — the year of discovery; for elements known since antiquity it reads "Antiquity".
By — the discoverer(s) or research group; usually "Antiquity" again for ancient elements (exception: arsenic, credited to Albertus Magnus).
CAS — the element's CAS registry number.

Values that are undefined or unknown for an element (such as the melting and boiling points of some superheavy elements) appear as an em dash "—". In the German view, electronegativity, density, the legend values, and the molar mass results use a decimal comma; temperatures always keep the decimal point, and so do atomic masses on the tiles, in the detail view, and in the molar mass calculator's table, e.g. 55.845 u. Only the legend of the Atomic mass color scale shows them rounded and with a comma (e.g. 1,01 u).

The block derives from the group

The block assignment follows a simple rule: lanthanides and actinides form the f-block, groups 3 to 12 the d-block, groups 1 and 2 plus hydrogen and helium the s-block, and everything else the p-block. Helium sits above the noble gases, but its configuration is just 1s² — hence s-block.

Color categories and legend

The PSE assigns each element to one of ten categories and, in the Category view, colors its tile accordingly. Above the table, a color legend explains the mapping — and also acts as a filter (see below). The category color follows the element into the other views as well: as the accent stripe in the detail view's header and as the color of the category badge. The ten categories:

Color	Category (EN)	Category (DE)
Red	Alkali Metals	Alkalimetalle
Orange	Alkaline Earth Metals	Erdalkalimetalle
Yellow	Transition Metals	Übergangsmetalle
Lime	Post-Transition Metals	Nachübergangsmetalle
Teal	Metalloids	Halbmetalle
Blue	Reactive Nonmetals	Reaktive Nichtmetalle
Purple	Halogens	Halogene
Cyan	Noble Gases	Edelgase
Pink	Lanthanoids	Lanthanoide
Violet	Actinoids	Actinoide

Below the table this view adds a small state legend for the state-of-matter dots on the tiles: Solid, Liquid, Gas, and Unknown, marked "(at 25 °C)". "Unknown" applies to the superheavy elements from rutherfordium to oganesson and to the actinoids fermium through lawrencium, whose state at room temperature has not been experimentally confirmed. In the other views it disappears and the legend above the grid takes over.

Search

At the top right of the header sits a search field (placeholder "Name, symbol or number…"). It filters the table live as you type, ignores upper and lower case, and checks several fields at once:

the English name (substring: ium hits every element whose name contains it),
the German name (substring as well),
the symbol (as a prefix: C hits C, Ca, Cl, Cu …),
the atomic number (exact only: 1 hits hydrogen, not 10 to 19 — and digits never search names).

The search checks both language names regardless of the language currently selected. So you can type "Wasserstoff" or "Hydrogen", "H" or "1" and hit the same element. Matches are highlighted, all other tiles dimmed; dimmed tiles can't be clicked and can't be reached with the Tab key.

Exact match: if your input matches a symbol, an atomic number, or a full name exactly, that tile also gets a bright frame. The symbol takes priority: c highlights every element with a "c" in its name, but marks carbon as the exact match.

Keyboard in the search field:

Enter opens the detail view of the exact match — or of the only match, once a single element is left.
Escape clears the search field.

The search works in every view, including the temperature view and the color scales.

In the Category view, each entry in the color legend is also a filter toggle. Click (or focus and press Enter/Space on) a category, and the table highlights only the elements of that category; the rest is dimmed. The active toggle is marked, and a second click on the same category clears the filter again. Switch to another view and the category filter goes dormant; back in the Category view it applies again.

Search and category filter act in combination (logical AND): search for "on" and filter to noble gases, and you're left with the noble gases whose name contains "on" — neon, argon, krypton, xenon, radon, and oganesson, but not helium. A reset button (×) next to the search field clears both filters at once; it's only active while something is actually being filtered: text in the search field, or a category filter in the Category view. A dormant category filter in another view doesn't count; you clear it in the Category view.

The detail view (modal dialog) isn't just for opening — you can page through it too: the arrow buttons in the footer, or the left/right arrow keys, jump to the previous or next element, ordered by atomic number. At the start (hydrogen) and end (oganesson) of the series the respective button is disabled.

The footer also holds Copy link (see Direct links to an element) and Close. When you close the dialog, focus returns to the tile last shown — handy for keyboard use. If that tile is currently dimmed by the search or the category filter, focus goes back to wherever you opened the dialog from instead. While the dialog is open, the page behind it is locked; change language or temperature unit with the dialog closed, and it shows all values accordingly the next time you open it.

Direct links to an element

Whatever element is open shows up in the address: open iron and the URL ends in #Fe. You can share that address or bookmark it — anyone who opens it lands straight in iron's detail view. The Copy link button puts exactly that URL on the clipboard ("Link copied!").

As a fragment, the tool accepts anything the search treats as an exact match, regardless of case:

https://www.jpkc.com/tools/pse/#Fe
https://www.jpkc.com/tools/pse/#26
https://www.jpkc.com/tools/pse/#iron
https://www.jpkc.com/tools/pse/#eisen

Change the fragment while the page is open and the tool jumps to the new element. When you close the dialog, the fragment disappears from the address again.

Molar mass calculator

Below the periodic table sits the Molar mass calculator. Type a chemical formula into the Formula field and the result appears live as you type. The field comes pre-filled with CuSO4·5H2O (copper sulfate pentahydrate).

What the calculator understands:

Element symbols starting with a capital letter (Na, Cl) and subscripts as digits (H2O). It only reads two-letter symbols that exist: Co is cobalt, CO is carbon plus oxygen.
Brackets in three shapes — (), [], and {} — nested and with a multiplier: Ca(OH)2, K4[Fe(CN)6].
Hydrates and adducts with ·, •, *, or . as the separator, each part with its own coefficient: CuSO4·5H2O, CuSO4*5H2O, CuSO4.5H2O.
A leading coefficient: 2H2O counts two water molecules.
Superscript and subscript digits (H₂O, SO₄) — they're converted to plain digits. Superscript signs (⁺, ⁻), on the other hand, aren't understood; write charges with a plain + or -.
Charges at the end are ignored; the electron mass isn't factored in. Digits only count as part of the charge when a ^ or a space precedes them (SO4^2-, SO4 2-); otherwise only the sign is dropped, so NH4+ keeps its 4. That also means SO42- (or SO₄²-) is read as S with 42 O atoms.

H2O            → 18.015 g/mol
Ca(OH)2        → 74.092 g/mol
K4[Fe(CN)6]    → 368.345 g/mol
CuSO4·5H2O     → 249.677 g/mol
SO4^2-         → 96.056 g/mol

What it returns:

the Molar mass in g/mol to three decimal places, next to a Copy button that puts the number on the clipboard (always with a decimal point, e.g. 249.677),
the Hill formula — the canonical notation: carbon first, then hydrogen, then everything else alphabetically; without carbon, everything alphabetically (C2H5OH becomes C2H6O, CuSO4·5H2O becomes CuH10O9S),
a table with element (symbol and name), Count, atomic mass in u, and Mass share in percent, sorted by atomic number,
a notice when the formula contains radioactive elements with a bracketed mass (such as radium in RaCl2): the calculator then uses the mass number of the most stable isotope, so the result is an approximation.

Errors turn the field's border red and show a message: Unknown element "Xx". (unknown symbol), Unbalanced bracket. (brackets don't match), Unexpected "c" — element symbols start with a capital letter. (lowercase letter at the start of a symbol), No elements found. (input without any element, e.g. empty brackets ()), Enter a formula. (input consists of a charge only, e.g. + or ^2-). These messages are in English in both language modes.

The atomic masses come from the same data as the tiles (abridged IUPAC standard atomic weights), so results may differ in the last digit from reference tables that carry more decimals.

Language toggle EN/DE

Unlike most JPKCom tools, the PSE is bilingual by itself. The button with the translation icon (top right) switches between English and German. Its label shows the language you would switch to: when the table is in English, the button reads "DE"; when it's in German, it reads "EN".

The toggle affects almost the entire interface:

the table title and all labels, including the Colour by options,
all element names in the grid (e.g. Iron ↔ Eisen, Lead ↔ Blei, Tungsten ↔ Wolfram),
the category labels in the legend and detail view,
the f-block placeholder labels,
the field labels in the detail view (Atomic number ↔ Ordnungszahl, etc.),
the molar mass calculator (column headers, notices; the error messages stay in English),
the number format of most values (decimal comma in German; temperatures keep the point, and so do atomic masses — except in the legend of the atomic mass color scale).

The tool also switches the interface's language markup, so screen readers pronounce German names in German and English ones in English. A few screen-reader-only labels stay in English even in the German view, though: the search field (Search), the reset button (Reset filter), the detail view's close button (Close), and the paging buttons (Previous element/Next element).

Starting language: on your first visit the PSE follows your browser's language — German if it starts with "de", English otherwise. The tool stores this starting language locally in the browser right on the first load, and clicking the button changes the stored value; on your next visit the PSE opens straight in the language you used last.

Data and storage

The PSE runs entirely in the browser: the data for all 118 elements is baked into the tool, and every calculation — the molar mass calculator included — happens locally in JavaScript. There's no server round-trip, no API, and no upload. The tool stores only two settings locally in your browser: the language and the temperature unit. If your browser blocks local storage, the tool still works — it simply falls back to your browser's language and Kelvin on every visit.

What the PSE deliberately is not

The PSE is a reference work with a molar mass calculator — not a full chemistry suite. It doesn't balance reaction equations and doesn't do stoichiometry beyond the molar mass. It shows the atomic mass per element, but no full isotope breakdown; square brackets simply mark the most stable isotope. The state at a temperature applies to standard pressure — there's no phase diagram with pressure as a second axis. There's no quiz or learning mode and no data export. All data is baked into the tool as a fixed snapshot — a static, fast reference, not a live-updated data service.

For the introduction and audiences see the overview; concrete lookup paths are in the examples and collected know-how in the tips & tricks. You can try it all directly in the tool.