Guide to HTML, CSS and JavsScript (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 b rowser to begin rendering a data table. The </table> tag tells the browser where the data table ends.

Code for a Table

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

        <tr style="background-color: pink; color: white;">  
          <th>Column 1 Heading</th>  
          <th>Column 2 Heading</th>  
          <th>Column 3 Heading</th>  
        <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 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>  
Figure 4-1: HTML <table> Tags

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

Column 1 Heading Column 2 Heading Column 3 Heading
Row 1 Column 1 Data Row 1 Column 2 Data Row 1 Column 3 Data
Row 2 Column 1 Data Row 2 Column 2 Data Row 2 Column 3 Data

Figure 4-2: An HTML Table

Task - Create a Table Web Page

For this task you will login to your web server account and create new web page, for example: *table.html*. Your new web page should utilize the following HTML tags and include the following:

This web page should also have a link back to your Home Page task web page.

You should then add an <a> (anchor) tag to your Home Page web page that opens your table web page.

Let's Get Started with a Table Page!
Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Copyright © 2016-2020 Jim Gerland