One of the most complex structures in (X)HTML is the table. In its proper form, a table is essentially a two-dimensional list with the option of labels—more precisely, it is (X)HTML's version of the spreadsheet. The table uses quite a large set of elements.
All table elements work as block elements, and all use the core and language attributes.
Most table elements consist of the table element, table rows, and table cells, with the option of a caption. These are simple tables.
The following elements will make for a perfectly suitable table.
Element Name: table
The table element contains all other elements associated with a table. It is a block element.
summary
attribute contains a summary of the table's contents, in case a user agent has difficulty rendering a table (some do).Element Name: caption
The caption
element—which is an optional element, but comes first in any table should you use it—is used to give your table a title.
Element Name: tr
Table cells cannot be stored directly in the table element—they must be arranged in rows. This is the job of the tr
element: It creates the rows that the cells are in.
Element names:
These elements are paired together because they contain similar functions and attributes. They can contain either plain text (which is normally the case) or any body element—including tables. If you're nesting tables, though, you might be going overboard.
td
element to reference the id
attribute in the th
at the head of the td
element's column.rowand
colrefer to a header cell's respective row and column (respectively). I'll get to
rowgroupand
colgroupshortly.
To demonstrate tables, I've included one that would look exactly how it would normally, and the same table with borders added so that you can see just what is going on.
Simple tables as described above are essentially a shortcut. A complete table is divided into several sections, depending on content. Note: The caption
element (if you use it) always goes before any of the following elements.
The core and language attributes may be used with all elements mentioned here.
Tables are divided into three main sections, depending on their content: the table head, the table foot, and the table body. All three elements must have the same number of columns, or your table won't look right (using the colspan
attribute counts).
By the way, when I mentioned the rowgroup
value of the scope
attribute, these sections are what that value refers to.
Element Name: thead
The thead
element is used to contain the column headers. You may use only one thead
element.
Element Name: tfoot
The tfoot
element is an optional element and appears at the bottom of the table. It is usually used for footnotes or even a reiteration of table headers if the table is particularly long. Even though it appears at the bottom of the table, in the code, the tfoot
element goes before the table body.
The reason for this is an HTML document is always processed from top to bottom. (This is why you should have your base
element before your link
elements.) Thus, if the browser fails to download the entire table (which is possible), the tfoot
element will still be processed.
You may use only one tfoot
element.
Element Name: tbody
The tbody
element contains the main body of your table data. You may use as many tbody
elements as you please, so long as you have at least one.
Aside from rows, tables also use columns, which control how cells in specific columns look: their width, height, the vertical alignment of their contents, and so on. Nowadays you can use Cascading Style Sheets to control this, but columns are still a part of the HTML 4.01 Strict specification so I'm mentioning them here, along with their more common attributes.
Element Name: col
The col
element normally controls the appearance of a single column (unless more are specified).
The col
element is an empty element. It has no end tag.
col
element to control more than one column.Element Name: colgroup
The colgroup
element is used to put col
elements into groups. It can also be used on its own. The columns that fall under this element's range are what the colgroup
value of the scope
element refers to.
col
element to control more than one column.colgroup
And col
ElementsThe colgroup
and col
elements go after the caption
element but before any others.
You may have col
elements on their own, colgroup
elements without children, or col
elements nested in colgroup
elements. What may not be done is a mixture of colgroup
elements and lone col
elements.
In other words, the first two following examples are valid, but the third is not.
col
Elements On Their Owncolgroup
Elementscol
Elements Outside colgroup
Elements (Invalid)To demonstrate tables, I've included one that would look exactly how it would normally, and the same table with borders added so that you can see just what is going on. Do note the disadvantage of using multiple tbody
elements: the rowspan
attribute will not allow a cell to stretch beyond its ancestor tbody
element.
thead
, tfoot
, and tbody
Tags Are In Italics.