DHTML
Part 2 -
Let's Talk Tables
Now that we've gone over the basics, let's look at table tags
and frames. Tables provide a useful means of positioning,
organizing and displaying information. We will also be
nesting tables to give us greater display capabilities.
You will see the concept of nesting repeated over an over in
different languages taking on a myriad of forms. For
tables there are three basics:
<TABLE> = table
<TR> = row
<TD> = cell
Example 1:
<TABLE border="5" align="center">
<TR>
<TD>Inside the TD tags delineates a cell</TD>
</TR>
</TABLE>
Example 2:
<div align="center">
<center>
<table border="1" width="61%">
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
</table>
</center>
</div>
Would produce the table:
Example 3:
<div align="center">
<center>
<table border="1" width="80%">
<tr>
<td width="100%" valign="middle" align="center">Inside
First Table<br>
<div align="center">
<center>
<table border="1" width="80%">
<tr>
<td width="100%" valign="middle" align="center">Inside
Second Table (nested within the first).<br>
<br>
<div align="center">
<center>
<table border="1" width="80%">
<tr>
<td width="80%" align="center">Inside
Third Table (nested within the second)</td>
</tr>
</table>
</center>
</div>
<p><br>
</td>
</tr>
</table>
</center>
</div>
<p><br>
</td>
</tr>
</table>
</center>
</div>
Would produce the following nested table structure:
Inside
First Table
Inside
Second Table (nested within the first).
| Inside
Third Table (nested within the second) |
|
|
Example 4:
<div align="center">
<center>
<table border="1" width="60%">
<tr>
<td width="50%" valign="middle" align="center">Item 1</td>
<td width="50%" valign="middle" align="center">$5.00</td>
</tr>
<tr>
<td width="50%" valign="middle" align="center">Item 2</td>
<td width="50%" valign="middle" align="center">$10.00</td>
</tr>
<tr>
<td width="50%" valign="middle" align="center">Item 3</td>
<td width="50%" valign="middle" align="center">$20.00</td>
</tr>
</table>
</center>
</div>
Would produce the table:
| Item 1 |
$5.00 |
| Item 2 |
$10.00 |
| Item 3 |
$20.00 |
Example 4:
<table border = "1">
<caption> </caption>
<!-- <colgroup> and <col> tags are used to -->
<!-- format entire columns -->
<colgroup>
<!-- span attribute determines how many columns -->
<!-- the <col> tag affects -->
<col align = "right" span = "1" />
</colgroup>
<thead>
<!-- rowspans and colspans merge the specified -->
<!-- number of cells vertically or horizontally -->
<tr>
<!-- merge two rows -->
<th rowspan = "2">
Hi! I am in<br>
the top<br>
left corner.
</th>
<!-- merge four columns -->
<th colspan = "4" valign = "top">
<h1>Hi</h1><br />
<p>I am in the top right corner</p>
</th>
</tr>
<tr valign = "bottom">
<th>MPG</th>
<th>Maintenance</th>
<th>Blue</th>
<th>1995</th>
</tr>
</thead>
<tbody>
<tr>
<th>SUV</th>
<td>16</td>
<td>Expensive</td>
<td rowspan = "2">Geo</td>
<td rowspan = "2">Geo</td>
</tr>
<tr>
<th>Geo Metro</th>
<td>55</td>
<td>Inexpensive</td>
</tr>
</tbody>
</table>
Would produce the table:
Hi! I am in
the top
left corner.
|
Hi
I am in the top right corner
|
| MPG |
Maintenance |
Blue |
1995 |
| SUV |
16 |
Expensive |
Geo |
Geo |
| Geo Metro |
55 |
Inexpensive |
DHTML
1
DHTML 3
Home
DHTML 4
Example
|
Contact
