表格過去被廣泛濫用於頁面的佈局。在頁面任何部位都可以插入表,甚至在表中插入表。相關的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>

顯示為

FoodPrice
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>

顯示為:

公式與結果
FormulaResult
1 + 12
3 * 515

邊框

編輯

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

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專有的屬性:

<table bordercolor="#000000">

用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

編輯

總結

編輯