html table 表格

時間 2019-12-18

標籤 html table 表格欄目 HTML 简体版

原文原文鏈接

前面的話

　　在CSS出現以前，table元素經常用來佈局。這種作法在HTML4以後再也不推薦使用。而如今有些矯枉過正，使用table展現數據均可能會被說不規範。本文將詳細介紹HTML表格tablehtml

table

【默認樣式】html5

//IE7-瀏覽器不支持border-spacing
table{
　　border-collapse: separate;
　　border-spacing: 2px;
　　border: 1px solid gray;
}

【屬性】瀏覽器

　　一、border(在html5中，border只能爲"1"或" ")(html5已廢棄)ide

border="0"//沒有邊框
border="8"//8像素寬的邊框

　　二、cellpadding(px/%)(html5已廢棄)佈局

　　規定單元邊界與單元內容之間的間距測試

　　三、cellspacing(px/%)(html5已廢棄)spa

　　規定單元格之間的間距代理

　　四、summary(html5已廢棄)code

　　表格內容的摘要htm

　　五、width(html5已廢棄)

　　表格寬度

<table border="2" cellpadding="5" cellspacing="3" summary="測試表格" width="300">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

　　六、frame(IE7-瀏覽器不能正常顯示)(html5已廢棄)

值	描述
void	不顯示外側邊框。
above	顯示上部的外側邊框。
below	顯示下部的外側邊框。
hsides	顯示上部和下部的外側邊框。
vsides	顯示左邊和右邊的外側邊框。
lhs	顯示左邊的外側邊框。
rhs	顯示右邊的外側邊框。
box	在全部四個邊上顯示外側邊框。
border	在全部四個邊上顯示外側邊框。

　　七、rules(IE7-瀏覽器不能正常顯示)(html5已廢棄)

值	描述
none	沒有線條。
groups	位於行組和列組之間的線條。
rows	位於行之間的線條。
cols	位於列之間的線條。
all	位於行和列之間的線條。

　　<演示框>點擊下列相應屬性值可進行演示

【樣式】

　　一、border-spacing[可替代HTML屬性cellspaing](IE7-不支持)

　　[注意]只有當border-collapse值爲separate時，該樣式纔有效

border-spacing: x y
//x:水平間距 y:垂直間距。若只有一個值，則水平間距和垂直間距相等。注意，不可爲負值。

　　二、empty-cells(IE7-不支持)

empty-cells: hide 不在空單元格周圍繪製邊框和背景，相似於hidden效果
empty-cells: show(默認) 在空單元格周圍繪製邊框和背景

　　三、CSS實際上有兩種大相徑庭的邊框模型。按佈局術語來講，若是單元格相互之間是分隔的，是分隔邊框模型在起做用；另外一種是合併邊框模型，單元格邊框會相互合併。

border-collapse:separate;

　　[注意]在分隔邊框模型中，不能爲行、行組、列和列組設置邊框。

border-collapse:collapse;

　　在合併邊框模型中，表格沒法設置內邊距padding，且單元格邊框之間也沒有間距。單元格之間的邊框會在單元格間的假想表格線上居中，且表格寬度只包含表格邊框的一半

【邊框合併的規則】

　　a、某個合併邊框的border-style爲hidden，它會優先於全部其餘合併邊框。這個位置上的全部邊框都隱藏

　　b、某個合併邊框的border-style爲none，它的優先級最低

　　c、寬邊框優先於窄邊框

　　d、若寬度相同，double\solid\dashed\dotted\ridge\outset\groove\inset，優先級逐漸下降

　　e、若樣式也相同，cell\row\row group\column\column group\table，優先級逐漸降級

　　<演示框>點擊下列相應屬性值可進行border-style的演示

　　四、table-layout

table-layout:auto//自動寬度佈局

【自動佈局的步驟】

　　a、對於一列中的單元格，計算最小和最大單元格寬度

　　b、對於各一列，計算最小和最大列寬

　　c、若單元格跨列，最小列寬之和要等於跨列單元格最小單元格寬度

