HTML <table> 標籤

標籤：cell   失效   屬性   black   使用   建議   font   tab   min   

HTML 表格<table>的使用

 

表格用table表示 表格中每一行用tr 一行中的每一列用td表示

 

例如一個三行兩列的表格：

<table>

<tr>

<td>第一行第一列</td>

<td>第一行第二列</td>

</tr>

<tr>

<td>第二行第一列</td>

<td>第二行第二列</td>

</tr>

<tr>

<td>第三行第一列</td>

<td>第三行第二列</td>

</tr>

</table>

th 表示的是表頭 表頭中的文字預設為加粗置中 th要放在tr中用於替換td,例如：

<table>

<tr>

<th></th>

<th></th>

</tr>

<tr>

<td></td>

<td></td>

</tr>

</table>

 

table 的常用屬性

 

1.border屬性 

給表格加邊框 預設給所有的td加邊框 並且給整個table加外邊框 當增大border的值的時候 td 的邊框不變 只有最外的變寬

<table border="10"></table>

 

2.cellspacing屬性 

 

表示的是儲存格與儲存格之間的距離 注意cellspacing＝“0” 儲存格與儲存格之間沒有距離 但是邊框線的寬度依然是兩條線的寬度

 

表格邊框合并的 css 寫法 ：style="border-collapse: collapse;

 

  這條css 與cellspacing有什麼區別？

cellspacing＝“0”僅僅是將儲存格之間的距離調整為0，但是儲存格之間還是兩條線

而style="border-collapse: collapse; 是將表格相鄰的兩條邊框合并處理，只有一條線存在。一旦邊框合并 cellspacing屬性將會失效

 

3.cellpadding屬性 儲存格邊框與儲存格中的文字的距離

 

4.height:表格的高度 width:表格的寬度

 

<table height="100px" width="100px"></table>

<table style="height: 100px;width: 100px;"></table>（CSS寫法）

 

5.align屬性  

 

設定表格整體在瀏覽器的位置，已經被淘汰了，不建議使用。

可選值：left center right

 

6.bgcolor 背景色

bgcolor="red"

 

7.bordercolor 邊框顏色

 

bordercolor="blue"

 

8.background 背景圖 背景色和背景圖同時存在時 背景圖會覆蓋背景色

 

background="img/computer.jpg"

 

 

 

<tr>與<td>常用屬性

 

 

 

1.

 

  width:儲存格寬度

 

  height:儲存格高度

 

  當你改變了一行或者

 

 

 

2.bgcolor屬性 儲存格的背景顏色 

 

 

 

<table bgcolor="aqua">

 

<tr bgcolor="blue">

 

<td bgcolor="black"></td>

 

</tr>

 

</table>

 

最裡面的覆蓋外面的

 

 

 

3. align屬性 設定儲存格中文字水平對其方式，預設局左

 

可選值：left center right

 

 

 

4.valign屬性 設定儲存格中文字垂直對其方式，預設局中

 

可選值：top middle（center） bottom 上 中 下

 

 

 

5.nowrap屬性 nowrap="nowrap"

 

當儲存格文字過多時，設定單元行文字不斷行顯示，但是會把表格的寬度撐大

 

 

 

 

 

表格的跨行與跨列

 

 

 

1.跨列：在td上使用屬性colspan="n"進行跨列。如果一個單元個跨n列，則儲存格右邊的n－1個儲存格要去掉。

 

2.跨行：在td上使用屬性rowspan="n"進行跨行。 如果一個單元個跨n行，則儲存格下邊的n－1個儲存格要去掉。

 

HTML <table> 標籤