Tables in web pages are useful for organizing information in rows under column headings and for laying out text and graphics in balanced arrangements.

Tables use three basic tags:

1. the table tag: <table>
2. the table row tag: <tr>
3. the table data tag: <td>
   Note: The <th> tag is like a <td> tag, except that it automatically makes contained text centered and bold.

Each type of tag can take many attributes for borders, background colors, padding, spacing, font, etc.

Table Tags

The HTML for a simple table with two rows and two columns looks like:

<table border="1"> <tr> <td>row 1, column 1</td> <td>row 1, column 2</td> </tr> <tr> <td>row 2, column 1</td> <td>row 2, column 2</td> </tr> </table>

row 1, column 1 row 1, column 2 row 2, column 1 row 2, column 2

Example

• table attributes of border=1 width="75%" align="center"
• row 2 column 1 attribute of align="center" and bgcolor="#ffff66"
    <td align="center" bgcolor="#ffff66">row 2, column 1</td>
  
• row 3 column 1 attribute of colspan="2"

Hands On

1. Your name in the title.
2. A table that shows a good use of a table for displaying information with:
   • at least three columns and three rows
   • one of the rows span columns
   • at least one cell display in a different color

Hint: good uses of tables include things like price lists and personnel contact information.

Extra Fun: Put graphics in at least two different cells with descriptive text centered above or below the graphics in the same cells.