Advanced TablesS2C Home « Advanced Tables

• <<    Widgets
• Advanced Forms     >>

In the HTML5 Intermediate Tutorials - Lesson 9 - An Introduction To Tables lesson we took an initial look at using HTML tables.

In this lesson we continue our investigation when we look at the <col>, <colgroup>, <thead>, <tbody> and <tfoot> HTML tags.

The Table Column Element

The <col> tag is a self closing tag used to define criteria for a table column and must be used within the <colgroup> </colgroup> or <table> </table> elements.

The Table Column Group Element

The <colgroup> tag and its' closing </colgroup> tag are used to group columns together and must be used within the <table> </table> element.

The Table Header Element

The <thead> tag and its' closing </thead> tag are used within the <table> </table> element to group the header content of the table together.

The <thead> </thead> element should precede any <tbody> </tbody> or <tfoot> </tfoot> elements.

The Table Body Element

The <tbody> tag and its' closing <tbody> tag are used within the <table> </table> element to group the body content of the table together.

The <tbody> </tbody> element should follow any <thead> </thead> element and precede any <tfoot> </tfoot> element.

The Table Footer Element

The <tfoot> tag and its' closing </tfoot> tag are used within the <table> </table> element to group the footer content of the table together.

The <tfoot> </tfoot> element should follow any <thead> </thead> element and <tbody> </tbody> elements.

Column & Column Group Tag Example

<table>
  <colgroup style="border:1px solid black;">
    <col span="2" style="background-color:purple;border:1px solid white;">
    <col style="background-color:yellow;">
  </colgroup>
  <tr>
    <th>Fruit</th>
    <th>Colour</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Banana</td>
    <td>Yellow</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Pea</td>
    <td>Green</td>
    <td>50</td>
  </tr>
</table>

The <colgroup> tag identifies a group of columns to apply changes to. In our example we are applying a 1 pixel solid black border to all columns

The <col> tag identifies a column or a group of columns when used in conjunction with the span attribute to apply changes to.

Table Header, Body and Footer Tag Example

<table>
  <thead style="background-color:orange;border:1px solid black;">
    <tr>
      <th>Fruit</th>
      <th>Colour</th>
    </tr>
  </thead>
  <tbody style="background-color:yellow;border:1px solid blue;">
    <tr>
      <td>Banana</td>
      <td>Yellow</td>
    </tr>
    <tr>
      <td>Pea</td>
      <td>Green</td>
    </tr>
  </tbody>
  <tfoot style="background-color:pink;border:1px solid green;">
    <tr>
      <td>Salad</td>
      <td>Rainbow</td>
    </tr>
  </tfoot
</table>

Reviewing Our Changes

The <thead> </thead>, <tbody> </tbody> and <tfoot> </tfoot> elements allow us to apply different values to the table rows and cells within them.

What isn't apparent is that these tags are also useful when printing tables. A header and footer will appear on each page which is a very useful feature when printing off long tables.

Lesson 5 Complete

Edit the HTML to repeat the table rows within the <tbody></tbody> element until your table spans a printable page, to see the printed header/footer feature at work. Also mess around with the tags from this lesson to get really competent with table content.

Related Tutorials/Quizzes

HTML5 Intermediate Tutorials - Lesson 6 - An Introduction To Tables

CSS Advanced Tutorials - Lesson 4 - Styling Tables

HTML5 Advanced Quizzes - Advanced Tables Quiz

What's Next?

In the next lesson we take a final look at forms and their more advanced features.

HTML5 Reference

The <col> table column tag

The <colgroup> table column group tag

The <thead> table header tag

The <tfoot> table footer tag

The <tbody> table body tag

• <<    Widgets
• Advanced Forms     >>