Simple HTML Table blueprint

simple-html-table-blueprint.html

<table>
  <!-- We may add a caption to our table -->
  <caption>Caption may come here</caption>
  
  <!-- Styling with <col> -->
  <colgroup>
    <col>
    <col>
    <col style="background-color: yellow">
  </colgroup>
  
  <!-- Table head -->
  <thead>
    <tr>
      <!-- A scope attribute can be added to the <th> element to tell screenreaders exactly what cells the header is a header for -->
      <th scope="col">Purchase</th>
      <th scope="col">Location</th>
      <th scope="col">Date</th>
    </tr>
  </thead>
  
  <!-- Table body -->
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  <tbody>
    
  <!-- Table footer -->
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
    
</table>