HTML表格基礎詳解

       在現在 div 大行其道的時代，table 這個標簽似乎很少被人提及，到處都是 div+css 布局的書以及博客文章，但其實 table 以及連帶的其他表格標簽依然在網頁中占很重要的地位，特別是后台展示數據的時候表格運用是否熟練就顯得很重要，一個清爽簡約的表格能夠把繁雜的數據表現得很有條理，雖然 div 布局也可以做到，但是總沒有表格來得方便。平時也經常接觸到表格，現在總結一下表格的一些屬性和樣式，以及學習構思一些表格的樣式，以便以后不時之需。

一、標簽

<table> 定義 HTML 表格

<thead> 標簽定義表格的表頭

<tbody> 標簽表格主體（正文）

<tfoot> 標簽定義表格的頁腳（腳注或表注）

<tr> 元素定義表格行

<th> 元素定義表頭

<td> 元素定義表格單元

<caption> 元素定義表格標題，必須緊隨 table 標簽之后。只能對每個表格定義一個標題，默認居中與表格之上

<col> 標簽為表格中一個或多個列定義屬性值。

<colgroup> 標簽用於對表格中的列進行組合，以便對其進行格式化。

 

二、表格標簽及標簽屬性

（1）<table>

<table>    標簽屬性說實話個人覺得挺好用的，比如 align，width等，但是本着表現層與結構層的分離，現在w3c上已經不贊成使用了。

align：相當於浮動，用 css 的 float 代替

bgcolor：用 css 的background-color 代替

border：table 的 border 屬性是繼承到內部的 td 標簽的，相當於同時對 (selector)：table 和 (selector) table td 設置 css 的 border 屬性，但是當你設置大於1的 border 數值時，又只有 table 的 border 寬度會改變。默認的瀏覽器屬性包括：border-collapse: separate;border-spacing: 2px; 故默認添加后是雙邊border

cellpadding：規定單元邊沿與其內容之間的空白，其實是設置表哥內部 td 標簽的 padding 屬性，用 (selector) table td 設置 css 的 padding 屬性代替。

cellspacing：規定單元格之間的空間，用 (selector)：table 設置 css 的 padding 屬性代替。

frame：規定外側邊框的哪個部分是可見的，即設置表格 border，基本不會用這個屬性。

rules：規定內側邊框的哪個部分是可見的，同 frame，幾乎不會用到。

summary：規定表格內容的摘要，屏幕閱讀器可以利用該屬性，不會有其他視覺效果。

width：用 css 的 width 代替。

css 屬性

table-layout：automatic（default） | fixed | inherit（列寬度由單元格內容設定 | 列寬由表格寬度和列寬度設定 | 繼承父屬性）

需要注意的是，表格以及列設置的 width 屬性在 table-layout 為 automatic 時都是表現為 min-width，當 table-layout 的值為 fixed 時則表現為固定的 width 值。

當需要表格內容的寬度在控制范圍內，不會超出自己設置的范圍，則可以用 fixed 屬性值來設置這個屬性，下面舉個例子。

 

--------------------------------------------------------------舉個栗子--------------------------------------------------------------

HTML：

<table>
    <thead>
        <tr>
            <th>title</th>
            <th>title</th>
            <th>title</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>the</td>
            <td>testinglongstring</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>-</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>the</td>
            <td>third</td>
            <td>Row</td>
        </tr>
    </tbody>
</table>

CSS：

table{
    width: 300px;
    border:1px solid #000;
}
table td,table th{
    border:1px solid #000;
}

沒有顯式加 table-layout 這個屬性時是默認為 automatic 值，此時由於 testinglongstring 內容比較長，表格自動調整列的寬度，效果如下：

table 標簽加了 table-layout：fixed 屬性后，瀏覽器直接渲染表結構（相當於顯示沒有內容的表），太長的內容會覆蓋到其他表格，效果如下：

--------------------------------------------------------------吃完栗子--------------------------------------------------------------

 

而往往我們希望既保持我們要的列寬度，同時確保內容不會這樣覆蓋到其他表格單元單元（針對英文）。這里就要涉及到另外兩個 css 屬性了：

1、word-wrap：normal（default）| break-word（只在允許的斷字點換行 | 在長單詞或 URL 地址內部進行換行）

這里主要用到 break-word 屬性值。

2、work-break：normal（defaut）| break-all | keep-all（默認的換行規則 | 允許在單詞內換行 | 只能在半角空格或連字符處換行）

