Designing a periodic table using HTML and CSS can be quite challenging, especially for those who are new to creating tables. The key is to utilize nested tables: an outer table to structure the periodic table itself, with each cell containing an inner (nested) table to organize the element's layout.
The inner tables consist of three rows and two columns, where the second and third rows have cells spanning both columns.
<table>
<tr>
<td class="atomic-number">19</td>
<td class="mass">39.098</td>
</tr>
<tr>
<td class="symbol" colspan="2">K</td>
</tr>
<tr>
<td class="name" colspan="2">Potassium</td>
</tr>
</table>
https://i.sstatic.net/Hr9Fh.png
table {
border: 1px solid #888;
width: 6em;
}
td {
border: 1px solid red;
}
.atomic-number {
font-weight: bold;
}
.mass {
font-size: 0.75em;
text-align: right;
}
.symbol {
font-size: 2em;
text-align: center;
}
.name {
text-align: center;
}
<table>
<tr>
<td class="atomic-number">19</td>
<td class="mass">39.098</td>
</tr>
<tr>
<td class="symbol" colspan="2">K</td>
</tr>
<tr>
<td class="name" colspan="2">Potassium</td>
</tr>
</table>
To complete the design, an outer table is needed to manage the entire structure. Here’s how you can start:
https://i.sstatic.net/Yxcjm.png
.periodic {
border-collapse: collapse;
}
.periodic > tbody > tr > td {
width: 6em;
}
.periodic > tbody > tr > td:not(.empty) {
border: 1px solid black;
}
.periodic > tbody > tr > td >table {
width: 100%;
}
.atomic-number {
font-weight: bold;
}
.mass {
font-size: 0.75em;
text-align: right;
}
.symbol {
font-size: 2em;
text-align: center;
}
.name {
text-align: center;
}
.alkali-metal {
background: pink;
}
.alkali-earth-metal {
background: lavender;
}
.transition-metal {
background: aliceblue;
}
<table class="periodic">
<tr>
<td class="alkali-metal">
<table>
<tr>
<td class="atomic-number">11</td>
<td class="mass">22.989</td>
</tr>
<tr>
<td class="symbol" colspan="2">Na</td>
</tr>
<tr>
<td class="name" colspan="2">Sodium</td>
</tr>
</table>
</td>
<td class="alkali-earth-metal">
<table>
<tr>
<td class="atomic-number">12</td>
<td class="mass">24.305</td>
</tr>
<tr>
<td class="symbol" colspan="2">Mg</td>
</tr>
<tr>
<td class="name" colspan="2">Magnesium</td>
</tr>
</table>
</td>
<td class="empty"></td>
</tr>
<tr>
<td class="alkali-metal">
<table>
<tr>
<td class="atomic-number">19</td>
<td class="mass">39.098</td>
</tr>
<tr>
<td class="symbol" colspan="2">K</td>
</tr>
<tr>
<td class="name" colspan="2">Potassium</td>
</tr>
</table>
</td>
<td class="alkali-earth-metal">
<table>
<tr>
<td class="atomic-number">20</td>
<td class="mass">40.08</td>
</tr>
<tr>
<td class="symbol" colspan="2">Ca</td>
</tr>
<tr>
<td class="name" colspan="2">Calcium</td>
</tr>
</table>
</td>
<td class="transition-metal">
<table>
<tr>
<td class="atomic-number">21</td>
<td class="mass">44.956</td>
</tr>
<tr>
<td class="symbol" colspan="2">Sc</td>
</tr>
<tr>
<td class="name" colspan="2">Scandium</td>
</tr>
</table>
</td>
</tr>
</table>