The HTML Table Tag

Structure and internal elements in a table in HTML 4, and what changed with HTML 5.

Table tag is the standard definition to represent collections of data. It is useless to try to replace it with layers and style sheets, and conversely, the layout of a webpage should be build with layers and style sheets and not a table.

Tags in HTML 4 and HTML 5

Table

The global container, you can assign an id and a class for an overall custom style.

<table>
</table>

Caption

The caption element is placed just below <table> and before other tags, <thead> or <tr>.

<table>
  <caption style="caption-side:bottom">Description</caption>
  <tr>
    <th>Title 1</th><th>Title 2<th>
  </tr>
  <tr>
    <td>Content 1</td> <td>Content 2</td>
  </tr>
</table>

Description

Title 1	Title 2
Content 1	Content 2

It will be displayed above or below the table with the caption-side attribute: top or bottom or left and right (the property is not recognized by Internet Explorer 7 and older and IE supports only top and bottom).
The default is top.

In JavaScript, it may be changed with the statement: object.style.captionSide = "bottom".

To align left (default), center or right use the text-align attribute.

The width of the caption is the same as the table. A margin is given to the label with the padding property, and you can change the background color, and give it a border.

Thead

Contains the column headings. You can ignore it, and simply using <th> tags, but it helps to access the contents of a table in JavaScript.

Contains one <tr> row and several <th>cells.

<table>
 <thead>
   <tr>	
     <th>Col 1</th>
     <th>Col 2</th>
   </tr>
 <thead>
 <tbody>
   <tr>
     <td>Contenu 1</td>
     <td>Contenu 2</td>
   </tr>
 </tbody>
</table>

Col 1	Col 2
Content 1	Content 2

Tfoot

This item is of small value. He can duplicate the titles of column, but makes the table rendering bad. If used, it is placed before the rows just after <thead>.

Tbody

Contains a set of rows, thus <tr> tags. Used by script to access the contents of the table.

Tr

Row of the table, containing a set of cells, either <th> or <td> tags.

Th

Header cell. You can assign a particular style to headings. They can be placed in <thead> or <tr>.

We can put one at the start of each <tr> to create a row header. You can also place them in the body of the table. However if the size of a <th> is different from those of <td>, this may change the overall appearance.

Td

Table cells. The colspan attribute allows to combine several horizontally without changing the overall layout of the table. We can merge them vertically over several rows with the rowspan attribute.

Example:

	<td colspan="2"> </td>
<td rowspan="2"></td>

Tags for the future

Colgroup

A colgroup tag represents one or several columns. With the span attribute that allows grouping, it may represent several adjacent columns.
You can so assign properties to all cells in a column: width, color, alignment, etc..
It comes after the caption and before all other tags.

Colgroup and col are poorly or not supported by Firefox so  they are reported for the record.

Col

The col tag applies a style to a column or adjacent columns with the span attribute, inside a colgroup.
Thus the style defined by a colgroup can be specified for each column when the colgroup contains several columns. You can override the style of a colgroup with col.

The width attribute of col or colgroup defines the width of each column.

Table Structure

The table tag and the choice of internal tags.

Complete structure

It theoretically allows better access to the content, but not more than a simple structure with IDs and classes.

<table>
    <caption></caption>
    <thead>
        <tr>
            <th></th>
            ...
        </tr>
        ...
    </thead>
    <tfoot></tfoot>
    <tbody>
    <tr>
        <td></td>
        ...
     </tr>
     ...
    </tbody>
</table>

The colgroup and col tags are not well implemented by Firefox, so there are ignored.

Simple structure

It is sufficient in most cases accompanied by a style sheet to highlight the headers of columns and rows.

<table>
    <caption></caption>
    <tr>
        <th></th>
        ...
    </tr>
    <tr>
        <td></td>
        ...
    </tr>
</table>

You can also use <th> at the beginning of the rows.

Table in HTML 5

The new tfoot tag can be placed before or after tbody.

Closing tags like </td> </th> </thead> </tbody> </tfoot> may be ommitted.
But <table> and <caption> must be closed.

HTML 5 code sample:

<table>
  <caption>Label</caption>
  <thead>
   <tr>
   <th>Title 1
   <th>Title 2 
  <tfoot> Bottom text
  <tbody>
    <tr>
     <th>Row title
     <td>Csell content
   ...
</table>

It is possible to dynamically create a table with functions such as:

• createTbody ()
• insertRow (index) and deleteRow (index)
• createTFoot () and deleteTFoot ()
• createCaption () and deleteCaption ()

These functions are associated to the DOM object of the table or that of internal tags such as tbody, tr.

Also you can read the contents of a table with DOM objects of its tags or collection of tags ("table" represents the DOM object of the table):

• table.caption
  Access the DOM object of the <caption> tag in table.
• table.tHeads
  Access the DOM object that is the collection of all <thead> tags.
• table.rows
  Access the DOM object that is the collection of all <tr> tags.
• table.tBodies
  Access the DOM object collection of all tbody in table.

Réf: Table W3C spec.

Case Study

• Giving a table a professional look with CSS.