Tutorial: Tables in HTML

This tutorial explains the correct and complete way to define tables in HTML documents. This will help beginners to learn how to write tables manually in an HTML document, while defines and describes all the tools that are available for advanced (many of whom still don't know all the properties of a table).

As you probably read around the site, our intention is to provide you with "good programing methods" that will give you some extra benefits. This is why we'll choose a way to declare these tables that is compatible with the XHTML code standard.

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. Tables, as all structures in HTML documents, are defined using tags. So a simple table can be inserted in an HTML document by using three tags: the HTML table tag (main container structure), the HTML tr tag (row container) and the HTML td tag (single cell). Lets see an example:

Types of cells

Two types of cells can be defined in an HTML table. One of them is the simple cell (HTML td tag) already defined in the "simple table" example, and the other one is a special type of cell (HTML th tag) that contains header information for all the cells in the column (that belong to it's horizontal group). Browsers may render the content of header cells in a special way (usually as centered bold text). This type of cell is expected to be found in a header section of a table.

In the example below the same "simple table" is defined but this time with header cells:

This cell's characteristics may be visually achieved by using a normal cell with presentational attributes (centered bold text), but the header cells provides more hidden information that may be helpful for non-visual browsers (spoken browsers may speak to the user the cells content while immediately associating it to the header cell) and spiders (like search engines spiders which may help in the site promotion).

Another way to associate header cells to normal cells is using the attributes: "headers" to define a list of cells that provides header information for the actual cell (see the HTML td tag) and "scope" to define a list of cells for which the actual cell provides header information (see the HTML th tag).

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