Tables in HTML

This tutorial explains the correct and complete way to define tables in HTML documents. It's meant for beginners as well as for advanced programmers, as it presents some tools and ideas that most times are not used/known.

Tables are a powerful tool when showing and relating certain type of information. Even when many websites are built (because of their thematic) without using a single table, there are some times when the tables' value becomes essential.

In the next lines we'll try to cover all of their characteristics to be ready to use them when the time comes.

Simple tables

An HTML table can be considered, in a simple way, as a group of rows where each of them contains a group of cells (and not viceversa). Tables, as all structures in HTML documents, are defined using elements. So a simple table can be inserted in an HTML document by using three of them: the HTML table element (main container structure), the HTML tr element (row container) and the HTML td element (single cell). Lets see an example:

Note: The borders in this example are set using CSS. We strongly recomend to avoid using the presentational atributes like "border" as they're candidates to be deprecated in the future.

Also note that empty cells should anyway be declared using their respective tags in order to achieve code properness. When the content of a cell needs to be blank, you should use a white space ( ) in place of it. This will make your page more compatible given that some browsers have troubles rendering empty cells.

Cell spanning

For some tables you may need to unify two or more cells into a single one that will take the place of those affected. These unifications can be done with the "rowspan" (for vertical spanning) and the "colspan" (for horizontal spanning) attributes, both available for cells (HTML td tag and HTML th tag).

See in the example above how a cell definition that spans 2 cells, is the unified equivalent of two single cell definitions. This also works for vertical spanning with a small difference due to the nature of HTML tables. When spanning cells vertically, the cell's definitions in the rows affected by the span must be skipped. See the example, where the field 1, 4 and 7 are spanned:

You must be careful when spanning rows and columns to don't overlap the spanned cells. This can result in undesired results.