Beginning HTML5 and CSS3 For Dummies
Book image
Explore Book Buy On Amazon

The primary markup container for tables in HTML is the table element. That is, you use the opening

tag to denote the start of a table, and you add the closing
tag to end it.

Also, the basic building blocks for table data in HTML are the table row () and table data () elements, when a table consists of as many rows as there are elements (plus any header or footer rows) and as many columns as the maximum number of 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 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 element must follow immediately after the opening

    tag.

  • Zero or one column group (

  • ) 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 ) 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 (

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

  • Zero or one table footer (

  • ) to provide information for the bottom of a table. Browsers can use , , and 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):

    , and .

    However, it would appear before

    and elements. In this special case, cannot also appear at the end of the table. Not allowed!

  • If there is no

  • 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 () element defines rows for the data that the table actually presents. Inside each table row are as many table data (
    element, if one is present, and before any of the following table elements.

  • Zero or one table heading (

  • ,
    ) 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>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Basic Table Markup Structure and Sequence</title>
      </head>
      <body>
        <table border="1">
          <caption>Table 6-1: HTML Markup Structure and Sequence</caption>
          <thead><tr><th>Element</th><th>Description</th></tr></thead>
          <!-- 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    →
          <tbody>
             <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>
           </tbody>
           <tfoot><tr><td>Element</td><td>Description</td></tr></tfoot>
        </table>
      </body>
    </html>

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

    image0.jpg

About This Article

This article is from the book:

About the book authors:

Ed Tittel is a 30-year veteran of the technology industry with more than 140 computing books to his credit, including the bestselling HTML For Dummies.

Chris Minnick runs Minnick Web Services. He teaches, speaks, and consults on web-related topics and has contributed to numerous books, including WebKit For Dummies.

This article can be found in the category: