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.