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>

<tr>

</tr>

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

<td> </td>

</tr>

<tr>

</tr>

<tr>

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

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

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

<tr>

<td>Arizona </td>

<td>Phoenix </td>

</tr>

<tr>

<td>Georgia </td>

<td>Atlanta </td>

</tr>

</table>

State Capital

Arizona Phoenix

Georgia Atlanta

Adding Table Headers:<table width="200" border="1"> <tr>

<th>State </th>

<th>Capital </th>

</tr>

<tr>

<td>Arizona </td>

<td>Phoenix </td>

</tr>

<tr>

<td>Georgia </td>

<td>Atlanta </td>

</tr>

</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:<table width="200" border="1">

<tr>

<th>State </th>

<th>Capital </th>

</tr>

<tr>

<td>Arizona </td>

<td>Phoenix </td>

</tr>

<tr>

<td>Georgia </td>

<td>Atlanta </td>

</tr>

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