歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
您的位置:DIVCSS5首頁 > HTML >
 在CSS出現之前,table元素常常用來布局。這種做法在HTML4之后不再推薦使用。而現在有些矯枉過正,使用table展示數據都可能會被說不規范。本文將詳細介紹HTML表格table
 
 
 
table
【默認樣式】
 
復制代碼
//IE7-瀏覽器不支持border-spacing
table{
  border-collapse: separate;
  border-spacing: 2px;
  border: 1px solid gray;
}
復制代碼
【屬性】
 
  1、border(在html5中,border只能為"1"或" ")(html5已廢棄)
 
border="0"//沒有邊框
border="8"//8像素寬的邊框
  2、cellpadding(px/%)(html5已廢棄)
 
      規定單元邊界與單元內容之間的間距
 
  3、cellspacing(px/%)(html5已廢棄)
 
      規定單元格之間的間距
 
  4、summary(html5已廢棄)
 
      表格內容的摘要
 
  5、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>    
復制代碼
IFrame
 
  6、frame(IE7-瀏覽器不能正常顯示)(html5已廢棄)
 
描述
void 不顯示外側邊框。
above 顯示上部的外側邊框。
below 顯示下部的外側邊框。
hsides 顯示上部和下部的外側邊框。
vsides 顯示左邊和右邊的外側邊框。
lhs 顯示左邊的外側邊框。
rhs 顯示右邊的外側邊框。
box 在所有四個邊上顯示外側邊框。
border 在所有四個邊上顯示外側邊框。
  7、rules(IE7-瀏覽器不能正常顯示)(html5已廢棄)
 
描述
none 沒有線條。
groups 位于行組和列組之間的線條。
rows 位于行之間的線條。
cols 位于列之間的線條。
all 位于行和列之間的線條。
 
 
  <演示框>點擊下列相應屬性值可進行演示
 
IFrame
 
【樣式】
 
  1、border-spacing[可替代HTML屬性cellspaing](IE7-不支持)
 
  [注意]只有當border-collapse值為separate時,該樣式才有效
 
border-spacing: x y
//x:水平間距 y:垂直間距。若只有一個值,則水平間距和垂直間距相等。注意,不可為負值。
  2、empty-cells(IE7-不支持) 
 
empty-cells: hide 不在空單元格周圍繪制邊框和背景,類似于hidden效果
empty-cells: show(默認) 在空單元格周圍繪制邊框和背景
  3、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的演示
 
IFrame
 
  4、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,則自動確定其大小,使其寬度盡可能相等
 
  [注意]使用固定寬度布局,用戶代理可以更快地計算出表格的布局
 
  5、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;
}
復制代碼
【屬性】
 
  1、colspan
 
  規定單元格可橫跨的列數
 
  2、rowspan
 
  規定單元格可橫跨的行數
 
  [注意]關于行的表格元素生成矩形框,這些框有內容、內邊距和邊框,但是沒有外邊距margin。表頭呈現為居中的粗體文本
 
   <演示框>點擊下列相應屬性值可進行演示
 
IFrame
 
 
 
【<col><colgroup>】
 
  <col> -> column 列
 
    為表格中一個或多個列定義屬性值
 
  <colgroup> -> column group 列組
 
    對表格中的列進行組合,以便對其進行格式化
 
【屬性】
 
  span
 
  規定col元素應該橫跨的列數
 
【樣式】
 
  1、visibility:collapse
 
  該列或列組的所有單元格不顯示(設置為其他值則無效)
 
  2、border
 
  只有當border-collapse:collapse時,才能設置border
 
  3、background
 
  只有當單元格及其行有透明背景時,列或列組的背景才可見
 
  4、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值
 
 
 
匿名表格對象
  CSS定義了一種機制,將遺漏的組件作為匿名對象插入。詳細插入規則如下:
 
  1、如果table-cell元素的父元素不是table-row元素,則插入匿名table-row對象
 
  2、如果table-row元素的父元素不是table、inline-table或table-row-group元素,則插入匿名table元素
 
  3、如果table-column元素父元素不是table、inline-table或table-row-group元素,則插入匿名table元素
 
  4、如果table-row-group、table-header-group、table-footer-group、table-column-group或table-caption的父元素不是table元素,則插入匿名table元素
 
  5、如果table元素或inline-table元素的子元素不是table-row-group、table-header-group、table-footer-group、table-column-group或table-caption,則插入匿名table-row元素
 
  6、如果table-row-group、table-header-group、table-footer-group元素的子元素不是table-row元素,則插入匿名table-row元素
 
  7、如果table-row元素的子元素不是table-cell元素,則插入匿名tabel-cell元素
 
 
 
 
 
表格層
   CSS定義了6個不同的層,對應表各個方面的樣式都在其各自的層上繪制。默認地,所有元素背景都是透明的,如果單元格、行、列等沒有自己的背景,則table元素的背景將透明這些內部元素可見。
 
 
 
  <演示框>點擊下列相應屬性值可進行演示
 
 
 
邊距設置
【<table>】
 
  若處于分隔邊框模型,margin和padding都可設置
 
  若處于合并邊框模型,只可設置margin
 
【<thead><tbody><tfoot><tr><col><colgroup>】
 
    margin和padding都不可設置
 
【<td><th>】
 
    不可設置margin,但可以設置padding
 
【<caption>】
 
    margin和padding都可設置 

如需轉載,請注明文章出處和來源網址:http://www.rs2pl.com/html/h60380.shtml

如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
CSS教程文章修訂日期:2018-08-14 17:37 原創:DIVCSS5
本文www.rs2pl.com DIVCSS5版權所有。

久久天天躁狠狠躁夜夜躁2020