這里主要用到 break-all 屬性值。

用到的兩個 css 屬性的屬性值作用類似，但有些區別，break-word 只有在單個單詞都超過外圍寬度的時候才會斷單詞；break-all 則是把每個行填滿，然后行尾不管是單詞還是空格都斷為下一行，個人優選 word-wrap 屬性，可以減少斷單詞的幾率，畢竟不得已才斷單詞，斷了后會影響單詞內容表達。具體辨析可以看 《 你真的了解word-wrap和word-break的區別嗎？》講得比較詳細。

 

--------------------------------------------------------------舉個栗子--------------------------------------------------------------

沿用上例的 HTML 結構，舉 word-wrap 屬性的例子：

CSS：

table {
    width: 300px;
    border: 1px solid #000;
    table-layout: fixed;
    word-wrap:break-word;
}
table td,
table th {
    border: 1px solid #000;
}
.odd{
    width: 120px;
}

表現如下：

--------------------------------------------------------------吃完栗子--------------------------------------------------------------

 

（2）<thead>、<tbody>、<tfoot>

align：屬性規定內容的水平對齊方式，用 css 屬性 text-align 代替。

valign：( top|middle|bottom|baseline )，規定 tbody 元素中內容的垂直對齊方式，默認是 middle。相當於 css 的 vertical-align 屬性，這里 bottom 和 baseline 在 w3shcool 上還有一些 辨析，不過只是對於不同字號的英文內容來說有點用處。

還有 char，charoff 屬性幾乎是用不到的，所以不列舉了。

注意 ：

1、<thead>、<tfoot> 標簽內部必須擁有 <tr> 標簽；

2、<thead> 標簽不管放在 <table> 內的哪個位置，都會被定位到表格的頭部，同理 <tfoot> 會被定位到底部。另外，和我們的常識不同，<tfoot> 標簽是要放在 <tbody> 標簽之前的，結合官方文檔和我自己的理解，主要是因為 <thead> 和 <tfoot> 內的內容一般比較重要，這樣能保證在表現具有大量行內容的表格時能夠提前渲染 <tfoot>，讓用戶先看到。

3、<thead>、<tbody>、<tfoot> 的結束標簽為了精簡，均可以省略。

4、設置 <thead> 和 <tfoot> 的一個好處是，當打印很長的需要分頁的表格時，每一頁上都會有 <thead>、<tfoot> 的內容。

 

（3）tr

align，valign：同（2）

 

（4）td，th

abbr：規定單元格中內容的縮寫版本。不會在普通的 web 瀏覽器中造成任何視覺效果方面的變化。屏幕閱讀器可以利用該屬性。

headers：規定表頭與單元格相關聯。不會在普通瀏覽器中產生任何視覺變化。屏幕閱讀器可以利用該屬性。

scope：定義將表頭單元與數據單元相關聯的方法。不會在普通瀏覽器中產生任何視覺變化。屏幕閱讀器可以利用該屬性。

align，valign：同（2）。需要留意的是 th 默認是居中屬性的，而且 th 內的字體是加粗的。

nowrap：規定表格單元格中的內容不換行。用 white-space: nowrap 代替

colspan：規定單元格可橫跨的列數。比較常用，相當於 word 中的合並橫向的單元格。

rowspan：規定單元格可橫跨的行數。比較常用，相當於 word 中的合並垂直方向的單元格。

 

（5）caption

align：（top | bottom | left | right ），規定 caption 元素的對齊方式，默認居中。

align 的瀏覽器支持並不好，只有 top 和 bottom 屬性值支持是統一的，left 和 right 在不同瀏覽器中的表現也不一樣，所以這兩個屬性值當然不用，而 css 屬性 caption-side 剛好就只有 top 和 bottom，故完全可以用 css 屬性 caption-side 代替 align。至於要實現 left 和 right 的效果，給 caption 加 margin 屬性或者 padding 屬性或者用其他標簽實現都不難 。

c ss 屬性 

caption-side：top | bottom | inherit（表格標題定位在表格之上 | 表格標題定位在表格之下 | 繼承父屬性）

 

（6）col，colgroup

<colgroup> 標簽中的一些屬性在一些瀏覽器中的支持並不好，只有在一些老的瀏覽器中（IE7-等）才能表現那些屬性，具體原因可以 點此參考。

能夠用的屬性主要是以下三個：

span：規定列組應該橫跨的列數。默認一列，即對表格的一列設置樣式。

