HTML教程<table>

这次来谈谈HTML里的table tag。
table是用来在网页里加入table图表。
这样可以让数据或资料以更加整齐的方式呈现出来。
简单的table tag里必须有 <tr>, <th>, <td> tag。
网页显示table tag的方向是从左到右，从上到下。

看看以下例子：
<table border="1"><tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$125</td> </tr> </table>
你的table看起来应该是这样的：

Month	Savings
January	$100
February	$125

<tr>是table row，用来涵盖着一行横的cell。
<tr>必须用</tr>关闭起来，以开始新的一行。

<td>是table data，用来涵盖cell里要显示的东西，比如：<td>this is the data</td>。

<th>是table header，是table column的title。它和<td>差不多一样，唯一的差别是它会自动将内容粗体化（bold），以突出题目。

<table>所支援的attribute：
width——设定table的宽度，接受px或%。

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

bgcolor——用来设定table的背景颜色。接受color name或是RGB数值。

例子：
<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> </table>

Column 1	Column 2
Data 1	Data 2

background——设定table的背景图案。接受URL。
例子：
<table border="1" bgcolor=grey background="http://cforum.ucpro.my/templates/uchome/images/logo.png"><tr> <th><font color="#ff0000">This is Column 1</font></th> <th><font color="#00ff00">This is Column 2</font></th> </tr> <tr> <td><font color="#0000ff">Data 1</font></td> <td><font color="#00ffff">Data 2</font></td> </tr> </table>

This is Column 1	This is Column 2
Data 1	Data 2

看到了吗？在<th>和<td> tag之间是可以加入<font> tag来个别设定字体颜色的。

border——设定table边框的粗细。接受px。
你如果不想table的边框被显示出来，你可以设定border=“0”
例子：
<table border="0" bgcolor="black"><tr> <th>This is Column 1</th> <th>This is Column 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table>

This is Column 1	This is Column 2
Data 1	Data 2

cellpadding——设定table内容和cell wall之间的距离。接受px。
试试以下的差别：
<table border="1" cellpadding="1">
<table border="1" cellpadding="5">

This is Column 1	This is Column 2
Data 1	Data 2

This is Column 1	This is Column 2
Data 1	Data 2

cellspacing——设定table里cell和cell之间的距离。接受px。
试试以下的差别：
<table border="1" cellspacing="1">
<table border="1" cellspacing="5">

This is Column 1	This is Column 2
Data 1	Data 2

This is Column 1	This is Column 2
Data 1	Data 2

rules——设定边框在table里被显示的格式。接受的数值为：none, groups, rows, cols, all.
试试以下的差别：
<table border="1" bgcolor="black" rules="rows">
<table border="1" bgcolor="black" rules="cols">

This is Column 1	This is Column 2
Data 1	Data 2

This is Column 1	This is Column 2
Data 1	Data 2

align——设定table的排列位置，支援的value为：left, center, right.

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

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

table tag所支援的event handler：
onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup.

Tips:
你也可以在<table>和</table>之间加入<caption>和</caption>以在table之上显示标题。
例子：
<table border="1"><caption>This is a table</caption> <tr> <th>This is Column 1</th> <th>This is Column 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table>

This is a table

This is Column 1	This is Column 2
Data 1	Data 2