Guide to HTML, CSS, and JavaScript (University at Buffalo Version)

Chapter 4: Creating a Table Web Page

HTML tables are a great way to display data in a columnar format. You create a table using the <table></table>, <thead></thead>, <tbody></tbody>, <tr></tr>, <th></th>, and <td></td> tags. The <table></table> tags advise the web browser that a table structure is to be rendered. For each row in the table you use a set of <tr></tr> tags. For the first row you use the <th></th> tags for each set of column headings in your table. For the other rows you use the <td></td> tags for each column. Each set of either <th></th> or <td></td> tags create a *cell* for the data in that table row. You can also use the <thead></thead> and <tbody></tbody> tags to define the table heading and the table body sections.

The <table> ... </table> Tags

The <table> tag is used to tell the browser to begin rendering a data table. The </table> tag tells the browser where the data table ends.

The <thead> ... </thead> Tags

The <thead> tag is used to tell the browser to begin the heading area of the data table. The </thead> tag tells the browser where the table heading area ends.

The <tbody> ... </tbody> Tags

The <tbody> tag is used to tell the browser to begin body area of the data table. The </tbody> tag tells the browser where the body area of the data table ends.

The <tr> ... </tr> Tags

The <tr> tag is used to tell the browser to begin rendering a row in the data table. The </tr> tag tells the browser where the table row ends.

The <caption> ... </caption> Tags

The <caption> tag is used to tell the browser to display a caption for a data table. The </caption> tag tells the browser where caption ends.

The <th> ... </th> Tags

The <th> tag is used to inside the <thead> ... </thead> tags tell the browser to begin rendering the heqding information for a column in the data table. The </th> tag tells the browser where the column heading information ends.

The <td> ... </td> Tags

The <td> tag is used to inside the <tbody> ... </tbody> tags tell the browser to begin rendering the data in a column in each row of the data table. The </td> tag tells the browser where the column data ends.

The <colspan> Attribute

The <colspan> attribute is used to inside any <td> ... </td> or <th> ... </th> tags to tell the browser to render that column as more than one column.

The <rowspan> Attribute

The <rowspan> attribute is used to inside any <tr> ... </tr> tags to tell the browser to render that row over more than one row.

Code for a Table

A simple table (with some inline CSS styles) could be defined with this HTML code:

<table>  
      <thead>  
        <tr style="background-color: pink; color: white;">  
          <th>Column 1 Heading</th>  
          <th>Column 2 Heading</th>  
          <th>Column 3 Heading</th>  
        </tr>  
      </thead>  
      <tbody>  
        <tr style="background-color: white; color: black;">  
          <td>Row 1 Column 1 Data</td>  
          <td>Row 1 Column 2 Data</td>  
          <td>Row 1 Column 3 Data</td>  
        </tr>  
        <tr style="background-color: light-grey; color: black;">  
          <td>Row 2 Column 1 Data</td>  
          <td>Row 2 Column 2 Data</td>  
          <td>Row 2 Column 3 Data</td>  
        </tr>  
      </tbody>  
    </table>

The HTML code above would advise the browser to render a table similar to this: