Day 16: Table 🎶

A table is used to display tabular data.

The example component is visible below.

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;
}