HTML標記語法之表格元素

語法與語義：

　　<table>和</table>定義表格的開始和結束

　　<thead>和</thead>定義表格頭部的開始和結束

　　<tbody>和</tbody>定義表格主體開始和結束

　　<tfoot>和</tfoot>定義表格腳註的開始和結束

　　<tr>和</tr>定義錶行的開始和結束

　　<td>和</td>定義表列（單元格）的開始和結束

　　<th></th>定義標題欄，和<td>級別相同（文字加粗、居中）。

1.table的屬性集

屬性	作用
bgcolor	設定表格背景色
background	設定表格背景圖片
border	設定邊框寬度，預設為0
cellpadding	設定單元格與內容之間的距離，預設值為2
cellspacing	設定單元格之間的距離，預設值為2
bodercolor	設定邊框顏色
bodercolorlight	置邊框亮部分的顏色（boder大於等於1時有效）
bodercolordark	設定邊框暗部分的顏色（boder大於等於1時才有效）
align	設定表格對齊格式（left、center、right）
width	設定表格寬度，單位用絕對畫素和百分比
height	設定表格高度，單位用絕對畫素和百分比

2.tr的屬性集

屬性	作用
width	設定行寬度
height	設定行高度
bgcolor	設定行的背景顏色
align	設定水平對齊方式(left/right/center)
valign	設定行垂直對齊方式（top、middle、bottom）

3.td的屬性集

屬性	作用
width	設定單元格寬度
height	設定單元格高度
bgcolor	設定單元格的背景顏色
background	background
align	設定水平對齊方式(left/right/center)
valign	設定行垂直對齊方式（top、middle、bottom）
rowspan	設定行合併數目
colspan	設定列合併數目
nowarp	設定在單元格中不換行

4.立體表格實現原理

    表格的亮邊框和暗邊框顏色進行對比。

5.細線表格效果的實現原理

    1.將表格的boder設為0.

    2.給表格設定背景顏色為細線顏色

    3.給表格設定單元格背景為白色

    4.給表格設定單元格之間的距離為細線寬度

6.table的邊框設定及其效果

屬性名稱	屬性值	說明
frame（border>0）	void	不顯現表格的邊線
	above	只顯現表格上邊線
	below	只顯現表格下邊線
	hsides	只顯現表格上下邊線
	vsides	只顯現表格左右邊線
	lhs	只顯現表格的左邊線
	vhs	只顯現表格的右邊線
	border/box	顯現表格的所有邊線
rules	rows	只顯示橫行的格框線
	cols	只顯示直行的格框線
	all	顯示所有的格框線
	groups	表示列組合水平部分
	none	不顯示任何格框線

7.表格結構化格式

　　<table>

　　　　<thead>表頭區</thead>

　　　　<tbody>表體區</tbody>

　　　　<tfoot>表尾區</tfoot>

　　</table>

8.直列化格式：<colgroup><colgroup>（<col>與<colgroup>的功能完全一樣）

 

屬性名稱	屬性值	說明
align	left	靠左
	center	靠中
	right	靠右
valign	top	靠上
	middle	靠中
	bottom	靠下
span	數字	直列數
bgcolor	顏色	背景顏色

　　

　　例如：想把一個表格的第n列的顏色改變，可以這樣做：

　　　　<colgroup span=”n-1”></colgroup>        

　　　　<colgroup bgcolor=”你想的顏色”></colgroup>

9.表格的標題：

　　<table>

　　　　<caption>標題名</caption>

　　</table>

 

屬性名稱	屬性值	說明
align	top	標題在表格上方
	bottom	標題在表格下方
	left	標題在表格左方
	right	標題在表格右方