table element

Type:Tables
Attributes: cellborder  •  cellmargin  •  cellpadding  •  table-layout  •  align  •  alt  •  background-color  •  background-image-dpi  •  background-image-position  •  background-image  •  background-pdf  •  border-color  •  border-style  •  border-width  •  border  •  clear  •  corner-radius  •  display  •  float  •  font-size  •  height  •  href  •  left  •  line-cap  •  line-height  •  line-join  •  margin  •  onmouseover  •  overflow  •  padding  •  page-break-after  •  page-break-inside  •  position  •  rotate  •  size  •  top  •  vertical-align  •  visibility  •  white-space  •  width  •  class  •  colorspace  •  direction  •  id  •  lang
See:tbody tfoot thead td tr

The table tag is used to create a table. Inside the table tag use the tr tag to define rows in the table, and the TH or td tags to define tables cells inside those rows.

If the table is expected to wrap at the end of the page, the table rows should be placed inside a thead, tbody or tfoot group as appropriate. Only one of each of these tags may exist in a table. Any row not explicitly contained in one of these tags is assumed to be in a TBODY.

The table model used here is slightly different to that used in HTML4, which is different again to that defined in CSS2. Here are the differences:

Like other blocks, tables may be sized automatically depending on the size of their contents, or may have the width and height attributes set.

The margin, border and padding attributes are used to set those values for the whole table, not for the individual cells (so HTML programmers fed up with creating nested tables just to create a border around the table can relax).

The individual cells may also have their margins, padding and borders set seperately, or defaults may be set by setting the cellmargin, cellpadding or cellborder attributes on the table itself.

Finally, the actual layout algorithm used may be set to "auto" or "fixed" using the table-layout attribute. Both algorithms conform to the CSS2 recommendations.

Create a simple table which is autosized

<table>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 4</td></tr>
</table>

Create a simple table which uses the "fixed" layout. The width must be specified for every cell in the first row and the table itself.

<table table-layout="fixed" width="200">
  <tr><td width="60%">Cell 1</td><td width="40%">Cell 2</td></tr>
  <tr><td>Cell 3</td><td>Cell 4</td></tr>
</table>

This shows how to use the ROWSPAN attribute.

<table>
  <tr>
    <th rowspan="2">First column, both rows</th>
    <td>Second column, first row</td>
  </tr>
  <tr>
    <td>Second column, second row</td>
  </tr>
</table>

In this example, the tables width takes precedence over the width set in the cells.

<table width="500">
  <tr>
    <td width="50">Cell 1</td>
    <td width="50">Cell 2</td>
  </tr>
</table>