HTML Tables:
a very short introduction, and
annotated links to tutorials and references

Sample table: Areas of the Nordic countries, in sq km
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.

Data tables vs. layout tables; accessibility

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.

Answers to frequently asked questions

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.