HTML Basics: Table

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 function 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.