TABLES


Tables are a very useful formatting method for Web pages. They can organize data in a very straightforward manner and are very flexible.


<table> </table>
These are the beginning tag and an ending tag which define a table. (Note that by default, a table does not have a visible border. I will explain how to add one below.)

<tr> </tr>
These tags indicate a table row. These tags must surround all data items which will be present in that row of data.

<th> </th>
These tags indicate a table heading. This tag creates text which is in boldfaced print. It is typically used for the text along the top row, the leftmost column, or both.

<td> </td>
These tags indicate a piece of table data. These tags must surround each piece of data that will be in the table.

There will be an example of this at the end of this section, it’s easier to wait until then to show you how this will look.



There are many different ways to change the look of your table. They are found both within the "table" tag and within the "td" tag. I will explain them now.


<table> attributes
There are many different attributes which can be specified table-wide.

<table border=X>
This specifies that the table should have a border around it. If X = 0, then no border will be displayed. Simply using the word "border" will act the same as "border=1". The larger the number, the thicker the border around the table.

<table cellspacing=X>
This specifies that there should be empty space left between individual cells of the table. "X" indicates the amount of space to be left between the cells.

<table cellpadding=X>
This specifies that there should be space around the text within the individual cells. This keeps it from getting too close to the sides of the cells. "X" indicates the amount of space which should surround the text.

<table width="X%">
This specifies how wide the table should be. It is similar to the width tag used with images. "X" is usually a percentage of the available screen width.

<table bgcolor="FFFFFF">
This sets a background color for the entire table. It is often useful for tables on pages with outrageous background images (makes it easier to read) or if you just want to spice up the table in some way. It uses the same color format as discussed in the section on Images and Colors.


<td> attributes
There are many different attributes which can be specified on a per-data-item basis.

<td colspan=X>
It is possible for a table cell to span more than one column’s width. This specifies how many columns the cell should span. "X" is the number of columns to span.

<td rowspan=X>
It is possible for a table cell to span more than one row’s width. This specifies how many rows the cell should span. "X" is the number of rows to span.

<td valign=X>
This specifies where the data should be situated within the cell. "X" can be one of these values:

top Aligns the text along the top of the cell. Text scrolls as necessary.
middle Aligns the text through the middle of the cell. Text scrolls as necessary.
bottom Aligns the text along the bottom of the cell. Text scrolls as necessary.

<td bgcolor="FFFFFF">
This sets a background color for the current data cell. It is useful for highlighting important data, for example. It uses the same color format as discussed in the section on Images and Colors.


Other attributes
<caption align=X> </align>
These tags indicate a caption to be displayed with the table. The text of the caption is placed between the caption tags. Note that all keystrokes you use between the tags will be used, so if you have hit "enter" and split the caption onto two lines within your HTML file, it will appear as two lines on the Web page. "X" indicates where the caption will be placed with respect to the table.

top This will center the caption above the table.
bottom This will center the caption below the table.

* Note that the caption tags must be put between the <table> and </table> tags.




Example


Here are some sample pages to demonstrate the discussed tags.

Sample 7: This page will have a simple table with a border, a caption, and colored cells.

<html>
<head>
<title>Sample Page #7</title>
<!-- This page created by Valerie Bradley 13 June 1997 -->
</head>

<body bgcolor="FFFFFF" text="000000">

<center>
<table border>
<caption align=top>
Figure 4.12.  Attendance at and
Ratings of the last two seminars.
</caption>
<tr>
   <th bgcolor="BBFFFF">City</th>
   <th bgcolor="BBFFFF">Attendance</th>
   <th bgcolor="BBFFFF">Rating</th>
</tr>
<tr>
   <td bgcolor="BBFFFF">Chicago</td>
   <td>75</td>
   <td>Excellent</td>
</tr>
<tr>
   <td bgcolor="BBFFFF">Indianapolis</td>
   <td>1254</td>
   <td>Good</td>
</tr>
</table>
</center>

</body>
</html>

This is how it would look on a browser.



Sample 8: This page will have a definition list and some nested lists.
<html>
<head>
<title>Sample Page #8</title>
<!-- This page created by Valerie Bradley 13 June 1997 -->
</head>

<body bgcolor="FFFFFF" text="000000">

<center>
This example uses COLSPAN.<p>

<table border=5>
<tr>
   <th>City</th>
   <th>Attendance</th>
   <th>Rating</th>
</tr>
<tr>
   <td>Chicago</td>
   <td align=right>75</td>
   <td align=center>Excellent</td>
</tr>
<tr>
   <td>Indianapolis</td>
   <td align=right>1254</td>
   <td align=center>Good</td>
</tr>
<tr>
   <td>Detroit</td>
   <td colspan=2>No Data Available</td>
</tr>
</table>

<hr><br>
This example uses ROWSPAN.<p>.

<table border=5>
<tr>
   <th>City</th>
   <th>Attendance</th>
   <th>Rating</th>
</tr>
<tr>
   <td rowspan=3>Chicago</td>
   <td align=right>75</td>
   <td align=center>Excellent</td>
</tr>
<tr>
   <td align=right>1254</td>
   <td align=center>Good</td>
</tr>
<tr>
   <td align=right>420</td>
   <td align=center>Excellent</td>
</tr>
</table>
</center>

</body>
</html>

This is how it would look on a browser.


Previous | Next


This page created by Valerie Bradley
Last updated: