8.1. Parts of a Table

A table in XHTML can be made up of the following parts:

  • Header row(s)

  • Column groupings

  • Body row(s)

  • Header cells

  • Body cells

  • Rows

  • Columns

  • Footer row(s)

  • Caption

Figure 8-1 shows an example of a table with its various parts labeled.

Figure 8-1. Figure 8-1

The table in Figure 8-1 was rendered from the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<html>
<head>
  <title>A XHTML Table</title>
</head>
<body>
  <p>
  <!--  Table definition -->
  <table border="1">
    <!-- Column grouping -->
    <colgroup>
      <col width="35%">
      <col width="65%">
    </colgroup>
    <!-- Table caption -->
    <caption>Table Caption</caption>
    <!-- Table header -->
    <thead>
      <tr><td colspan="2">Table Header</td></tr>
    </thead>
    <!-- Table footer -->
    <tfoot>
      <tr><td colspan="2">Table Footer</td></tr>
    </tfoot>
<!-- Table body -->
    <tbody>
      <tr><th>Header Cell 1</th><th>Header Cell 2</th></tr>
      <tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td></tr>
      <tr><td>Row 2, Cell 1</td><td>Row 2, Cell 2</td></tr>
    </tbody>
  </table>
  </p>
</body>
</html>

Not all of the parts contained in this example are mandatory. It is possible to create a table using only the table tag (<table>) and row (<tr>) and cell/column (<td>) tags. For example, the following table is completely valid:

<table> <tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td></tr> <tr><td>Row 2, Cell 1</td><td>Row ...

Get Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial