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:

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

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:

A <body> tag that uses an appropriate style value to change the background color of the web page.
Appropriate <table>, <thead>, <tbody>, <tr>, <th>, and <td> tags to create a table that has:
Three (3) columns (Font Faces, Font Sizes, Colors)
Five (5) rows (different font faces, font sizes, and color codes in their appropriate face, size, and color).
Use the <th> tag to create the headings for each column with background-color style value to change the color of the heading cells and the font-family and color style values to change the color of the font in the cell headings row
Use the CSS background-color style value on the table tag to change the color of the background of your table to a different color than the background of your web page
Appropriate CSS styles values that change the font, font size, and font color in each table cell

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!

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

Chapter 4: Creating a Table Web Page

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

Code for a Table

Task - Create a Table Web Page

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