Tables Tutorial
Let's begin with a
simple and common use for tables: an office phone list. Suppose we have four
people whose names we want on the list. The data could be arranged in a table
like this:
<TABLE>
<TR> <TD>Raha Mutisya</TD> <TD>1493</TD>
</TR>
<TR> <TD>Shalom Buraka</TD>
<TD>3829</TD> </TR>
<TR> <TD>Hallie Curry</TD> <TD>8372</TD>
</TR>
<TR> <TD>
</TABLE>
Which
gives us this table:
|
Raha Mutisya |
1493 |
|
Shalom Buraka |
3829 |
|
Hallie
Curry |
8372 |
|
|
4827 |
This table uses the
basic three tags all tables must have:
<TABLE ...>
<TABLE
...> creates the table. Most of the overall properties of the
table are defined here, such as if it has borders and what is the table's background color.
<TR ...>
<TR
...> (Table Row) defines each row of the table.
<TD ...>
<TD
...> (Table Data) defines each cell of the table.
The first modification
we'll make to this little table is to add borders. Borders will help us see how
the table is laid out. It's a good idea when designing a table to add borders
during the time you design the table, even if you remove them before making the
table public.
<TABLE BORDER=2>
<TR> <TD>Raha
Mutisya</TD> <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD>
<TD>3829</TD> </TR>
<TR> <TD>Hallie
Curry</TD>
<TD>8372</TD> </TR>
<TR> <TD>
</TABLE>
which gives us
|
Raha Mutisya |
1493 |
|
Shalom Buraka |
3829 |
|
Hallie
Curry |
8372 |
|
|
4827 |
Headers
In many table situations
you'll find that you want to give a column or row a "title". In our
table example, we might want to indicate that the columns are for names and
telephone extensions. To do this we'll add two more cells at the top of the
table using the <TH ...> (Table Header) tag:
<TABLE BORDER=2>
<TR> <TH>Name</TH> <TH>Extension</TH> </TR>
<TR> <TD>Raha
Mutisya</TD> <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD>
<TD>3829</TD> </TR>
<TR> <TD>Hallie
Curry</TD>
<TD>8372</TD> </TR>
<TR> <TD>
</TABLE>
which gives us
|
Name |
Extension |
|
Raha Mutisya |
1493 |
|
Shalom Buraka |
3829 |
|
Hallie
Curry |
8372 |
|
|
4827 |
<TH ...> can be used to create headers for either rows or columns,
or both.
<TABLE BORDER=2>
<TR> <TD> </TD>
<TH>10 am - noon</TH>
<TH>noon - 2 pm</TH>
<TH>2 pm - 4 pm</TH>
</TR>
<TR> <TH>Monday</TH>
<TD>Home Ec</TD>
<TD>Math</TD>
<TD>Geography</TD>
<TR> <TH>Wednesday</TH>
<TD>History</TD>
<TD>Social Studies</TD>
<TD>P.E.</TD>
<TR> <TH>Friday</TH>
<TD>Music</TD>
<TD>Peace Studies</TD>
<TD>Sleep</TD>
</TABLE>
creates this table which uses <TH ...> to head both rows and columns:
|
|
10 am - noon |
noon - 2 pm |
2 pm - 4 pm |
|
Monday |
Home Ec |
Math |
Geography |
|
Wednesday |
History |
Social Studies |
P.E. |
|
Friday |
Music |
Peace Studies |
Sleep |