DEV Community

Michael Lip
Michael Lip

Posted on • Originally published at zovo.one

The Periodic Table Is a Database With the Best Schema in Science

#javascript #webdev #tutorial #beginners

Mendeleev designed the periodic table in 1869 as a way to organize 63 known elements by atomic weight and chemical properties. He left gaps for elements that had not been discovered yet and predicted their properties. Every prediction was confirmed. It is the most successful data schema ever created.

The schema

Each element in the periodic table has these properties:

const hydrogen = {
  atomicNumber: 1,        // Unique ID (proton count)
  symbol: 'H',            // 1-2 letter abbreviation
  name: 'Hydrogen',       // Full name
  atomicMass: 1.008,      // Average mass in amu
  category: 'nonmetal',   // Classification
  group: 1,               // Column (1-18)
  period: 1,              // Row (1-7)
  electronConfig: '1s1',  // Electron shell arrangement
  electronegativity: 2.20 // Pauling scale
};
Enter fullscreen mode Exit fullscreen mode

The brilliance of the table's design: elements in the same column (group) have similar chemical properties because they have the same number of valence electrons. Group 1 (alkali metals) are all highly reactive. Group 18 (noble gases) are all inert. The position in the table predicts behavior.

Building an interactive periodic table

The layout maps directly to a CSS grid:

.periodic-table {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 2px;
}

.element {
  grid-column: var(--group);
  grid-row: var(--period);
}
Enter fullscreen mode Exit fullscreen mode

Each element is positioned by its group (column) and period (row). The lanthanides and actinides (rows 6-7, typically shown below the main table) are the layout exception that requires special handling.

Color coding by category

The standard color scheme groups elements by chemical behavior:

const categoryColors = {
  'alkali-metal': '#ff6666',
  'alkaline-earth': '#ffdead',
  'transition-metal': '#ffc0c0',
  'post-transition-metal': '#cccccc',
  'metalloid': '#cccc99',
  'nonmetal': '#a0ffa0',
  'halogen': '#ffff99',
  'noble-gas': '#c0ffff',
  'lanthanide': '#ffbfff',
  'actinide': '#ff99cc'
};
Enter fullscreen mode Exit fullscreen mode

Practical uses for developers

If you build educational software, chemistry tools, or scientific applications, you need periodic table data. The full dataset is available as JSON from several open sources and includes properties like melting point, boiling point, density, electron affinity, and ionization energy.

For exploring element properties interactively, I built a periodic table at zovo.one/free-tools/periodic-table. Click any element to see its full property set, including electron configuration and physical properties.

I'm Michael Lip. I build free developer tools at zovo.one. 500+ tools, all private, all free.

Top comments (0)