| An HTML table is yet another way to present information in the browser.
As you can guess it is good for displaying tabular data like spreadsheets and calendars.
But what you may not know is that HTML tables are most commonly used to position
information near precisely where you want it. Without tables, this is not possible
in HTML. (Note that it is possible with DHTML and CSS). To prove this point, try
creating the following affect using what you've learned so far.
| left |
middle |
right |
| Note that these elements maintain their position even if you resize the
browser window |
As you can see, the browser ignores whitespace in your
html (for the most part) so you can't do it by using spaces and even if you could
(and you can with the html special character
for spaces), it would not be precise, especially when
the window is resized. So, let's see how to create it using tables.
An html table always starts with the <TABLE> tag.
There are many attributes to this tag, some of which we'll get to later. The
table ends with the </TABLE> tag. In between is where we specify the rows and columns.
Each row is started with the <TR> tag. Then each cell within that row is specified
with <TD>cell data</TD> and the row is ended with </TR>. Following is the
layout...
<table>
<tr><td>row1 col1</td><td>row1 col2</td></tr>
<tr><td>row2 col1</td><td>row2 col2</td></tr>
</table> which yields this 2 row, 2 column (or 4 cell) table...
| row1 col1 | row1 col2 |
| row2 col1 | row2 col2 |
This will make more sense as I take you through the
example. To get the most out of this, create a new html file and type
the table tags as I create them, into the body section.
Begin by forming the table structure <table>
<tr>
<td>left</td>
<td>middle</td>
<td>right</td>
</tr>
<tr>
<td>
</td>
</tr>
</table> Leave the second row empty for now.
The table should look like this...
Don't worry if
there is no border on your table. Some browsers default to no
table border.
Now let's use the attributes of these tags to position our content. Add the following
to your table. Note that I'm using boldface text to specify updates.
<table width="100%">
<tr>
<td align="left">left</td>
<td align="center">middle</td>
<td align="right">right</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
Let's look at these attributes. With the WIDTH attribute
you tell the browser how wide you want your table to be regardless of what's
in it. Without it, the table is only as wide as the widest row without exceeding
the screen width. WIDTH can either be a number (which defaults
to length in pixels) or a percentage. The difference is, a number specifies a fixed
width, whereas a percentage specifies a width that is a percentage of it's container's
width. In our case, the container for the table is the document body, which
is the entire browser display area. So, if you resize the browser window, the
table resizes itself to maintain it's width percentage. WIDTH may also be
used on a table row and cell.
The ALIGN attribute specifies the horizontal alignment, in our
case within the table cell, but it can be specified for
almost any element. This works because the table is forced to be the
width of the screen. Since we only have 3 columns, each cell takes up a third of
the table width. If we tried to use ALIGN in the table cells without WIDTH (either
on the table or the cells) it would appear to have no affect.
Now let's add the second line of text to the table. I'm just
showing the changes to the second row of the table...
<tr>
<td colspan="3">Note that these elements maintain their
position even if you resize the browser window
</td>
</tr>
| left |
middle |
right |
| Note that these elements maintain their
position even if you resize the browser window
|
The thing to notice here is the COLSPAN attribute.
This specifies width of the cell by number of columns. The best way to understand
that is to see it. Here's what it would look like if we didn't include colspan.
| left |
middle |
right |
| Note that these elements maintain their
position even if you resize the browser window
|
Notice how the text is only in the first
column, and remember that the column width defaults to it's widest value so
now the first row is misaligned. We need COLSPAN to stretch the
first column of only the second row, to 3 column lengths.
There is a similar ROWSPAN attribute that specifies the
height of a table cell by number of rows. Both attributes may only be used
on table cells (<TD> tags).
Now let's get rid of that border (if you have one). Only the
changes to the <TABLE> tag are given...
<table width="100%" border="0">
| left |
middle |
right |
| Note that these elements maintain their
position even if you resize the browser window
|
The BORDER attribute specifies the type of border surrounding
the table and cells. It's value is a positive integer, with 0 meaning no border.
The tip of the day is, if you're having trouble figuring out why your content
is not displayed quite right within tables, use borders to help you. You can always
remove it when you're ready.
I'll leave the text formatting in our example as an exercise
for you. There are other attributes to the table tag that I have not
mentioned such as "cellspacing=x" and "cellpadding=x". Cellspacing
specifies the number of pixels between the cells. Cellpadding specfies the
number of pixels between each cell border and it's contents
Note that text is not the only thing that may be placed in
a table cell, just about anything can. That includes anchor tags, images, and
even another table. Nested tables are often used to create more complex presentations.
Consider the following...
Table of contents |
| Chapter I | 1 |
| Chapter II | 20 |
| Chapter III | 29 |
|
A book about nothing
By No one |
Notice that the table of contents is an html table
inside of the first cell of the outer table. I'm also using the BGCOLOR and
BACKGROUND attributes of the cells of the outer table to produce the colored
background and image background.
As an exercise, try reproducing the above affect.
Next >> | 