Back to basics time. Whether you’re an expert frontend developer, or a newbie, you probably may forget some of the basics, or even overlook them.

In this tutorial I will show you the code to build a simple HTML semantic table like this one below.

Believe me you may find some semantically important HTML elements you probably haven’t thought of.

HTML

<table>
  <caption>
    Receipt
  </caption>
  <thead>
    <tr>
      <th scope="col">Item</th>
      <th scope="col">Price</th>
      <th scope="col">Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Milk</th>
      <td>LE 20.00</td>
      <td>1</td>
    </tr>
    <tr>
      <th scope="row">Coffee</th>
      <td>LE 30.00</td>
      <td>1</td>
    </tr>
    <tr>
      <th scope="row">Cookie</th>
      <td>LE 8.20</td>
      <td>1</td>
    </tr> 
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>LE 58.20</td>
      <td>3</td>
    </tr>
  </tfoot>
</table>

CSS

caption,
th,
td {
  border: 1px solid;
}


table {
  border-collapse: collapse;
}

The CSS JOB here is only to create the borders and to collapse the borders between table cells (not to have a double borders because of every cell’s own border).

Without border-collapse: collapse; 👇🏻

As you see, each cell has its own border. This might be a desired design in some case though.

Now let’s talk about HTML code.

<caption>

It is the main caption of the table. It must be written just after the <table> element. It is at top of the table by default but you can make it go bottom with CSS like this.

caption {
  caption-side: bottom;
}

<thead>

This is the main head of the table. Inside it there will be a set(s) of table rows <tr>.

<tfoot>

It contains a set of row(s) that summarizes the columns of the table.

<tr>

It defines a row of cells that can be established using a mix of <th> (header cell), and <td> (data cell).

<th>

It defines a cell as a header of a group of cells. It can be differentiated than <thead> by the scope attribute. If the scope attribute value is “row” then it is a head for a row of cells.

<td>

It represents the data cell of the table.