HTML <table> Example & Table Tutorial

(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.

back to top

HTML table with border between cells

Although a style attribute could easily be coded on the <table> tag to add a border style to an HTML table (<table style="border: 4px inset gray">), this will only create a border around the whole table:

For an HTML table with borders between cells, each cell needs the border style. Since coding a style attribute on every cell would be extremely rendundant, the easiest and simplest way to add the border style attribute is using CSS. Code a class attribute on the <table> tag as shown in the HTML table example above. Then add the border styles using a link tag for a style sheet containing the following CSS code:

table.border {
   border-collapse: collapse;
}

table tr {
   vertical-align: top;
}

table.border th, table.border td {
   border: 4px inset gray;
}

The value of "collapse" for the CSS border-collapse style displays a single border between cells rather than the default which gives each cell its own separate border. The CSS vertical-align attribute shown aligns the text in each table row at the top of the cells in that row, unless overridden as shown for the table headings in the table example code above. Note that the CSS border style is applied to the <th> tag and <td> tag on tables with borders in order to display a border around each table cell.

back to top

See the detailed information in the HTML Tag Reference for more information on the various tags used to create an HTML table:

<table>

The table element is the main element that creates an HTML table. The other elements are inside the table element.

<caption>

The <caption> tag is used to create a table caption in HTML. On screen, a caption will appear above the table as the table title.

<colgroup>

A colgroup is a group of one or more columns in a table. It can be used to apply a style to multiple table columns.

<col>

The col element represents a vertical column in a table. It can be used to apply a style to a table column which can be used to, for example, set the column width.

<thead>

The thead element indicates which table rows belong to the table header.

<tr>

The <tr> tag is used for each table row.

<th>

The <th> tag is used for a table heading cell.

<tfoot>

The thead element indicates which table rows belong to the table footer. For example, the footer can include a total of the numerical values in a column or some other column summary for non-numerical columns.

<tbody>

The thead element indicates which table rows belong to the table body.

<td>

The <td> tag is used for a table detail cell.

back to top