How to Create Tables in HTML5

The primary markup container for tables in HTML is the table element. That is, you use the opening <table> tag to denote the start of a table, and you add the closing </table> tag to end it.

Also, the basic building blocks for table data in HTML are the table row (<tr>) and table data (<td>) elements, when a table consists of as many rows as there are <tr> elements (plus any header or footer rows) and as many columns as the maximum number of <td> elements in any given table row.

Between these opening and closing tags, you can find the following elements in this very interesting and prescribed (in other words, mandatory) order:

  • Zero or one <caption> elements to define a caption for a table (if there’s one such element, or no caption for the table if it is absent). If it is used, a <caption> element must follow immediately after the opening <table> tag.

  • Zero or one column group (<colgroup>) elements to define column groupings for the table (if there’s one such element, or no column groupings if the element is absent). It must appear after any <caption> element, if one is present, and before any of the following table elements.

  • Zero or one table heading (<thead>) elements to define the heading section for a table (if there’s one such element, or no table heading section if the element is absent). Often, a first table heading row spans the entire width of the table to identify the whole thing, and the first heading row is followed by a second row of individual headings for each column in the table.

  • Zero or more table body (<tbody>) elements to identify actual content for the table. A table may have multiple <tbody> elements, so it’s unusual in HTML in that a table can have only one head but multiple bodies!

  • Zero or one table footer (<tfoot>) to provide information for the bottom of a table. Browsers can use <thead>, <tbody>, and <tfoot> to decide what to scroll (the table body, usually) and what to leave always present on the screen.

    The table footer is a special case when it comes to where in the sequence of table markup it can appear. It can always appear last in the sequence (as it does in this list), but it can also appear right after any of these elements that are present (in this order): <caption>, <colgroup>, and <thead>.

    However, it would appear before <tbody> and <tr> elements. In this special case, <tfoot> cannot also appear at the end of the table. Not allowed!

  • If there is no <tbody> element present (which would ordinarily define the table body in a table with a defined table header and possibly also a footer section), the table row (<tr>) element defines rows for the data that the table actually presents. Inside each table row are as many table data (<td>) elements as there are cells in that row.

Because HTML table syntax and markup order can be tricky and complicated, it’s even more worthwhile than usual to run all of your table markup through the W3C Markup Validation Service to make sure it’s correct.

The structure of an HTML table is easier to understand if we represent it by using basic container markup only, with some hopefully illuminating comments, like so:

<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>Basic Table Markup Structure and Sequence</title>
    <table border="1">
      <caption>Table 6-1: HTML Markup Structure and Sequence</caption>
      <!-- inside all table containers, you still use table rows →
      <!-- this includes thead, tbody, and tfoot as shown here   →
      <!-- Use th for bold headings in both header and footer    →
         <tr><td>table</td><td>overall table container</td></tr>
         <tr><td>caption</td><td>table caption text</td></tr>
         <tr><td>tbody</td><td>table body container</td></tr>
         <tr><td>tfoot</td><td>table footer container</td></tr>

The figure shows how a browser displays this table. (The border="1" entry was added to the table element to draw an outline around the edge of each table cell, which makes the table stand out a little better.)

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus

Inside Sweepstakes

Win $500. Easy.