table標簽總結
一、table標簽：定義一個表格
簡單表格由table元素以及一個或多個tr（行標簽）、th（表頭單元格標簽）、td（普通單元格標簽）
<table border=1>
<tr>
<th>表頭1</th>
<th>表頭2</th>
</tr>
<tr>
<td>內容1</td>
<td>內容2</td>
</tr>
</table>
復雜的表格還包括caption（表格標題）、col(定義列)、colgroup(對表格中的列進行組合)、thead（組合表頭的內容）tbody(組合表格的主題內容)、tfoot(組合表格的腳註內容)
<table width="400" border="1">
<caption>表格的標題</caption>
<col align="left"/>
<col align="left"/>
<col align="left" />
<thead>
<tr>
<th>表頭1</th>
<th>表頭2</th>
<th>表頭3</th>
</tr>
</thead>
<tbody>
<tr>
<td>內容1</td>
<td>內容3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>腳註1</td>
<td>腳註2</td>
<td>腳註2</td>
</tr>
</tfoot>
</table>
A．width:規定表格的寬度、height:規定表格的高度
如果不設置寬度高度，表格會根據表格內容自動調整表格的寬度高度
B．align屬性：規定表格相對周圍元素的對齊方式
表格前後都會出現折行，但是運用align屬性，可實現其他html元素圍繞表格的效果。相當於使用css的float屬性
1.left
<table border=1 align="left">
<tr>
<th>表頭1</th>
<td>數據1</td>
<td>數據2</td>
</tr>
<tr>
<th>表頭2</th>
<td>數據1</td>
<td>數據2</td>
</tr>
</table>
<p>demo</p>
2.center
align=center 表格還是占據一整行
<table border=1 align="center">
<tr>
<th>表頭1</th>
<td>數據1</td>
<td>數據2</td>
</tr>
<tr>
<th>表頭2</th>
<td>數據1</td>
<td>數據2</td>
</tr>
</table>
<p>demo</p>
3.right
<table border=1 align="right">
<tr>
<th>表頭1</th>
<td>數據1</td>
<td>數據2</td>
</tr>
<tr>
<th>表頭2</th>
<td>數據1</td>
<td>數據2</td>
</tr>
</table>
<p>demo</p>
C．bgcolor屬性：規定表格的背景顏色
相當於使用css的background-color屬性
1.colorname:顏色值為顏色名稱的背景顏色
2.hex_number:顏色值為十六進制的背景顏色
3.rgb_number:顏色值為rgb代碼的背景顏色
D．background屬性：規定表格的背景圖像
background屬性的值直接寫url
<table border=1 background="image/demo.jpg">
<tr>
<th>表頭1</th>
<td>數據1</td>
<td>數據2</td>
</tr>
<tr>
<th>表頭2</th>
<td>數據1</td>
<td>數據2</td>
</tr>
</table>
E．border屬性：規定表格邊框的寬度
border屬性會為每個單元格應用邊框，並用邊框圍繞表格
border屬性值改變，只會改變表格外邊框，表格內部的邊框不會改變，還是1px
<table border=10>
<tr>
<th>表頭1</th>
<td>數據1</td>
<td>數據2</td>
</tr>
<tr>
<th>表頭2</th>
<td>數據1</td>
<td>數據2</td>
</tr>
</table>
F．cellspacing屬性：規定單元格之間的間距
cellspacing設為0時,表格間沒有間距,表格邊框將緊挨著顯示,若要使表格邊框合並,則需使用CSS的border-collapse:collapse
<table border=1 cellspacing="0">
<tr>
<th>表頭1</th>
<td>數據1</td>
<td>數據2</td>
</tr>
<tr>
<th>表頭2</th>
<td>數據1</td>
<td>數據2</td>
</tr>
</table>
<table border=1 cellspacing="10">
<tr>
<th>表頭1</th>
<td>數據1</td>
<td>數據2</td>
</tr>
<tr>
<th>表頭2</th>
<td>數據1</td>
<td>數據2</td>
</tr>
</table>
G．cellpadding屬性：規定單元格邊界與單元格內容之間的間距,默認為0
<table border=1 cellpadding="10">
<tr>
<th>表頭1</th>
<td>數據1</td>
<td>數據2</td>
</tr>
<tr>
<th>表頭2</th>
<td>數據1</td>
<td>數據2</td>
</tr>
</table>
H．frame屬性：規定外側邊框的那個部分是可見的
1.void:不顯示外側邊框
<table border=1 frame="void" rules="none">
<tr>
<th>表頭1</th>
<td>數據1</td>
<td>數據2</td>
</tr>
<tr>
<th>表頭2</th>
<td>數據1</td>
<td>數據2</td>
</tr>
</table>
2.box:顯示所有的外側邊框
<table border=1 frame="box" rules="none">
<tr>
<th>表頭1</th>
<td>數據1</td>
<td>數據2</td>
</tr>
<tr>
<th>表頭2</th>
<td>數據1</td>
<td>數據2</td>
</tr>
</table>
3.border:顯示所有的外側邊框
與frame="box"顯示效果相同
4.above:顯示上部的外側邊框
<table border=1 frame="above" rules="none">
<tr>
<th>表頭1</th>
<td>數據1</td>
<td>數據2</td>
</tr>
<tr>
<th>表頭2</th>
<td>數據1</td>
<td>數據2</td>
</tr>
</table>
5.below:顯示下部的外側邊框
<table border=1 frame="below" rules="none">
<tr>
<th>表頭1</th>
<td>數據1</td>
<td>數據2</td>
</tr>
<tr>
<th>表頭2</th>
<td>數據1</td>
<td>數據2</td>
</tr>
</table>
6.lhs:顯示左側邊框
<table border=1 frame="lhs" rules="none">
<tr>
<th>表頭1</th>
<td>數據1</td>
<td>數據2</td>
</tr>
<tr>
<th>表頭2</th>
<td>數據1</td>
<td>數據2</td>
</tr>
</table>
7.rhs:顯示右側邊框
<table border=1 frame="rhs" rules="none">
<tr>
<th>表頭1</th>
<td>數據1</td>
<td>數據2</td>
</tr>
<tr>
<th>表頭2</th>
<td>數據1</td>
<td>數據2</td>
</tr>
</table>
8.hsides:顯示上下側的外側邊框
<table border=1 frame="hsides" rules="none">
<tr>
<th>表頭1</th>
<td>數據1</td>
<td>數據2</td>
</tr>
<tr>
<th>表頭2</th>
<td>數據1</td>
<td>數據2</td>
</tr>
</table>
9.vsides:顯示左右側的外側邊框
<table border=1 frame="vsides" rules="none">
<tr>
<th>表頭1</th>
<td>數據1</td>
<td>數據2</td>
</tr>
<tr>
<th>表頭2</th>
<td>數據1</td>
<td>數據2</td>
</tr>
</table>
I．rules屬性：規定內側邊框的那個部分是可見的
1.none:內部沒有線條
<table border=1 frame="void" rules="none">
<tr>
<th>表頭1</th>
<td>數據1</td>
<td>數據2</td>
</tr>
<tr>
<th>表頭2</th>
<td>數據1</td>
<td>數據2</td>
</tr>
</table>
2.all:顯示內部所有的線條
<table border=1 frame="void" rules="all">
<tr>
<th>表頭1</th>
<td>數據1</td>
<td>數據2</td>
</tr>
<tr>
<th>表頭2</th>
<td>數據1</td>
<td>數據2</td>
</tr>
</table>
3.rows:顯示行之間的線條
<table border=1 frame="void" rules="rows">
<tr>
<th>表頭1</th>
<td>數據1</td>
<td>數據2</td>
</tr>
<tr>
<th>表頭2</th>
<td>數據1</td>
<td>數據2</td>
</tr>
<tr>
<th>表頭2</th>
<td>數據1</td>
<td>數據2</td>
</tr>
</table>
4.cols:顯示列之間的線條
<table border=1 frame="void" rules="cols">
<tr>
<th>表頭1</th>
<td>數據1</td>
<td>數據2</td>
</tr>
<tr>
<th>表頭2</th>
<td>數據1</td>
<td>數據2</td>
</tr>
<tr>
<th>表頭2</th>
<td>數據1</td>
<td>數據2</td>
</tr>
</table>
5.groups:顯示行組和列組之間的線條
<table border=1 frame="void" rules="groups">
<colgroup span="2"></colgroup>
<colgroup span="3"></colgroup>
<tr>
<th>表頭1</th>
<th>表頭2</th>
<th>表頭3</th>
<th>表頭4</th>
<th>表頭5</th>
<th>表頭6</th>
</tr>
<tr>
<td>數據1</td>
<td>數據2</td>
<td>數據3</td>
<td>數據4</td>
<td>數據5</td>
<td>數據6</td>
</tr>
</table>
二、caption標簽:定義表格的標題
表格標題默認居中顯示於表格內容上方,表格邊框不會將標題包含進去
<table border=1>
<caption>表格的標題</caption>
<tr>
<td>數據1</td>
<td>數據2</td>
<td>數據3</td>
<td>數據4</td>
</tr>
<tr>
<td>數據1</td>
<td>數據2</td>
<td>數據3</td>
<td>數據4</td>
</tr>
</table>
align屬性:規定表格標題顯示位置
1.top:表格標題顯示於表格上方,默認
2.bottom:表格標題顯示於表格下方
<table border=1>
<caption align="bottom">表格的標題</caption>
<tr>
<th>數據1</th>
<th>數據2</th>
<th>數據3</th>
<th>數據4</th>
</tr>
<tr>
<td>數據1</td>
<td>數據2</td>
<td>數據3</td>
<td>數據4</td>
</tr>
</table>
3.left:表格標題顯示於表格左邊(部分瀏覽器支持,如:火狐)
4.right:表格標題顯示於表格右邊(部分瀏覽器支持,如:火狐)
三、tr標簽：定義表格中的行
tr標簽內不可直接寫內容,表格內容一定是寫在td或th標簽內
A．align屬性：規定表格行中的內容的水平對齊方式
1.right:右對齊內容
2.left:左對齊內容（默認）
3.center:水平居中對齊內容
4.justify:對行進行伸展，每行長度相等
<table border=1 width="100">
<tr align="justify">
<th>數據11111111</th>
<th>數據222222222222222</th>
<th>數據3333333333333333333</th>
<th>數據444444</th>
</tr>
</table>
B．valign屬性：規定表格行中內容的垂直對齊方式
1.top:頂部對齊內容
2.middle：垂直居中對齊內容
3.bottom：底部對齊內容
4.baseline：內容與基線對齊
C．bgcolor屬性：設置表格行的背景顏色
四、單元格標簽:th標簽和td標簽
A．th標簽:定義表格表頭單元格
單元格文本一般顯示為居中的粗體文本
B．td標簽:定義表格標準單元格
單元格文本一般顯示為左對齊的普通文本
C．rowspan屬性:規定單元格橫跨的行數
<table border=1 >
<tr>
<td rowspan="3">數據</td>
<td>數據</td>
<td>數據</td>
<td>數據</td>
</tr>
<tr>
<td>數據</td>
<td>數據</td>
<td>數據</td>
</tr>
<tr>
<td>數據</td>
<td>數據</td>
<td>數據</td>
</tr>
</table>
D．colspan屬性:規定單元格橫跨的列數
<table border=1 >
<tr>
<td colspan="2">數據</td>
<td>數據</td>
</tr>
<tr>
<td>數據</td>
<td>數據</td>
<td>數據</td>
</tr>
<tr>
<td>數據</td>
<td>數據</td>
<td>數據</td>
</tr>
</table>
E．width屬性:可設置單元格的寬度
F．height屬性:可設置單元格的高度
G．align屬性:規定單元格內容的水平對齊方式
H．valign屬性:規定單元格內容的垂直水平對齊方式
I．nowrap屬性:規定單元格內容不換行
五、表格內容分組標簽:thead標簽、tbody標簽、tfoot標簽
thead、tfoot 以及 tbody 元素對表格中的行進行分組,方便控制表格的表現。當長的表格被打印時，表格的表頭和頁腳可被打印在包含表格數據的每張頁面上(部分瀏覽器支持,如:火狐)。
這幾個標記主要是用於提高table標簽的加載以及顯示的,即分部加載,不用等到整個表格加載完再顯示單元格數據
A．thead標簽:組合表格的表頭內容
B．tbody標簽:組合表格的主體內容
C．tfoot標簽:組合表格的頁腳/腳註內容
不管代碼順序如何,頁面始終按照thead>tbody>tfoot 的順序顯示
<table border=1>
<tfoot>
<tr>
<td>總計</td>
<td>數據</td>
</tr>
</tfoot>
<tbody>
</tr><tr>
<td>數據</td>
<td>數據</td>
</tr>
</tbody>
<thead>
<tr>
<th>表頭</th>
<th>表頭</th>
</tr>
</thead>
</table>
六、列標簽:colgroup標簽,col標簽
1.align:規定列中內容的水平對齊方式
2.valign:規定列中內容垂直對齊方式
3.span:規定列橫跨的列數
4.width:規定列的寬度
A．colgroup標簽:用於對表格中的列進行分組,以便對其進行格式化
colgroup標簽只能在table標簽中使用
<style>
.one{
background-color: #c00;
}
.two{
background-color: #f00;
}
</style>
<body>
<table border=1 width="200">
<colgroup class="one">
<col />
<col />
</colgroup>
<colgroup span="3" class="two"></colgroup>
<tr>
<td>數據</td>
<td>數據</td>
<td>數據</td>
<td>數據</td>
<td>數據</td>
<td>數據</td>
</tr>
<tr>
<td>數據</td>
<td>數據</td>
<td>數據</td>
<td>數據</td>
<td>數據</td>
<td>數據</td>
</tr>
</table>
B．col標簽:為表格中的一個或多個列定義屬性值
col標簽只能在table標簽或colgroup標簽中使用
col標簽是只包含屬性的空元素,列的內容均顯示在tr元素內的td元素中
<style>
.one{
background-color: #c00;
}
.two{
background-color: #f00;
}
</style>
<body>
<table border=1 width="200">
<col class="one"/>
<col class="two"/>
<tr>
<td>數據</td>
<td>數據</td>
</tr>
<tr>
<td>數據</td>
<td>數據</td>
</tr>
</table>
table標簽總結