HTML標記語法之表格元素

阿豪聊乾貨發表於2016-02-22
語法與語義:
  <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

標題在表格右方

 

相關文章