<h1>What We've learned so far</h1>

<p>The following table summarizes all <abbr title="Hyper Text Markup Language">HTML</abbr> elements We've learned so far.</p>

<table>

  <caption>Table elements I've learned</caption>

  <thead>

    <tr>

      <th class="primary">Element</th>

      <th class="primary">Description</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th colspan="2" scope="rowgroup">The root element</th>

    </tr>

    <tr>

      <td>table</td>

      <td>which is the main container.</td>
      
    </tr>
    <tr>

      <td>td</td>

      <td>used to create data cells.</td>
      
    </tr>
    <tr>

      <td>tr</td>

      <td>represents the rows.</td>
      
    </tr>

  </tbody>

  <tbody>

    <tr>

      <th colspan="2" scope="rowgroup">Table Heading</th>

    </tr>

    <tr>

      <td>th</td>

      <td>Add a table heading</td>

    </tr>
    <tr>

      <td>thead</td>

      <td>used to create a separate header for a table</td>

    </tr>

  </tbody>

  <tbody>

    <tr>

      <th colspan="2" scope="rowgroup">Other attributes</th>

    </tr>

    <tr>

      <td>scope</td>

      <td>identifies whether a cell is a header for a column, row, or group of columns or rows</td>

    </tr>
       <tr>

      <td>caption</td>

      <td>provide a description about the data presented in a table</td>

    </tr>
       <tr>

      <td>colspan & rowspan</td>

      <td>stretches two or more cells across a table.</td>

    </tr>
       <tr>

      <td>tbody</td>

      <td>it indicates the main body of the table.</td>

    </tr>
       <tr>

      <td>tfoot</td>

      <td>Used to create separate footer for the table</td>

    </tr>

  </tbody>

</table>

td, th {
  border: 1px solid #999;
  padding: 20px;
}
td{
  background: gray;
  color: white;
}
.primary{
  background-color: brown;
  position: sticky;
}
 th {
  background: #ffc107;
  color: white;
  border-radius: 0;
  top: 0;
  padding: 10px;
}
tbody > tr:hover {
  background-color: #ffc107;
}