Creating Table with HTML

HTML simple table for collecting data.

Let’s make a grocery list together :)

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Aisle</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lays Chips</td>
      <td>2</td>
      <td>$4.00</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Coffe beans</td>
      <td>1</td>
      <td>$7.00</td>
      <td>2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>N/A</td>
      <td>$5.50</td>
      <td>N/A</td>
    </tr>
  </tfoot>
</table>

• We create a table by first adding the <table></table>element.
• Then for the row (Horizontal), we insert <tr></tr>.
• Within table rows, we add table cells. There are two types of table cells. Table data (columns/vertical) <td></td>and Table header <th></th>.
• These two allow us to differentiate between table data and labels.
• It is a best practice to wrap <th></th>with the table head <thead></thead>elements.
• It is also a best practice to wrap all the table data inside <tbody></tbody>elements
• Another organizational element would be <tfoot></tfoot>, the position of this element does not matter, it will always show up at the bottom.

Having these tips and tricks will allow a semantic rich table and in the future, we will be able to play around with CSS.