Tables

Objectives

In this module you will learn to display your data in tables. Tables allow you to organize your page in rows and columns instead of just paragraphs. This will give you more layout options for lists of information, hyperlinks, and images. You will learn to create simple text tables with borders, headers and backgrounds. We will also take a look at how text tables are used throughout the Web.

Tables

Tables are comprised of a series of columns and rows. Where a column and row intersect is called a cell. Here is a good example of a table.

Tables are created using three simple tags: <table>, <tr>, and <td>. The <table> element begins the code needed to create a table. It defines the rest of the elements as table elements. The <tr> element starts a table row and the <td> element holds the contents of each cell. For example, in the table above we would have a <table> to start the table, a <tr> to start the first row, and a <td>This</td> to create that first cell. You may also use the table heading element <th> in place of the <td> tag to center and bold the text in that cell.

The following code is an example of a simple text table.

<table>
<tr>
<td>First Cell</td>
<td>Second Cell</td>
</tr>
<tr>
<td>Third Cell</td>
<td>Fourth Cell</td>
</tr>
</table>

Put into your html code it would create a table on your page that would look like this:

Formatting

You can add a caption to your table using the <caption> tag. This can be placed by using the align atribute set with the value of either top or bottom. For example, <caption align="bottom">Four Cells</caption> would place the words Four Cells at the bottom of our table.

There are a few attributes that you can place in the <table> tag to change the appearance of our table. You can set a border by using border="size". The size is set in pixels by the number value you specify. Change the background color of your table by using bgcolor="color". Set the width of the table by using width="##" set either in the percentage of the page or in pixels. Align the table on the page by using the align attribute. For example, <table align="right">.

Using these attributes will change the look of the sample table above.

<table border="3" bgcolor="ffffff" width="50%" align="center">
<caption align="bottom"> Four Cells</caption>
<tr>
<td>First Cell</td>
<td>Second Cell</td>
</tr>
<tr>
<td>Third Cell</td>
<td>Fourth Cell</td>
</tr>
</table>

The result is the table below.

These same attributes can be used in the table row and table data elements to change the look of a whole row or each cell. For example, <td bgcolor="gray">.

Other attributes for the <table> element include cellspacing and cellpadding. Cellspacing increases the space between cells in your table, while cellpadding increases the space between the cell border and your text. Here are examples of each of these.

Cellspacing <table cellspacing="15">

Cellpadding <table cellpadding="15">

Many of the web pages that you view everyday are done in tables. The directories at Yahoo! and Snap are hyperlinks put into table format. Pages at CNN and MSN are tables containing both text and images. Visit these sites and then view their page source to see the table code.

In the next module you will create more advanced tables using hyperlinking and images.