Important

  1. HTML tables should only be used for rendering data that naturally belongs in a grid. Don't use tables for page layout. A lot of webdesigners used the tables for the layout, but there are two main reasons not to do it:
  2. Don't use border attribute inside the table. The border has to be defined in CSS. Actually all the table styling will be done in CSS.

Table Element

A table can be created with the <table> element. Every table starts with the <table> tag and ends with the </table> end tag.

The <tr> element defines a table row (horizontal) and the <td> (table data) element defines the cells. These two elements are nested inside the table element. In addition you can use <th> element instead of td to define cell header.

There are additional table attributes as: rowspan, colspan; to define how many cells are combined together.

Semantic table elements are: <thead>, <tfoot>, <tbody>.

For styling purpose you may use: <colgroup>, <col>.

Table Elements Order

The order of table elements is defined as follows:
  1. an optional <caption> element,
  2. zero or more <colgroup> elements,
  3. an optional <thead> element,
  4. either one of the following:
    • zero or more <tbody> elements,
    • or one or more <tr> elements,
  5. an optional <tfoot> element