JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <head>
    <meta charset=utf-8">
    <lang="en-us">
      <title>My First DYI Table</title>
  </head>
  <h1>Favorites Table</h1>
  <table>
    <tr>
      <th>Favorite Cereal</th>
      <td>Chocolate Frosted Flakes</td>
    </tr>
    <th rowspan="2">Favorite Kitties</th>
    <td>Maui #1</td>
    <tr>
      <td>Kai #2</td>
    </tr>
    <th rowspan="2">Favorite Games</th>
    <td>Scrabble #1</td>
    <tr>
      <td>Kingdomino #2</td>
    </tr>
    <tr>
      <th colspan="2">Favorite Outside Activities</th>
    </tr>

    <tr>
      <td>Basketball</td>
      <td>Biking</td>
    </tr>

CSS

html {
  font-family: sans-serif;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(200,200,200);
  letter-spacing: 1px;
  font-size: 0.8rem;
}

td, th {
  border: 1px solid rgb(190,190,190);
  padding: 10px 20px;
}

th {
  background-color: rgb(235,235,235);
}

td {
  text-align: center;
}

tr:nth-child(even) td {
  background-color: rgb(250,250,250);
}

tr:nth-child(odd) td {
  background-color: rgb(245,245,245);
}

caption {
  padding: 10px;
}