table-layout:fixed//固定寬度佈局

　　[注意]對於表單元格的長文原本說，使用word-wrap或word-break來強制換行，使用text-overflow實現文本溢出控制都須要設置table-layout:fixed

【固定佈局的步驟】

　　a、width屬性值不是auto的全部列元素會根據width值設置該列的寬度

　　b、若是一個列的寬度爲auto，則根據該單元格設置此列寬度，若是跨多列，則寬度平均分配

　　c、若是列寬度仍爲auto，則自動肯定其大小，使其寬度儘量相等

　　[注意]使用固定寬度佈局，用戶代理能夠更快地計算出表格的佈局

　　五、vertical-align

vertical-align: top;//頂端對齊
vertical-align: bottom;//底端對齊
vertical-align: middle;//中間對齊
vertical-align: baseline(默認);//基線對齊

　　[注意]vertical-align:sub\super\text-top\text-bottom應用到表格單元格時會被忽略

行

【<tr><th><td>】

  <tr>行 table row 
  <th>表頭 table head
  <td>表格數據 table data

【默認樣式】

th{
    padding: 1px;
    text-align: center;
    font-weight: bold;
}
td{
    padding: 1px;
}

【屬性】

　　一、colspan

　　規定單元格可橫跨的列數

　　二、rowspan

　　規定單元格可橫跨的行數

　　[注意]關於行的表格元素生成矩形框，這些框有內容、內邊距和邊框，可是沒有外邊距margin。表頭呈現爲居中的粗體文本

　　 <演示框>點擊下列相應屬性值可進行演示

列

【<col><colgroup>】

　　<col> -> column 列

　　　　爲表格中一個或多個列定義屬性值

　　<colgroup> -> column group 列組

　　　　對錶格中的列進行組合，以便對其進行格式化

【屬性】

　　span

　　規定col元素應該橫跨的列數

【樣式】

　　一、visibility:collapse

　　該列或列組的全部單元格不顯示(設置爲其餘值則無效)

　　二、border

　　只有當border-collapse:collapse時，才能設置border

　　三、background

　　只有當單元格及其行有透明背景時，列或列組的背景纔可見

　　四、width

　　定義列或列組的最小寬度

<table border="1" style="border-collapse: collapse">
  <colgroup span="2" style="width:100px; background-color: red"></colgroup>
  <col style="background-color: green; width:200px; border: 3px solid blue;" >
  <tr>
    <td>數字</td>
    <td>中文</td>
    <td>英文</td>
  </tr>
  <tr>
    <td>1</td>
    <td>一</td>
    <td>a</td>
  </tr>
  <tr>
    <td>2</td>
    <td>二</td>
    <td>b</td>
  </tr>
</table>

其餘表格元素

【<thead><tbody><tfoot>】

<thead>表格頁眉
<tbody>表格主體
<tfoot>表格頁腳

　　[注意]它們的出現次序是：thead、tfoot、tbody，這樣瀏覽器就能夠在收到全部數據前呈現頁腳

【<caption>表格標題】

　　【默認樣式】

caption{
    text-align: center;
}

　　【樣式】

caption-side: top(默認)
caption-side: bottom

　　[注意]<caption>標籤必須緊隨<table>標籤以後，且只能對每一個表格定義一個標題

<table border="1" >
　 <caption style="caption-side:bottom">北京天氣</caption>
  <thead>
    <tr>
      <th>地區</th>
      <th>天氣</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>北京</td>
      <td>都霧霾</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>城八區</td>
      <td>霧霾</td>
    </tr>
    <tr>
      <td>郊區</td>
      <td>霧霾</td>
    </tr>
  </tbody>
</table>

display

table{display: table;}
thead{display: table-header-group;}
tbody{display: table-row-group;}
tfoot{display: table-footer-group;}
tr{display: table-row;}
td,th{display: table-cell;}
col{display: table-column;}
colgroup{display: table-column-group;}
caption{display: table-caption;}

　　 [注意]IE7-瀏覽器不支持爲HTML元素設置與表格有關的display值