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>

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

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.

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

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