Table of Contents

A Simple Way to Create Web Pages

Working with Tables

Tables allow you to control the placement of text and images on your pages. Learning tables may seem difficult at first, but they are worth learning. They are the only way to align text and images vertically on a page.

Some Table Basics

A table is made up of columns and rows that together create cells. Rows go across, columns go down and data cells are the individual sections where columns and rows intersect. This table has four rows, three columns and twelve data cells.

Create a Simple Table

To create this table, type:

<table>
<tr>
    <td><center><b>Product Name</b></center></td>
    <td><center><b>Description</b></center></td>
    <td><center><b>Price</b></center></td>
</tr>

<tr>
    <td>Funky T-shirt</td>
    <td>Blue swirls on green</td>
    <td>$12.99</td>
</tr>

<tr>
    <td>Mini-skirt</td>
    <td>mid-thigh, dark blue</td>
    <td>$21.99</td>
</tr>

<tr>
    <td>Calf socks</td>
    <td>over the calf, light blue</td>
    <td>$5.99</td>
</tr>

</table>

You always type <table> before the text you want to appear in a table. Type </table> after the text you want to appear in the table. Type <tr> to start a row. Type </tr> to end a row. Type <td> to start a data cell and type </td> to end a data cell. You specify each table row and each row's table data one row at a time. Remember to add the </table> tag after you are finished with your table. Leaving off the </> (end) tags can wreak havoc with a table.

Modifying the Table Data

To add a border around your table and table data cell, type <table border="1">. You can specify any number up to 7. You can center a table by adding an align attribute: <table border="1" align="center">. To display a caption, type <caption> right below the <table> tag. Type your text and then type </caption>. You can align the data in a cell by adding the align attribute to the <td> tag. Type <td align="center"> (you can use left and right as well) to align horizontally or <td valign="top"> (you can use middle and bottom as well) to align vertically. You can specify font color and size in a table by using the font tags right before and immediately after the text you want formatted.

Creating Hyperlinks   Your First Site

Copyright 2000 by Computer Infotech^®

Updated December 2004