HTML/表格

表格過去被廣泛濫用於頁面的佈局。在頁面任何部位都可以插入表，甚至在表中插入表。相關的tag是<table> - 表, <tr> - 表行, <td> - 表数据, <th> - 表头。

最簡單的表

例如：

 <table>
 <tr><th>Food</th><th>Price</th></tr>
 <tr><td>Bread</td><td>$2.99</td></tr>
 <tr><td>Milk</td><td>$1.40</td></tr>
 </table>

顯示為

Food	Price
Bread	$2.99
Milk	$1.40

表標題與表頭

例如：

<table>
<caption>公式与结果</caption>
<tr><th>Formula</th><th>Result</th></tr>
<tr><td>1 + 1</td><td>2</td></tr>
<tr><td>3 * 5</td><td>15</td></tr>
</table>

顯示為：

公式與結果
Formula	Result
1 + 1	2
3 * 5	15

邊框

表格的邊框是可選的。在寫代碼時打開邊框很有好處，可以在提交代碼時把邊框關閉。

The border of this table is 1 pixel wide.

The border on this table is 5 pixels wide.

缺省值為0，即無邊框。

border是table tag的一個屬性。語法為：

<table border=X> where X is the border size in pixels.

可以指定邊框顏色，但這是Internet Explorer的tag專有的屬性：

用CSS指定顏色更好。

高度與寬度

默認表的尺寸與其中的數據所佔尺寸一樣大。

可以給定表的高度與寬度，語法為： <table height=??? width=???> 其中???是像質數或者相對的百分比。

也可以控制表行或單元格的高度寬度： <tr height=80> <td width="50%">

也可以用CSS指定長度、寬度。

單元格間隔與單元格填充

如圖所示。單元格間隔（Cell Spacing）是在單元格之間的空白區的像質數。單元格填充（Cell Padding）是單元格內部邊框至信息區的像質數。

the difference between cellpadding and cellspacing

二者都是table tag的屬性，默認值都是2： e.g. <table border=1 cellspacing=0 cellpadding=0>

單元格的對齊

單元格默認對其是水平左對齊、垂直居中對齊。

可以在td或者tr中指定對齊方式。 水平對齊
Syntax:
<td align="position"> where position is left, center, or right
或
<tr align="position"> where position is left, center, or right

垂直對齊
Syntax:
<td valign="position"> where position is top, middle or bottom
或
<tr valign="position"> where position is top, middle or bottom

在table tag中包含align="left"或align="right"並不是對齊其內容，而是影響整張表在頁面上的對齊。

bread	$2.99
Milk	$1.40

或

bread	$2.99
Milk	$1.40

跨多行或多列

如圖：

			<-- This row has three table datas
			<-- This row has two. The first uses `colspan="2"`
			<-- 使用 `rowspan="2"`
			<-- This row has only two table datas, because its first is being taken up.

背景顏色與圖片

設定背景顏色：

<td bgcolor="colour">
<tr bgcolor="colour">
<table bgcolor="colour">

可以寫顏色名字或十六進制的顏色值。

設定背景圖片：

<td background="filename">
<tr background="filename">
<table background="filename">

Column groups

總結