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>內容2</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:表格標題顯示於表格左邊(部分瀏覽器支援,如:Firefox)  4.right:表格標題顯示於表格右邊(部分瀏覽器支援,如:Firefox)  三、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 元素對錶格中的行進行分組,方便控製表格的表現。當長的表格被列印時，表格的表頭和頁尾可被列印在包含表格式資料的每張頁面上(部分瀏覽器支援,如:Firefox)。

這幾個標記主要是用於提高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>