XHTML Tables

Tables: Allow us to display information on the page in a uniform fashion. Work well for organizing groups of words, images, and links. Are not to be used for layout of an entire web page, only some data within the page.

Tables Row

Tables Column

Tables 3 Rows 2 Columns

Adding a Table: <table width="200"> </table> The value of the width attribute determines how wide the table will be in pixels. A percentage of the screen can be specified instead, but the resulting table would then look different to different viewers, depending on how wide their screens are.

Specifying the Border: <table width="200" border="1"> </table> The value of the border attribute determines how thick the lines around the table cells will be, as measured in pixels. If this attribute is not specified, no lines will show in the table.

Adding Rows: <table width="200" border="1"> <tr> </tr> </table> The <tr> tag adds a table row. If nothing more is defined inside the <tr> tags, the row will take up the entire column.

Setting Cells and Columns: <table width="200" border="1"> <tr> <td> </td> </tr> </table> The <td> ("table data") tag identifies an individual cell of a table. The available space will be evenly divided between the number of cells specified. In this example, we have created two columns in the first row.

Completing the Table: <table width="200" border="1"> <tr> <td> </td> </tr> </table> Here we have specified the cells for the second and third row. We now have a uniform table consisting of two columns and three rows.

Adding Text to the Table: <table width="200" border="1"> <tr> <td>State </td> <td>Capital </td> </tr> <td>Arizona </td> <td>Phoenix </td> <td>Georgia </td> <td>Atlanta </td> </table> State Capital Arizona Phoenix Georgia Atlanta

Adding Table Headers: State Capital Arizona Phoenix Georgia Atlanta <table width="200" border="1"> <tr> <th>State </th> <th>Capital </th> </tr> <td>Arizona </td> <td>Phoenix </td> <td>Georgia </td> <td>Atlanta </td> </table> State Capital Arizona Phoenix Georgia Atlanta By using <th> ("table header") tags in the first row instead of <td>, you are defining these cells as special headings in the table. The web browser will then know to treat them differently.

Table Syntax: State Capital Arizona Phoenix Georgia Atlanta <table width="200" border="1"> <tr> <th>State </th> <th>Capital </th> </tr> <td>Arizona </td> <td>Phoenix </td> <td>Georgia </td> <td>Atlanta </td> </table> State Capital Arizona Phoenix Georgia Atlanta Make sure there is a closing tag for each opening tag and be careful to nest the elements properly.