IST129: Chapter 11 - Tables
Tables allow you to segregate content into
rows and columns for better readability. The intersection
of a row and column is called a cell (like
a spreadsheet).
In the next chapter, we will extend the concept
of tables into separately scrollable windows
called frames.
<TABLE>...</TABLE>
The TABLE tag defines the beginning and end of a table
definition within your HTML. All of the following tags
will be used within the TABLE tag:
- <tr> - Table Row tag
- <th> - Table Header tag
- <td> - Table Data tag
- <caption> - Caption tag to define a title for the table
The following attributes are useful for the TABLE tag:
- align = left | right | center
to allow text to flow around the table
- border = n to tell the browser
that you want a box of a certain pixel width around the table
- cellspacing = n to set the
amount of white space (in pixels) between cells
- cellpadding = n to set the
amount of white space (in pixels) between the cell contents
and the sides of the cell
- width = n | "50%" to set the
width of the table in pixels or percentage of the screen to override
default action of the browser
and the sides of the cell
<TR>...</TR>
The table row tag creates a new row in the table. The <TH> and
<TD> tags go within the TR tags.
<TH>...</TH>
The TH tag contains the header; that is, the title of the column.
Text within a TH tag is normally bolded and centered within a cell.
<TD>...</TD>
The TD tags contian the data for a cell.
Sample Table
Student Grades
| Student-ID |
Class-ID |
Grade |
| 1 |
IST456 |
A |
| 2 |
IST456 |
B |
| 3 |
IST456 |
C |
Same table, no borders:
Student Grades
| Student-ID |
Class-ID |
Grade |
| 1 |
IST456 |
A |
| 2 |
IST456 |
B |
| 3 |
IST456 |
C |
Examples:
One field taking up 2 columns:
| Header One |
Header Two---o |
header three |
| Detail one |
Detail two---o |
Detail three |
Detail four |
One Field taking up 2 rows:
| Header One |
Header Two---o |
header three |
| Detail one |
Detail two---o |
Detail three |
Detail four |
| Detail one |
Detail two---o |
Detail three |
Detail four |
One Field taking up 2 columns and 2 rows:
| Header One |
Header Two---o |
header three |
| Detail one |
Detail two---o |
Detail three |
Detail four |
| Detail one |
Detail two---o |
Detail three |
Detail four |
There are several more examples in the
book starting on page 395.
Your task...
Create a table that looks like the following:
Comic Book Values
| Publisher |
Title |
Value |
|
|
Issue #1 |
Issue #2 |
Issue #3 |
| DC |
Superman, Man of Steel |
$50,000 |
$10,000 |
$ 2,500 |
| DC |
Batman |
$12,000 |
$ 3,000 |
$ 1,000 |
| Marvel |
X-Men |
$16,000 |
$ 3,000 |
$ 1,000 |
New HTML4.0 Tags:
<THEAD>...</THEAD>
The THEAD tag contains a standard set of table column headers and
goes right after the beginning TABLE tag. Within the THEAD
tags, use the TR tags to create the text for the column headers.
| Header #1 |
Header #2 |
Header #3 |
| Detail #1 |
Detail #2 |
Detail #3 |
<TFOOT>...</TFOOT>
The TFOOT tag lets you create a footer for tables. Treat it like the
THEAD tag. FYI, TFOOT is not supported in Netscape as of V4.0x. MS-IE
V5.0 does support it.
| Header #1 |
Header #2 |
Header #3 |
| Footer #1 |
Footer #2 |
Footer #3 |
| Detail #1 |
Detail #2 |
Detail #3 |
The END of Chapter 11