A table is used to display tabular data.
The example component is visible below.
Song 🎶 | Country 🗺️ |
---|---|
Silent Night | 🇦🇹 Austria |
Santa Claus Is Coming To Town | 🇺🇸 United States of America |
Hark! The Herald Angels Sing | 🏴 England |
Deck The Halls | 🏴 Wales |
Jingle Bells | 🇺🇸 United States of America |
O Tannenbaum | 🇩🇪 Germany |
A few notes about this table component:
- CSS Variables are used for colors,
- the
.advent-table tr:only-child
selector is used to adding a thicker border to distinguish table head, - the
.advent-table tr:not(:only-child):nth-child(even)
selector is used to apply background color to every even sibling that is not the only one (see my article about “enabling” selectors).
The code:
<div class="advent-table">
<table>
<caption>Christmas carols origins</caption>
<thead>
<tr>
<th>Song 🎶</th>
<th>Country 🗺️</th>
</tr>
</thead>
<tbody>
<tr>
<td>Silent Night</td>
<td>🇦🇹 Austria</td>
</tr>
<tr>
<td>Santa Claus Is Coming To Town</td>
<td>🇺🇸 United States of America</td>
</tr>
<tr>
<td>Hark! The Herald Angels Sing</td>
<td>🏴 England</td>
</tr>
<tr>
<td>Deck The Halls</td>
<td>🏴 Wales</td>
</tr>
<tr>
<td>Jingle Bells</td>
<td>🇺🇸 United States of America</td>
</tr>
<tr>
<td>O Tannenbaum</td>
<td>🇩🇪 Germany</td>
</tr>
</tbody>
</table>
</div>
.advent-table {
--color-xmas-alpha: #f7efef;
--color-xmas-beta: #d72621;
--color-xmas-gamma: #639565;
--color-xmas-delta: #fff;
overflow: auto;
}
.advent-table table {
border-collapse: collapse;
background-color: var(--color-xmas-delta);
color: var(--color-xmas-gamma);
min-width: calc(100% - 2px);
}
.advent-table th,
.advent-table td {
border: 1px solid var(--color-xmas-beta);
padding: .5em;
}
.advent-table tr:only-child {
border-bottom: .2em solid var(--color-xmas-beta);
}
.advent-table tr:not(:only-child):nth-child(even) {
background-color: var(--color-xmas-alpha);
}
.advent-table caption,
.advent-table th {
font-weight: bold;
}