1. 程式人生 > >表格標簽

表格標簽

otto 寬度 cells 表格 單元格 left 英文 對齊方式 eight

1.語法:

  1.標簽介紹:
    表格標簽:<table></table>
    行標簽:<tr></tr> ->table row
    單元格標簽:<td></td> ->table data
  2.創建順序:
    1.創建表格標簽
    2.在表格標簽中創建行標簽,每一行就是一個tr
    3.在行中創建單元格存放數據,每一個單元格對應一個td

2.標簽屬性

  1. table 屬性
    1. border :設置邊框,取值以px為單位的數值(px可以省略)
    2. width :設置寬度
    3. height :設置高度
    4. align :設置表格在其父元素中的水平對齊方式
    5. cellpadding : 設置單元格的內邊距(內容與邊框之間的距離),取值為px單位的數值
    6. cellspacing : 設置單元格的外邊距(單元格與單元格之間的距離,或者單元格與表格邊框之間的距離),取值像素為單位的數值
    7. bgcolor : 設置表格的背景顏色,取值可以是英文的顏色名稱
  2. tr 標簽屬性
    1. bgcolor : 設置當前行的背景顏色
    2. align :設置當前行中內容的水平對齊方式
      取值 : left / center / right
    3. valign :設置當前行內容的垂直對齊方式
      取值 :top / middle / bottom,默認垂直居中
  3. td 標簽屬性
    1. width 設置單元格的寬度
    2. height 設置單元格的高度
    3. align 單元格內容的水平對齊方式
    4. valign 單元格內容的垂直對齊方式
    5. bgcolor 單元格的背景顏

3.單元格合並

  是單元格獨有的屬性 colspan rowspan
  1. 單元格的跨列合並
    從當前單元格的位置開始,橫向向右合並幾個單元格
    colspan = "3" ->跨3列進行合並(包含自身)
  2. 單元格的跨行合並
    從當前的單元格開始,縱向向下合並單元格
    rowspan = "3" ->向下跨3行合並單元格
  註意 :一旦發生單元格合並,
    跨列合並,要刪除當前行中多余的單元格
    跨行合並,要刪除其後行中多余的單元格
    始終保持表格結構完整

表格標簽