Table example

by jshacker

HTML

<table>
  <caption>
    Characteristics with positive and negative sides
  </caption>
  <thead>
    <tr>
      <th>Negative</th>
      <th>Characteristic</th>
      <th>Positive</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sad</td>
      <th>Mood</th>
      <td>Happy</td>
    </tr>
    <tr>
      <td>Failing</td>
      <th>Grade</th>
      <td>Passing</td>
    </tr>
    <tr>
      <td>A</td>
      <th>B</th>
      <td>C</td>
    </tr>
    <tr>
      <td>D</td>
      <th>E</th>
      <td>F</td>
    </tr>
  </tbody>
</table>

CSS

body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

table {
  width: 100dvw;
}
table caption {
  background-color: #eee;
  color: navy;
  font-weight: bold;
}
table thead tr {
  background-color: navy;
  color: white;
  font-weight: bold;
  height: 5rem;
}
table tbody tr:nth-child(odd) {
  background-color: grey;
  color: white;
  text-shadow: 1px 1px 1px black;
}
table tbody tr:nth-child(even) {
  background-color: #ddd;
}