We will start discussing the <table>
element by talking about its original use - to display tabular data.
While there are times you will want to use tables to assist you in
laying out a page, stylesheets are the forward-looking approach.
Consider the following table:
| From | To | One Way | Round Trip |
|---|---|---|---|
| San José | Las Vegas | $29.00 | $50.00 |
| San Francisco | Chicago | $150.00 | $275.00 |
| Los Angeles | Seoul | $750.00 | $1500.00 |
| Chicago | Amsterdam | $450.00 | $850.00 |
The words Travel Specials are the table’s caption. The table itself has five rows, and each row has four cells. The first row of the table consists of header cells, which are automatically bold and centered. The rest of the rows consist of data cells, which are plain text, left-justified.
In terms of HTML, the table begins as shown below. The
border="1" shows the borders between the cells. If you
leave this off, you will not see the lines. Whenever you first start a table, turn the borders
on. This will help you see exactly where everything is laid out.
In the event that your table looks better without borders, you can
always set border="0" when you finish the table. The
ending </table> tag is required. If
you leave it off, earlier versions of Netscape will not show your
table at all.
<table border="1"> <caption>Travel Specials</caption> <!-- table contents go here --> </table>
The contents of a row are enclosed in <tr>
tags. Header cells are marked with <th>, and
data cells with <td>. Although the ending tags for
all of these three are technically optional, we will require them in
this course. Here is the HTML for the first three rows of the table.
Notice that we are using indenting to keep the table readable. Proper
use of whitespace and indenting is useful for a small table like this
one; it is vital for any complex table.
<table border="1"> <caption>Travel Specials</caption> <tr> <th>From</th> <th>To</th> <th>One Way</th> <th>Round Trip</th> </tr> <tr> <td>San José</td> <td>Las Vegas</td> <td>$29.00</td> <td>$50.00</td> </tr> <tr> <td>San Francisco</td> <td>Chicago</td> <td>$150.00</td> <td>$275.00</td> </tr> <!-- etc. --> </table>
There’s nothing mysterious about tables at this point. Everyone sees quite clearly how they are constructed. The trick to making tables more flexible is in the attributes.
Notice that the table above takes up exactly as much room as is
needed to show the data; no more, no less. Sometimes you will want
the table to be wider. You can set the width attribute
on the table to either:
<table border="1" width="600">, the
table will always be 600 pixels wide, no matter how wide the
browser window is.<table border="1" width="90%">, the
table will be 90% the width of the browser window.Try both of these and see what they do. Resize the browser window; see what happens as you reduce the window width. My personal preference is to use percentages. I have seen too many websites that presumed that everyone has a 1024 x 768 monitor, so they set their table width to 1000, which means I have to scroll horizontally on my 800 x 600 monitor in order to see their content. Don’t do this to your readers.
You may set the widths of individual cells within a row, again either in terms of pixels or in terms of percentages. You need to set the widths on only one row, usually the first row. Try pixel widths first.
<table border="1" width="600"> <tr> <th width="200">From</th> <th width="200">To</th> <th width="100">One Way</th> <th width="100">Round Trip</th> </tr>
Now try percentages and see how it works. Again, make sure you resize the window to see what effect it has.
<table border="1" width="90%"> <tr> <th width="35%">From</th> <th width="35%">To</th> <th width="15%">One Way</th> <th width="15%">Round Trip</th> </tr>
It is possible to set your table width to a fixed number of pixels and use percentages for the cells within each row. While it is also possible to mix percentage and pixel widths for cells, it’s unusual to see it in practice. If your percentages add up to a value that is not 100%, the browser will scale them proportionately. Don’t count on that behavior, do the math first.
To align the table with respect to the browser window,
set the align attribute to one of the values
left, right, or center.
Try it and find out..
To align the contents of a cell, add the appropriate
align attribute to the cell. To align the contents
of the cells of an entire row, add the appropriate align
attribute to the opening <tr> tag. See if
you can figure out what the following changes will do the table,
then try it.
<table border="1" width="90%"> <tr> <th width="35%">From</th> <th width="35%">To</th> <th width="15%">One Way</th> <th width="15%">Round Trip</th> </tr> <tr align="center"> <td>San José</td> <td>Las Vegas</td> <td align="right">$29.00</td> <td align="right">$50.00</td> </tr> <tr align="center"> <td>San Francisco</td> <td>Chicago</td> <td align="right">$150.00</td> <td align="right">$275.00</td> </tr> <!-- etc. --> </table>
If two cells in the same row have content of a different height, the vertical alignment is centered. For example, let’s change the San Francisco to Chicago row to indicate that it goes into Midway airport rather than O’Hare (please try it).
<tr align="center"> <td>San Francisco</td> <td>Chicago <br /> (Midway)</td> <td align="right">$150.00</td> <td align="right">$275.00</td> </tr>
Most of the time, this is exactly what you want. Sometimes you
will want the content aligned at the top of the cells (we’ll see this in
a later set of notes), and occasionally at the bottom of the cell.
To do this, you set the valign attribute to
top or bottom. The default value middle. Try this change,and see the effect on the
row.
<tr align="center" > <td valign="top">San Francisco</td> <td>Chicago <br /> (Midway)</td> <td align="right" valign="bottom">$150.00</td> <td align="right" valign="middle">$275.00</td> </tr>
By the way: this is the first time we’ve seen a table cell with other HTML elements inside it rather than just plain text. It turns out that you can have almost anything inside a cell. You can put paragraphs, images, links, and, as we will see in future notes, even other tables into a table cell.
It is possible to set the bgcolor attribute for
the entire table, a whole row, or a single cell, by applying the
attribute at the desired level. The following changes will
set the entire table to a light aqua background, except for the
San José to Las Vegas row, which will have a
bisque background color, except for the one-way fare cell in
that row, which will
be a bright yellow.
<table border="1" bgcolor="#ccffff"> <tr> <th width="35%">From</th> <th width="35%">To</th> <th width="15%">One Way</th> <th width="15%">Round Trip</th> </tr> <tr align="center" bgcolor="#ffcc99"> <td>San José</td> <td>Las Vegas</td> <td align="right" bgcolor="yellow">$29.00</td> <td align="right">$50.00</td> </tr> <tr align="center"> <td>San Francisco</td> <td>Chicago<br />(Midway)</td> <td align="right">$150.00</td> <td align="right">$275.00</td> </tr>
You may also set a background image on a cell, row, or entire table. Try this. Here are links to the light blue image, the W3C logo image, and the arrow image so that you may copy them to an appropriate directory. Change the pathname to match the directory where you place your images.
<table border="1" background="images/lblue.jpg"> <!-- first two rows remain the same --> <tr background="images/w3c_home.gif"> <td>San Francisco</td> <td background="screenshots/right.gif">Chicago<br />(Midway)</td> <td>$150.00</td> <td>$275.00</td> </tr> <!-- etc. --> </table>
You will notice that the cells are right next to one another, and
text comes right up to the cell borders. You may change these by
setting the cellspacing and cellpadding
attributes on the opening <table> tag. The
cellspacing attribute says how much space you want between
the borders; the cellpadding attribute says how much space
you want separating the cell borders and the text contained in the
cell. Try this: Get rid of the
bgcolor or background on the table (it looks
better with a white background.) Now set cellspacing="15"
in the table, and see the result. Then change it to read
cellpadding="15". We’re using large numbers to
dramatically show the difference between the two attributes. Of
course, you may use both spacing and padding to
achieve the visual effects that you desire.
| From | To | Discount Fares | |
|---|---|---|---|
| One Way | Round Trip | ||
| San José | Las Vegas | $29.00 | $50.00 |
| San Francisco | Chicago | $150.00 | $275.00 |
| Los Angeles | Seoul | $750.00 | $1500.00 |
| Chicago | Amsterdam | $450.00 | $850.00 |
We are going to show you a method that makes table layouts like this easy to construct. This method was in the older editions of an HTML book by Elizabeth Castro. I have no idea why it was taken out.
Draw a sketch of what the table should look like on a piece of paper. (See illustration) You do not pay for connect time to paper and pencil! You don’t have to fill in every detail; an outline showing the borders is sufficient.
Everywhere you see a line in the table, extend it all the way to the edges of the table. (See illustration) It helps to use a different color pen to do this.
As you can see in the illustration, this table actually has
six rows of four cells each. The header cells
From and To happen to be spread
across two rows, and the header Discount Fares spans
two columns. You will thus use the rowspan and
colspan attributes in the appropriate cells.
Now begin entering the table. Draw an arrow next to the row you’re working on. As you finish each cell, cross it off entirely (See illustration).
<table border="1"> <tr> <th rowspan="2">From</th>
Continue entering cells; when you hit the end of a row, put a bar at the end of the row to indicate that it is finished. Move your arrow down to the next line. (See illustration).
<table border="1"> <tr> <th rowspan="2">From</th> <th rowspan="2">To</th> <th colspan="2">Discount Fares</th> </tr>
This is where the crossing-off starts to make sense. Notice that the first cell that we need to handle in the second row is the One Way cell. (See illustration)
<table border="1"> <tr> <th rowspan="2">From</th> <th rowspan="2">To</th> <th colspan="2">Discount Fares</th> </tr> <tr> <th>One Way</th>
And then, finish the row. Once you go to the third row, you can see that the red and black lines are all on top of each other; there are no more row or column spans, so you can just transcribe the remainder of the table as before. (See illustration)
<table border="1"> <tr> <th rowspan="2">From</th> <th rowspan="2">To</th> <th colspan="2">Discount Fares</th> </tr> <tr> <th>One Way</th> <th>Round Trip</th> </tr>
You may be thinking, “Well, who needs to go to all that work? I could have laid out this table by eye, no problem.” The nice part of this method is that it works no matter how complicated your table is. Consider the following table. I wouldn’t even try to figure this one out by eye; with the method described above, it took me all of two minutes to draw and two minutes to type, and it worked the first time.