Tables in HTML

Sizing tables

Warning: This section explains the use of two attributes that are candidates to be deprecated because they are for presentational purposes. The reason for their description is that these characteristics are not yet deprecated and therefore still available, even when not recomended. Don't hesitate to avoid their use and replace them with style sheet's attributes (see our Cascading Style Sheets (CSS) tutorial). We also recommend to avoid the use of the "px" or "pt" units to make your pages more accessible to people with disabilities.

The size of a table in HTML can be set using the attributes "width" and "height". These attributes can be defined in many parts of a table: cells (HTML th tag and HTML td tag), columns (HTML col tag), column groups (HTML colgroup tag), rows (HTML tr tag) and the table itself (HTML table tag). It's recommended to define these attributes only in columns and rows (whenever it's possible) to avoid ambiguous interpretations. Anyway, the size of a table is usually not only decided by the values of these attributes but also based on the available space to draw it. In some cases, browsers may override the sizing attributes to make a table fits into the screen.

These two attributes accept values in multi-lenght type. In the next example we define a table where the two first columns get each one the 15% of the table's width and the two second have a width of 35% each, while the height of the first row is of 50 pixels.

Horizontal grouping

An HTML table can be grouped horizontally in three groups: the header (HTML thead tag), the body or bodies (HTML tbody tag) and the footer (HTML tfoot tag). Each one of these tags locks up a group of rows. These divisions may help to make tables easier to read, specially when the table must be rendered in more than one page (e.g., when a large table is printed). In that case, headers and footers are rendered in each page.

It's also possible to make these groups visible with the table attributes. These attributes will be seen later in this tutorial when defining the visual aspect of a table.

Note that footers are placed in the code preferably right below the headers at the beginning of a table. This is because very large tables may take some time to download completely (up to minutes), and browsers may choose to render footers even before all the body cells have been received.

A single table may have more than one body. This provide authors with a way to group or separate rows. For example, in the table above all the months can be grouped quarterly, generating this way 4 bodies in the table.

Vertical grouping

The other way to group cells in a table is the vertical grouping. This not only allows to group columns thematically, but also provides a way to assign attributes to entire columns of a table. The grouping can be done using two tags: the HTML colgroup tag and the HTML col tag. These two tags may be used separately or altogether.

In the example below we'll insert a very simple table that will define column attributes using the HTML col tag:

Note the tag closing used (" />") to make it XHTML code compliant. To learn more about the attributes used in this example, please refer to this description page about the HTML col tag.

This example helped to define common attributes for all cells in the affected columns at once, but you cannot define column groups without using the HTML colgroup tag:

Now in this example we have three column groups. To learn more about this check the HTML colgroup tag page. Anyway all the columns affected by a column group must share the same attributes. This may not be good for cases where columns in a column group must have different characteristics. To solve this problem authors may use both tags together:

This way we're still defining three column groups but giving the columns specific characteristics no matter if they belong to the same column group or not.