width：col 元素的寬度。

background：設置背景色，要通過 css 樣式來設置。

<col> 標簽需要包裹在 <colgroup> 內，就算沒有寫一般瀏覽器也會自動幫你加上。屬性和 <colgroup> 類似，增加了可以設置 css 的 border 屬性。個人認為不在 <colgroup> 標簽上設置屬性，而是用 <colgroup> 包裹 <col> 的寫法比較規范。

說到列，要重新提一下前面的 table-layout 屬性，下面舉例子說明 col 對這個屬性的影響。

 

--------------------------------------------------------------舉個栗子--------------------------------------------------------------

HTML：

<table>
    <colgroup>
        <col class="odd"></col>
        <col class="even"></col>
        <col class="odd"></col>
    </colgroup>
    <thead>
        <tr>
            <th>title</th>
            <th>title</th>
            <th>title</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>the</td>
            <td>testinglongstring</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>-</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>the</td>
            <td>third</td>
            <td>Row</td>
        </tr>
    </tbody>
</table>

CSS：

table {
    width: 300px;
    border: 1px solid #000;
}
table td,
table th {
    border: 1px solid #000;
}
.odd{
    width: 120px;
}

設置 120px 的列寬度后，中間列（.even）的寬度不夠，但是瀏覽器會幫你計算並為中間內容空出足夠寬度：

設置了 table-layout 屬性的 fixed 值后就完全按照自己的意思來渲染了：

--------------------------------------------------------------吃完栗子--------------------------------------------------------------

 

（7）border-collapse | border-spacing | empty-cells

這幾個 css 屬性，基本只會用在表格上。

border-collapse：separate（defaul）| collapse |  inherit （邊框會被分開 | 邊框會合並為一個單一的邊框 | 繼承父屬性）

border-spacing：length length（定義一個 length 參數，那么定義的是水平和垂直間距。定義兩個 length 參數，那么第一個設置水平間距，而第二個設置垂直間距）

empty-cells：show（defaul）| hide | inherit （在空單元格周圍繪制邊框 | 不繪制 | 繼承父屬性）

注意：

border-spacing 和 empty-cells 屬性只有在 border-collapse 為 separate 是才有效的。

 

--------------------------------------------------------------舉個栗子--------------------------------------------------------------

HTML：

<table>
    <tr>
        <td>Row</td>
        <td>One</td>
    </tr>
    <tr>
        <td>Row</td>
        <td></td>
    </tr>
</table>

CSS：

table {
    border-collapse: separate;
    border-spacing: 5px 20px;
    empty-cells: hide;
    border:1px solid #000;
}
td{
    border:1px solid #000;
}

表現如下：

--------------------------------------------------------------吃完栗子--------------------------------------------------------------

 

三、表格 css 樣式

（1）單線邊框

HTML：

<table>
    <tr>
        <td>Row</td>
        <td>One</td>
    </tr>
    <tr>
        <td>Row</td>
        <td>Two</td>
    </tr>
</table>

（方法一） CSS：

table {
    width: 200px;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    border-collapse: collapse;
}
td {
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}

（方法二）CSS：

table {
    width: 200px;
    border-collapse: collapse;
}
td {
    border: 1px solid #000;
}

效果如下：

 

（2）列和行的高亮

在復雜的多行多列的表格中，鼠標停留的行或列高亮能夠帶來更優的體驗，下面講講這方面的應用。

1、行的高亮

行的高亮實現比較簡單，可以使用 css 的 :hover 偽類實現，即 tr：hover 即可實現，后面的表格例子會出現。

2、列的高亮

列的高亮用 css 似乎沒有什么實現的方法，故還是用 JavaScript 實現。

<1>原生 JavaScript

原生 JavaScript 實現比較麻煩，  A Complete Guide to the Table Element 文章介紹了一種原生 js 代碼的寫法。不過代碼的兼容性不是很好，IE10 以下的版本就無法支持了（替換 addClass() 和 removeClass() 方法后在 IE9 下也可以用）。下面是我自己寫的原生 JavaScript 實現方法，不過也只能支持 IE9+，IE8 及以下的 IE 瀏覽器要加兼容性代碼：

JavaScript：

