Tt
Click this widget to change the font size.
CC
Click this widget to change contrast.

Home Page 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Links | Search | Bio |

Guide to HTML, CSS, and JavaScript (Buffalo State College 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.

  1. Open Gimp
  2. Open your image: File -> Open
  3. From the Filters item in the top editor bar choose: Web -> Image Map...
  4. In the new window on the left side navigation choose the rectangle Tool
  5. Draw a rectangle around the area you want to be a hotspot
  6. 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
  7. In the ALT Text input field, enter a short description of that link for screen readers
  8. Click OK
  9. Continue creating hotspots for the rest of your image
  10. Then choose File -> Save
  11. Enter the name of the .map file
  12. Click Save
  13. 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:

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!