(Some links on this page take you to details in the HTML Tag Reference. Bookmark this page in your Favorites so you can come back to it later.)

HTML table code from the top down

Most tutorials on HTML tables build from the bottom up, starting with minimal HTML table code and adding features a step at a time in subsequent examples. Many developers prefer a quick top-down view, since it's easy to remove the elements that are not needed for a particular table layout, so this table tutorial takes that approach.

The top element of an HTML table layout is, of course, the table element. Inside the table element are the following child elements:

1. an optional caption element
2. optional column definitions, using an optional colgroup element and one or more <col/> elements
3. an optional table head section, using a thead element with table rows and table heading cells, similar to the table body, except that the table headings use the <th> tag rather than the <td> tag
4. an optional table footer section, using a tfoot element with table rows and table cells, similar to the table body
5. the body section, using an optional tbody element along with tr table row elements that contain td elements for the table cells

The tfoot element for the HTML table footer comes before the tbody element for the body of the HTML table, near the table header. This is because when the table is displayed on multiple pages, such as when printing web pages, the table header and footer will appear at the bottom of those rows of a table that fit on a page, before the rest of the body of the table, which might be considerably long in some cases, has been rendered.

The following HTML code is an example of all of the elements which can be used for HTML tables:

<table class="border">
   <caption>Table Caption</caption>
   <colgroup>
      <col style="width: 20%"/>
      <col style="width: 30%"/>
      <col style="width: 50%"/>
   </colgroup>
   <thead>
      <tr>
         <th rowspan="2"></th>
         <th colspan="2">Multiple Column Heading</th>
      </tr>
      <tr style="vertical-align: bottom">
         <th>First Column Heading</th>
         <th>Second Column Heading</th>
      </tr>
   </thead>
   <tfoot>
      <tr><td colspan="3">This is an example of an HTML table footer.</td></tr>
   </tfoot>
   <tbody>
      <tr>
         <th>Row 1</th>
         <td>Row 1 Column 1</td>
         <td>Row 1 Column 2</td>
      </tr>
      <tr>
         <th>Row 2</th>
         <td>Row 2 Column 1</td>
         <td>Row 2 Column 2</td>
      </tr>
   </tbody>
</table>

The class attribute on the <table> tag is used to add borders in the table examples in the next section.