HTML Table 表格

HTML Table 表格

HTML Table 表格 ，網頁設計不可或缺的元素就是表格（Table），通常表格用來做版面的排版，而表格的用法包含了幾個重要的標籤，表格分別是  <table> 、<tr>、 <td> 這幾標籤組合起來才是個完整的表格。

<table>      標籤建立一表格。
<tbody>     標籤表格內容開始。
<tr></tr>    標籤代表的是一行。
<td></td>   標籤則代表一列。
</tbody>    標籤表格內容完結。
</table>     標籤建立完成。

HTML Table rowspan 屬性的功能是用來合併多個列（row），rowspan 可以將表格的兩行合併為一行，也可以一次合併多行，類似 excel 垂直合併儲存格的效果，有了 rowspan 可以讓 HTML 表格有無限的變化。與 colspan 一樣的是 rowspan 也只能用在 HTML 表格的 td 標籤內，用在其他地方沒有效果，所有主流的瀏覽器均支援 HTML Table rowspan 屬性的效果。

HTML Table colspan 屬性的功能是用來讓表格欄位（td）橫跨多列（columns），類似 excel 併儲存格 的效果，colspan 僅能用在 Table 的 td 標籤內，用於其他的標籤內無效。colspan 屬性是 HTML 表格的基本屬性，所有主流的瀏覽器都支援這個屬性的效果，與 colspan 相對應的為 rowspan 屬性。

HTML Table cellspacing 屬性的功能是用來設定表格內 欄位間的距離。

HTML table cellpadding 屬性可用來設計表格欄位內 '文字' '圖像' '元素' 與邊框間的距離，我們可以透過 cellpadding 讓文字或圖片跟表格邊框之間產生一個距離，創造出較為美觀的表格與內容呈現效果。

<table border="1"> <caption>**標題**</caption> <tbody> <tr><td>第一行 欄位 1</td><td>第一行 欄位 2 </td></tr> <tr bgcolor="#00FF00"><td>第二行 欄位 1</td><td>第二行 欄位 2 </td></tr> </tbody> </table>

**標題** 第一行 欄位 1 第一行 欄位 2 第二行 欄位 1 第二行 欄位 2

<table border="10" cellspacing="20" width="80%" > <caption>**標題**</caption> <tbody> <tr><td>第一行 欄位 1</td><td>第一行 欄位 2</td></tr> <tr><td>第二行 欄位 1</td><td>第二行 欄位 2</td></tr> </tbody></table> </td></tr> </tbody></table>

**標題** 第一行 欄位 1 第一行 欄位 2 第二行 欄位 1 第二行 欄位 2

<table border="2" style="width: 80%;"> <caption>colspan="2" 橫 二合併為一</caption> <tbody> <tr><td colspan="2" align="center" valign="middle"> 橫 二合併為一</td></tr> <tr><td>第二行 欄位 1</td><td>第二行 欄位 2</td></tr> </tbody></table> </td></tr> </tbody></table>

colspan="2" 橫 二合併為一 橫 二合併為一 第二行 欄位 1 第二行 欄位 2

<table border="2" style="width: 80%;"> <caption>rowspan="2" 直 二合併為一</caption> <tbody> <tr><td rowspan="2">直 二合併為一 </td><td>第一行 欄位 1</td></tr> <tr><td> 第二行 欄位 1</td></tr> </tbody> </table>

rowspan="2" 直 二合併為一 直 二合併為一 第一行 欄位 1 第二行 欄位 1

範例加入 colspan="4" 的設定， 張此個欄位四合併為一，如果設定為3是三合併為一..........
               rowspan="4"的設定 ，合併多個列。

合併多欄位為一行 colspan="4" height="100px" width="100%"
合併多個列 rowspan="4"
	text-align:left vertical-align:top	text-align:center vertical-align:top	text-align:right vertical-align:top
	text-align:left vertical-align:middle	text-align: center vertical-align:middle	text-align:right vertical-align:middle
	text-align:left vertical-align:bottom	text-align: center vertical-align:bottom	text-align:right vertical-align:bottom