Web Design - Web Authoring / Intermediate HTML: Tables and Templates
Sections:  Introduction  |  Section 1  |  Section 2  |  Section 3
Section Three:  Part A  |  Part B  |  Part C  |  Part D  |  Part E  |  Part F

Tables

You have likely seen information displayed in a table; with the table having a a certain number of rows and a certain number of columns. For instance, the table below has 4 rows and 3 columns. In HTML, each "box" in a table is called a cell, so there are 12 cells to this table. One cell contains "Name," another contains "Height," another contains 125 lbs., etc.

sample table

HTML Tags Used to Create Tables

There are 4 pairs of HTML tags involved in making the table listed above. They are:
  • <table></table> This tag pair tells your browser that a table should be displayed.
  • <tr></tr> This tag pair creates a table row.
  • <th></th> This tag pair creates a header data cell within a row. The text listed in a <th> data cell is bold and automatically centered-aligned.
  • <td></td> This tag pair creates a non-header data cell in a row. The text listed in a <td> data cell is of normal weight (not bold) and left-aligned.

Not so bad right? So, if you were to use words to explain the instructions for creating the table example above the instructions would tell the web browser: "Display a table. Include a row with three header data cells. Next include a row with three non-header data cells. Include an additional row with three non-header data cells. Lastly, add one last row with three non-header data cells."

Understanding the Structure of an HTML Table

To better understand the tags presented, lets look closely at our previous table example.

table

To create the table it is important to understand the table's structure and understand how to translate that structure into the HTML tags presented. Review the image below (an enlarged version of the table above) and note the parts of the table listed.

links

Stop and think icon. Stop and Think

Use the colored borders as your guide to answer the following questions:

  • How many tables are shown?
  • How many rows are shown?
  • How many header data cells are shown?
  • How many non-header data cells are shown?

As you may have noticed there is one table listed. Within the table there are four rows. In the top row there are three header data cells. The bottom three rows each have three non-header data cells. Take a moment to consider the nested nature of the table.

Next Next

© 2008 KCDL. All rights reserved.