//#table可以是table的id，也可以是tbody的id
var element = document.getElementById("table");
var row_col = element.rows;
window.onload = function() {
    for (var i = 0; i < row_col.length; i++) {
        var cell_col = row_col[i].cells;
        for (var j = 0; j < cell_col.length; j++) {
            cell_col[j].addEventListener('mouseover', function() {
                cellIndex(this, true);
            }, false);
            cell_col[j].addEventListener('mouseout', function() {
                cellIndex(this, false);
            }, false);
        }
    }
}
function cellIndex(element, bool) {
    for (var i = 0; i < row_col.length; i++) {
        var cell_col = row_col[i].cells;
        for (var j = 0; j < cell_col.length; j++) {
            if (element == cell_col[j]) {
                highLight(j, bool);
            }
        }
    }
}
function highLight(index, bool) {
    for (var i = 0; i < row_col.length; i++) {
        var cell_col = row_col[i].cells;
        if (bool) {
            //列高亮，#eee為高亮顏色
            cell_col[index].style.backgroundColor = "#eee";
        } else {
            //移除列高亮，#fff為原來顏色
            cell_col[index].style.backgroundColor = "#fff";
        }
    }
}

<2>引用Jquery

使用 Jquery 框架實現方便很多，而且能夠兼容 IE5.5+。好久沒寫 Jquery，選擇器不是很熟，所以參考了一下  html5及css3對table表格高亮當前行列的多瀏覽器兼容寫法 中的代碼，其中 high_light css 類中定義高亮的顏色：

$(document).ready(
    function() {
        $('table td').hover(
            function() {
                //獲取鼠標所在的 td 在所在行中的 index 
                var td_index = $(this).parent().children('td').index($(this)[0]);
                $("table tr:not(:has(th))").each( 
                    function(i){ 
                        $(this).children("td").eq(td_index).addClass('high_light'); 
                    } 
                ); 
            },
            function() {
                var td_index = $(this).parent().children('td').index($(this)[0]); 
                $("table tr:not(:has(th))").each( 
                    function(i){
                        $(this).children("td").eq(td_index).removeClass('high_light');
                    } 
                ); 
            }
        );
    }
);

 

四、清爽簡約的表格

下面給出一些簡約的實用的表格樣式，留作備用。

 

（1）不帶豎線的表格

HTML：

<table>
    <thead>
        <tr>
            <th>title</th>
            <th>title</th>
            <th>title</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>the</td>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>-</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>the</td>
            <td>third</td>
            <td>Row</td>
        </tr>
    </tbody>
</table>

CSS：

table {
    width: 300px;
    line-height: 2em;
    font-family: Arial;
    border-collapse: collapse;
}
thead tr {
    color: #ae1212;
    border-bottom: 2px solid #980000;
}
tbody tr {
    color: #bd3030;
    font-size: 0.8em;
    border-bottom: 1px solid #ffaeae;
}
th {
    font-weight: normal;
    text-align: left;
}
th,td {
    padding: 0 10px;
}

效果如下：

 

 

（2）不帶橫線的表格

 HTML：

< 沿用例 1）的 HTML >

CSS：

table {
    width: 300px;
    line-height: 2em;
    font-family: Arial;
    text-align: center;
    border-collapse: collapse;
    border-top: 2px solid #980000;
    border-bottom: 2px solid #980000;
}
thead tr {
    color: #ae1212;
}
tbody tr {
    color: #bd3030;
    font-size: 0.8em;
}
th {
    font-weight: normal;
}
th,td {
    border-left: 1px solid #ffaeae;
    border-right: 1px solid #ffaeae;
}

效果如下：

 

（3）帶背景表格

1、HTML：

< 沿用例 1）的 HTML >

CSS：

table {
    width: 300px;
    line-height: 2em;
    font-family: Arial;
    border-collapse: collapse;
}
thead tr {
    color: #902d2d;
    background-color: #e09999;
    border-bottom: 1px solid #fff;
}
tbody tr {
    color: #ac5959;
    font-size: 0.8em;
    border-bottom: 1px solid #fff;
    background-color: #ffe7e7;
}
tbody tr:hover {
    background-color: #ffd4d4;
}
th {
    font-weight: normal;
    text-align: left;
}
th,td {
    padding: 0 10px;
}

效果如下：

 

2、HTML：

< 沿用例 1）的 HTML >

CSS：

