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 `<tfoot> ... </tfoot>` Tags

The <tfoot> tag is used to tell the browser to begin the footer area of the data table. The </tfoot> tag tells the browser where the table footer area 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>

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

Creating an Image Map On Your Web Page

In the eary web design days (mid 1990's) we would use image maps as a form of navigation. Basically, we would use an image editor tool (Adobe Photoshop or Gimp) to create a navigation image. Then we would determine the pixel coordinates for the area (hotspot) we wanted to act as a link to some other web page. Then, using the <map> HTML tag we would define the areas and add the usemap="#mapId" element to our <img /> tag.

navbar image — Figure 4-3: A Sample Navigation Image

  <img src="images/navbar.png" alt=""
    style="border: 0; width: 938px; height: 87px;" usemap="#map" />

  <map name="map">
    <!-- #$-:Image map file created by GIMP Image Map plug-in -->
    <!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
    <!-- #$-:Please do not edit lines starting with "#$" -->
    <!-- #$VERSION:2.3 -->
    <!-- #$AUTHOR:jimgerland -->
    <area shape="rect" coords="1,4,241,78" href="./" />
    <area shape="rect" coords="248,4,448,78" href="avatar.html" />
    <area shape="rect" coords="452,6,664,72" href="table.html" />
    <area shape="rect" coords="670,4,923,79" href="form.html" />
  </map>

Figure 4-4: Sample <map> Code

Nowadays, we can use Gimp to identify the coordinates and create the necessary code.

Open Gimp
Open your image: File -> Open
From the Filters item in the top editor bar choose: Web -> Image Map...
In the new window on the left side navigation choose the rectangle Tool
Draw a rectangle around the area you want to be a hotspot
In the new dialogue window, in the URL to activate when this area is clicked input field, enter the name of the file (.html, .docx, .pdf, .xlsx, etc.) you want to open when that hotspot is clicked
In the ALT Text input field, enter a short description of that link for screen readers
Click OK
Continue creating hotspots for the rest of your image
Then choose File -> Save
Enter the name of the .map file
Click Save
Close Gimp

Now you can copy and paste that code into your HTML image map navigation web page.

Figure 4-5: Using Gimp to Create the Image Map Code

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 JavaScript (University at Buffalo Version)

Chapter 4: Creating a Table Web Page

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

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

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

The <tfoot> ... </tfoot> Tags

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

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

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

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

The <colspan> Attribute

The <rowspan> Attribute