Basic,
Attributes,
Cell Spanning,
Tricks and Tips,
Formatting Web Page
<Table>, <TR>, and <TD> tags
- <Table> and </Table> define a table.
- <TR> (</TR>) defines a row in a table.
- <TD> (</TD>) defines a cell in a row.
- The end tags for <TR> and <TD> are optional.
<Table border="5">
<TR>
<TD> 1 <TD> 2 <TD> 3
<TR>
<TD> 4 <TD> 5 <TD> 6
</Table>
gives the following table:
The content of a cell can be any html objects.
<Table align="center" border="0">
<TR>
<TD>
<image src="NorthAm.jpg"
height=160
width=200>
<TD> <image src="peace.jpg"> <TD> 3
<TR>
<TD> 4 <TD> 5 <TD> <image src="dandlion.gif">
</Table>
gives the following table:
<Table align="center" border="5">
<TR>
<TD>
<table border="0">
<TR> <TD> A <TD> B <TD> C
<TR> <TD> D <TD> E <TD> F
</table>
<TD> 2 <TD> Dandelion
<TR>
<TD> 4 <TD> 5 <TD> <image src="dandlion.gif">
</Table>
<TH> tags is similar to <TD> but will render the text as a headline.
<Table align="center" border="5">
<TR>
<TD>
<table border="0">
<TR> <TH> A <TD> B <TD> C
<TR> <TD> D <TD> E <TD> F
</table
<TH> 2 <TH> Dandelion
<TR>
<TH> 4 <TD> 5 <TD> <image src="dandlion.gif">
</Table>
<Caption> tag
<Table border="5" width="80%" align="center">
<caption align="bottom">
The caption text is shown at the bottom
</caption>
<TR align="center">
<TD> 1 <TD> 2 <TD> 3
<TR>
<TD> 4 <TD> 5 <TD> 6
</Table>
gives the following table:
The caption text is shown at the bottom
| 1 | 2 | 3 |
| 4 | 5 | 6 |
Attributes of <Table> tag
| Common Attributes of <Table> tag
|
| Attribute name | value
|
| align | left, center, right
|
| bgcolor | value for color
|
| bordercolor
|
| border | number of pixels
|
| cellspacing
|
| cellpadding
|
| width | number of pixels or % of the window size
|
| height
|
| rules | all, cols, rows
|
| frame | border, above, below, RHS, LHS, void
|
Attributes of <TR>, <TH> and <TD> tags
|
Attributes of <TR> tag
|
| Attribute name | value
|
| height | number of pixels or % of the table height
|
| align | left, center, right
|
| valign | top, middle, bottom
|
| bgcolor | value of color
|
|
Attributes of <TH> and <TD> tag
|
| Attribute name | value
|
| height | number of pixels
|
| width | number of pixels or % of the table width
|
| align | left, center, right
|
| valign | top, middle, bottom
|
| colspan | number of columns this cell spans (down)
|
| rowspan | number of rows this cell spans (to the right)
|
Examples of using colspan and rowspan attributes
<table ......>
<caption> Cell 1 spans 2 columns </caption>
<tr>
<th colspan="2"> 1 <th> 2
<tr>
<th> 3 <th> 4 <th> 5
<tr>
<th> 6 <th> 7 <th> 8
</table>
Cell 1 spans 2 columns
| 1 | 2
|
| 3 | 4 | 5
|
| 6 | 7 | 8
|
<table ......>
<caption> Cell 2 spans 3 rows </caption>
<tr>
<th> 1 <th rowspan="3"> 2 <th> 3
<tr> <th> 4 <th> 5
<tr> <th> 6 <th> 7
</table>
Cell 2 spans 3 rows
| 1 | 2 | 3
|
| 4 | 5
|
| 6 | 7
|
<table ......>
<caption> Cell 2 spans 3 rows, Cell 5 spans 2 rows </caption>
<tr>
<th> 1 <th rowspan="3"> 2 <th> 3
<tr> <th> 4 <th rowspan="2"> 5
<tr> <th> 6
</table>
Cell 2 spans 3 rows, Cell 5 spans 2 rows
| 1 | 2 | 3
|
| 4 | 5
|
| 6
|
<table ......>
<caption> Cell 5 spans 2 rows and 2 columns </caption>
<tr>
<th> 1 <th > 2 <th> 3
<tr> <th> 4 <th colspan="2" rowspan="2"> 5
<tr> <th> 6
</table>
Cell 5 spans 2 rows and 2 columns
| 1 | 2 | 3
|
| 4 | 5
|
| 6
|
Suppose you want to create a table with cells spanning in the following way:
We first extend the rules of each cell as follows:
So we can easily see that cell 1 spans 2 rows and 2 columns, and cell 2 spans 3 columns.
Tricks
How to generate the following table? No Problem!!
Suppose we want to remove the central column.
How to generate the following table?
The above table uses some dirty tricks, but this is not the best thing we can do!!
The following code doesn't work. Think why!!
<table .....>
<tr> <td rowspan="2"> 1 <td> 2
<tr> <td> 3 <td rowspan="2"> 4
</table>
The code above will give:
To see why this is so, let's increase cellspacing to 20 pixels:
The following code can't work perfectly, although it is logically correct.
<table .....>
<tr> <td rowspan="2"> 1 <td> 2
<tr> <td rowspan="2"> 4
<tr> <td> 3
</table>
gives:
The following is same as the above table except cellspacing="20".
Solution (but a bit artificial)
<table .....>
<tr height="33%"> <td rowspan="2"> 1 <td> 2
<tr height="33%"> <td rowspan="2"> 4
<tr height="34%"> <td> 3
</table>
gives:
Chung-Chih Li
|
| |
IF we show the borders and rules of the tables in the document above, we will see:
Chung-Chih Li
|
| |