| Country | Total area | Land area |
|---|---|---|
| Denmark | 43,070 | 42,370 |
| Finland | 337,030 | 305,470 |
| Iceland | 103,000 | 100,250 |
| Norway | 324,220 | 307,860 |
| Sweden | 449,964 | 410,928 |
In the HTML markup language, a table is a data structure consisting of rows which consist of cells (fields). A table can be a simple collection of data in tabular format; see example on the right. It could be much more complicated, and might contain other tabulated data than just numbers. Tables have also been widely used for other purposes, such as putting some collection of images (and their captions) into tabular format, or just in an attempt to create some particular layout, like newspaper-like columns.
Irrespectively of what you use tables for and how complicated they are,
the basic structure of a table is a table element,
delimited by <table ...> and </table>
tags, with some number of rows between them. A Table Row is
written as a tr element, which in turn contains some number of
cells:
td (Table Data cell) and/or th (Table Header cell)
elements. Example of a Table Row element:
<tr> <th>Denmark</th> <td>43,070</td> <td>42,370</td> </tr>
Simple, isn't it? But there's a lot you can add to that structure.
In our example, there is a caption element that contains
text that acts as a heading-like caption for the table.
Some additions can be rather essential to visual appearance,
such as align attributes if you
wish to have numeric columns nicely aligned. If you're using tables
essentially
for layout purposes,
you'll probably pay great attention to various attributes that can
affect the appearance. For tabulated data, you could add
elements and attributes that indicate the logical structure of the data
better, such as scope="col" or scope="row"
into th tags to indicate whether the cell is a column header
or a row header.
The following tutorials on tables can, in my opinion, be read and understood without any previous knowledge about HTML tables, provided that you know the very basics of HTML in general. On the other hand, some of them discuss fairly advanced topics too.
There is often heavy discussion between "structural" and "layout" attitudes as regards to using HTML tables, or HTML in general. In particular, phrases like "advanced tables" mean very different things to different people. They might mean attempts at complex pixel-exact layout control (for pages that might not contain tabulated data at all), or they might mean structurally complex data tables. Keep this in mind when reading the tutorials and references listed below.
In practice, the use of tables for layout could be rather simple and risk-free, or it could seriously prevent the page from adapting to various browsing situations. When tables are used for layout, it is essential to accessibility how well the page behaves when the table is linearized, i.e. presented row by row, for example in speech synthesis. See notes on tables in the WAI guidelines. It is also useful to consider making the table more flexible, more "fluid", e.g. by using percentage widths rather than pixel widths, or just letting the cells take their natural width and height. See the FAQ entry Are there any problems with using tables for layout?
It is best to avoid using tables for layout (that is, when the material is not logically tabular) and to use style sheets for suggesting visual layout. If you are new to style sheets, check the resources suggested in How to write style sheets (CSS). For using style sheets for layout in particular, in the sense of positioning and dimensioning things the way that tables for layout have been used for, check the tutorial CSS Positioning, Part I first, then proceed to CSS Positioning, Part II first. You might also consider CSS Floats, Part I and CSS Floats, Part II, especially since floats are simpler than positioning and often sufficient for some basic positioning.
For data tables, linearizability is useful and perhaps sufficient in simple cases like our small example. In complicated or large tables, other considerations arise. Suppose a speech synthesizer reads table cell content "43,070" to you. Will you understand what it relates to, if it's inside a large table? Typically, you would need to know the column, by the column header, such as "Total area", or its abbreviation like "total", and might need to recall the row header, such as "Denmark", too.
Thus, to help assistive technologies,
authors should add markup that expresses the structure of the table.
This means things like using the attribute scope="col"
in a <th> tag to indicate that the cell is a column
header (as opposite to row header).
There is a good tutorial that covers such issues:
How to Create Accessible Tables, which is part of
WebAIM
material.
Another tutorial is Jim Thatcher's
Accessible
Tables.
Ian Lloyd
has written an online-tool for generating markup that
improves the accessibility of tables:
Accessible table builder.
There are answers to several questions related to tables in WDG's Web Authoring FAQ. Check it first!
However, the answer to "How do I center a table" there is incorrect. See Centering Tables by Nick Theodorakis for better information.
See also:
The most official reference is the Tables section in the HTML 4 specification, as amended in syntax details by the XHTML 1.0 specification.
You might regard the following as more readable reference material:
As regards to using
CSS
in conjunction with tables, there are both general properties
that you can set (e.g., padding properties for a
td element as for any other element) and properties
specifically for affecting table appearance
(e.g., border-collapse), which are described in section
Tables in the CSS2 reference.