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 data is shown for each element, what the color categories mean, and how search, filter, detail view, and language toggle work together. The interface starts in English, and 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 you'll find two placeholder tiles that point to the relocated rows (labeled "57–71" and "89–103"). A gap visually separates the main table from the f-block.

The whole table is horizontally scrollable, so the wide 18-column grid stays fully usable on narrow screens.

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,
the element symbol (large and centered),
the name in the currently selected language,
the atomic mass (in u; for elements without a stable isotope shown in square brackets, e.g. [267], indicating the most stable isotope).

The tile color reflects the element category (see below). Every tile is keyboard-reachable and opens on click, Enter, or Space to bring up the detail view.

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, the name, a tinted category badge, the atomic number (#z), 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 — the atomic mass in u.
Period — the row in the periodic table.
Group — the column; for lanthanides and actinides this reads "f-block".
Block — the orbital block of the element (S, P, D, or F block).
State (25°C) — solid, liquid, gas, or unknown, at room temperature.
Oxidation States — the typical oxidation numbers.

Right table — physics & chemistry

Electron Configuration — in noble-gas shorthand (e.g. [Ne] 3s² 3p²).
Electronegativity — on the Pauling scale (where defined).
Melting Point — given in both Kelvin and degrees Celsius.
Boiling Point — also in K and °C.
Density — in g/cm³ (scientific notation for very light gases).

Footer — history & identifier

Discovered — the year of discovery; for elements known since antiquity it reads "Since antiquity".
By — the discoverer(s) or research group.
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 "—".

The block derives from the category

The block assignment follows a simple rule: lanthanides and actinides form the F block, transition metals the D block, alkali and alkaline earth metals (plus helium) the S block, and everything else the P block.

Color categories and legend

The PSE assigns each element to one of ten categories and colors its tile accordingly. Above the table, a color legend explains the mapping — and also acts as a filter (see below). The ten categories:

Color	Category
Red	Alkali Metals
Orange	Alkaline Earth Metals
Yellow	Transition Metals
Lime	Post-Transition Metals
Teal	Metalloids
Blue	Reactive Nonmetals
Purple	Halogens
Cyan	Noble Gases
Pink	Lanthanoids
Violet	Actinoids

Below the table there's an additional small state legend for the state-of-matter dots on the tiles: Solid, Liquid, Gas, and Unknown. "Unknown" mostly applies to the superheavy elements, whose state at room temperature has not been experimentally confirmed.

Search

Above the grid sits a search field (Search / Suche …). It filters the table live as you type, scanning several fields at once:

the English name,
the German name,
the symbol,
the atomic number (as an exact input).

Importantly, the search checks both language names regardless of the currently selected language. So you can type "Wasserstoff" or "Hydrogen", "H" or "1" and hit the same element. Matches are highlighted, all other tiles dimmed; dimmed tiles are also no longer reachable via the Tab key.

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. A second click on the same category clears the filter again.

Search and category filter act in combination (logical AND): if you search for "o" and filter to noble gases, only the noble gases whose name contains an "o" remain. A reset button (×) next to the search field clears both filters at once; it's only active while a filter is set.

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. When you close the dialog, focus returns to the tile last shown — handy for keyboard use.

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 the entire table:

the table title,
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.).

Your choice is stored locally in the browser — your next visit opens the PSE straight in the language you used last. Note: by default (before the first toggle) the tool starts in English.

What the PSE deliberately is not

The PSE is a reference work, not a chemistry calculator. It doesn't compute molar masses of compounds, doesn't balance reaction equations, and doesn't do stoichiometry. It shows the atomic mass per element, but no full isotope breakdown; square brackets simply mark the most stable isotope. There's no quiz or learning mode, no export, and no direct link to a single element. 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.