Tables in HTML

The caption

The caption of a table is another component that adds in readability. While some tables, because of their structure or simplicity, can survive without a caption, others will need it inexorably. In any case, a table's caption can improove but never worsen.

The idea of a caption is to provide a consice description about the data presented in a table or its purpose, introducing context and making it significantly easier to understand. In HTML, captions are inserted using the caption element, right after the table's opening tag and before all other structure elements. In the following example there's a table in which the meaning of data would be very hard to figure out without a proper caption.

<table class="default">
  <caption>Fuel consumption of cars during the drive tests</caption>
  <tr>
    <th scope="col">Car</th>
    <th>January</th>
    <th>February</th>
    <th>March</th>
  </tr>
  <tr>
    <th>Chevrolet Camaro</th>
    <td>1254 gal</td>
    <td>1582 gal</td>
    <td>685 gal</td>
  </tr>
  <tr>
    <th>Lamborghini Aventator</th>
    <td>1854 gal</td>
    <td>1978 gal</td>
    <td>1502 gal</td>
  </tr>
</table>

Cell spanning

Cell spanning is a mechanism through which an author con combine or fusion two or more adjacent cells (td and th) in a table. This effect can be achieved using the cell's attributes colspan, for horizontal spanning, and rowspan, for vertical spanning. These attributes can take an integer greater than zero, representing the number of cells to be spanned by the current cell.

The idea behind this mechanism is almost self explanatory: when the attribute colspan is set in a cell, it indicates interpreters that the cell should span, not only its own space, but the cell space of a number of adjacent cells to the right. The same goes for rowspan but downwards. Because of the structure of tables in HTML, spanning can only be done to the right or downwards. Doing it upwards or to the left would be an attempt to span cell-space already occupied.

In the following example, a cell in the table is spanning three cell spaces, as indicated by the colspan attribute. Note how the declaration for the two cells to the right of this particular cell have been ommited in the code. This is appropriate, as the space of these cells has been taken by the previous.

<table class="default">
  <tr>
    <th></th>
    <th>Day 1</th>
    <th>Day 2</th>
    <th>Day 3</th>
    <th>Day 4</th>
  </tr>
  <tr>
    <th>Mike (injured)</th>
    <td colspan="3">0 km</td>
    <td>4 km</td>
  </tr>
  <tr>
    <th>Susan</th>
    <td>23 km</td>
    <td>18 km</td>
    <td>19 km</td>
    <td>15 km</td>
  </tr>
</table>

Now we'll try the rowspan attribute. Although the idea of spanning here is the same (except for the direction), the structure of HTML tables makes vertical spanning a little different. In horizontal spanning everything happened in the same row (the declaration of the colspan attribute and the omission of contiguous cells). With vertical spanning, the rowspan attribute is set in the cell of one particular row and the omission of spanned cells is made in the subsequent rows, one by one. This means that if a cell in the first row spans the space of three cells vertically, the rows two and three will have one missing cell each. Let's see this with an example.

<table class="default">
  <tr>
    <th></th>
    <th>Basic</th>
    <th>Full</th>
  </tr>
  <tr>
    <th>Setup</th>
    <td rowspan="2">Free!</td>
    <td>$49.99</td>
  </tr>
  <tr>
    <th>First year</th>
    <td>$19.99</td>
  </tr>
  <tr>
    <th>Second year</th>
    <td>$9.99</td>
    <td>$29.99</td>
  </tr>
</table>

If you pay attention, the second row of the previous example, has a cell that's spanning two spaces. Therefore, the third row has a missing cell in the code, namely, its second. This means that the second cell declared (in the code) in the third row ("$19.99") represents the third cell in that row and not the second.

When used together in the same table, the attributes colspan and rowspan must be carefully declared in a way that doesn't produce overlaping cells.