# Periodic Table (PSE) — Manual

> Reference for the Periodic Table (PSE): grid layout, every element data field, the ten color categories, search, filter, detail view, and the language toggle.

Source: https://www.jpkc.com/db/en/tools/pse/manual/

Back to the overview: [Periodic Table (PSE)](https://www.jpkc.com/db/en/tools/pse/) · Open the tool live: [www.jpkc.com/tools/pse/](https://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.

## Category filter

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.

## Detail view and navigation

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](https://www.jpkc.com/db/en/tools/pse/); concrete lookup paths are in the [examples](https://www.jpkc.com/db/en/tools/pse/examples/) and collected know-how in the [tips & tricks](https://www.jpkc.com/db/en/tools/pse/tips/). You can try it all directly in the [tool](https://www.jpkc.com/tools/pse/).