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.

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

    <table>
      <thead>
        <tr style="background-color: #F00; color: #000;">
          <th>Column 1 Heading</th>
          <th>Column 2 Heading</th>
          <th>Column 3 Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr style="background-color: #FFF; color: #000;">
          <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: #DDD; color: #000;">
          <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:

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.

Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Copyright © 2017 Jim Gerland