table {
    width: 300px;
    line-height: 2em;
    font-family: Arial;
    border-collapse: collapse;
}
th,td {
    padding: 0 10px;
}
th {
    color: #a03f3f;
    font-weight: normal;
    text-align: left;
    background-color: #f2caca;
    border: 1px solid #fff;
}
td{
    color: #c48080;
    font-size: 0.8em;
    background-color: #fff3f3;
    border-top: 1px solid #ffdede;
    border-left: 1px solid #ffdede;
}
tbody tr:hover th{
    background-color: #ffdede;
    border-right:1px solid #ffdede;
    color:#9a4242;
}
tbody tr:hover td{
    background-color: #ffdede;
    border-left:1px solid #ffdede;
    border-top: 1px solid #ffdede;
    color:#9a4242;
}

效果如下：

 

 

3、HTML：

<table>
    <colgroup>
        <col class="odd"></col>
        <col class="even"></col>
        <col class="odd"></col>
        <col class="even"></col>
    </colgroup>
    <thead>
        <tr>
            <th>title</th>
            <th class="even_th">title</th>
            <th>title</th>
            <th class="even_th">title</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>the</td>
            <td>the</td>
            <td>the</td>
            <td>the</td>
        </tr>
        <tr>
            <td>first</td>
            <td>-</td>
            <td>third</td>
            <td>fourth</td>
        </tr>
        <tr>
            <td>Row</td>
            <td>Row</td>
            <td>Row</td>
            <td>Row</td>
        </tr>
    </tbody>
</table>

CSS：

table {
    width: 300px;
    line-height: 2em;
    font-family: Arial;
    border-collapse: collapse;
    text-align: center;
}
th,td {
    padding: 0 10px;
}
th {
    color: #a03f3f;
    font-weight: normal;
}
td{
    color: #c48080;
    font-size: 0.8em;
}
thead th{
    background-color: #fbdcdc;
}
.odd{
    background-color: #fff3f3;
}
.even{
    border-left:1px solid #fff;
    border-right:1px solid #fff;
    background-color: #ffe9e9;
}
.even_th{
    background-color: #eec4c4; 
}

效果如下：

 

4、適用於表現簡單后台數據的表格

HTML：

<table>
    <tr>
        <td>the</td>
        <td>the</td>
        <td>the</td>
        <td>the</td>
    </tr>
    <tr>
        <td>first</td>
        <td>-</td>
        <td>third</td>
        <td>fourth</td>
    </tr>
    <tr>
        <td>Row</td>
        <td>Row</td>
        <td>Row</td>
        <td>Row</td>
    </tr>
</table>

CSS：

table {
    width: 300px;
    line-height: 2em;
    font-family: Arial;
    border-width: 1px;
    border-style: solid;
    border-color: #eec4c4 #eec4c4 #fff #fff;
    text-shadow: 0 1px 0 #FFF;
    border-collapse: separate;
    border-spacing: 0;
    background-color: #ffe9e9;
}
th {
    color: #a03f3f;
    font-weight: normal;
    text-align: left;
}
td {
    color: #c48080;
    font-size: 0.8em;
}
th,td {
    padding: 0 10px;
    border-width: 1px;
    border-style: solid;
    border-color: #fff #fff #eec4c4 #eec4c4;
}

效果如下：

 

這里也只是列舉比較基本的表格實例，加圓角、背景圖等等在不同情況下可以獲得更好的視覺效果，以后如果有看到更好的例子會繼續補充。表格在現在的使用中已不像以前那么廣了，基本只有在表現數據的時候才會用到，所以我並沒有太深入地去了解表格的表現原理， 這里涉及 的知識都比較基礎，而且只是冰山一角， 想要進一步了解的可以去看看 HTML 4.01 和 CSS 2.01關於 table 的文檔（文末有附鏈接）。寫這篇博文的時候也發現了其他一些有趣的關於表格的應用與拓展，比如響應式的表格、表格搜索、表格排序等等，再加進來博文就太長了（為自己太懶找個借口......），等有空的時候再來了解總結一下吧。

 

 

本文來源：JuFoFu

本文地址：http://www.cnblogs.com/JuFoFu/p/5140302.html

 

 

水平有限，錯誤歡迎指正。原創博文，轉載請注明出處。

 

參考文檔：

HTML4.01 .  http://www.w3.org/TR/html401/struct/tables.html

CSS2.1 .   Tables

 

參考文章：

R. Christie .  Top 10 CSS Table Designs

W3Cfuns .  參透Html表格

Chris Coyier .  A Complete Guide to the Table Element（譯文：白牙 .  表格元素的 完全指南）

漫游 .  html5及css3對table表格高亮當前行列的多瀏覽器兼容寫法

無雙 .  你真的了解word-wrap和word-break的區別嗎？