HTML教程<table>的<th>和<td>

上次谈到table tag，这里将深入探讨用在<table> tag之间的<th>和<td> tag。
<th>和<td>之间涵盖的是table header和table data。你可以设定td的attribute来控制table header和table data的显示。

<th>和<td>所支援的attribute：
align——设定table header或table data的排列位置，支援的value为：left, right, center, justify, char。

bgcolor——用来设定该table header或table data的背景颜色。接受color name或是RGB数值。
例子：
<table border="1" bgcolor="#00ff00"> <tr> <th bgcolor="red">Column 1</th> <th>Column 2</th> </tr> <tr> <td>Data 1</td> <td bgcolor="yellow">Data 2</td> </tr> </table>

Column 1	Column 2
Data 1	Data 2

你也可以设定整行的row的背景颜色，写法是：
<table border="1"> <tr bgcolor="red"> <td>Data 1</td> <td>Data 2</td> </tr> </table>

width——设定table header或table data的宽度，接受px或%。

height——设定table header或table data的高度，接受px。

rowspan——设定table header或table data跨过row的行数。
例子：
<table border="1" bgcolor="#00ff00"> <tr> <th>Column 1</th> <th>Column 2</th> </tr> <tr> <td>Data 1</td> <td rowspan="2">Data 2</td> </tr> <tr> <td>Data 3</td> </tr> </table>

Column 1	Column 2
Data 1	Data 2
Data 3

colspan——设定table header或table data跨过column的行数。
例子：
<table border="1" bgcolor="#00ff00"> <tr> <th>Column 1</th> <th>Column 2</th> </tr> <tr> <td colspan="2">Data 1</td> </tr> <tr> <td>Data 2</td> <td>Data 3</td> </tr> </table>

Column 1	Column 2
Data 1
Data 2	Data 3

id——设定独特的id让JavaScript辨别。

class——设定class的名称，通常用在CSS。

<th>和<td>tag所支援的event handler：
onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup.

---

table里又有另外一个table？
你可以在table里涵盖这另外一个table，把另一个table的编码写在<td>里就可以了，这样叫做“nested table”，看以下例子：
<table border="1" bgcolor="#00ff00"> <tr> <th>Column 1</th> <th>Column 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> <tr> <td>Data 3</td> <td><br /> <table border="1" bgcolor="#00ff00"> <tr> <th>Column 1</th> <th>Column 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> <tr> <td>Data 3</td> <td>Data 4</td> </tr> </table> </td> </tr> </table>

Column 1	Column 2
Data 1	Data 2
Data 3	Column 1 Column 2 Data 1 Data 2 Data 3 Data 4