<table>元素在HTML中用于呈現(xiàn)表格數(shù)據(jù)。你可以把它作為一個描述和展示可用于電子表格的數(shù)據(jù)的方法。其本質(zhì)上由這兩個東西組成：行和列。在這篇文章中我們會探索應(yīng)該如何使用它們，什么時候使用，和其他所有你需要知道的東西。

一個非?；A(chǔ)的例子

下面是一個非常簡單的表格數(shù)據(jù)例子：

這是一個跨多軸的數(shù)據(jù)。想象下，通過你得手指劃過某一行來了解某個人的相關(guān)信息?；蛘邚纳现料聛砀惺苣硞€數(shù)據(jù)點的模式和變化。

表頭和表體

上面這個基礎(chǔ)例子中我們沒有做的一件事是沒有語義地指出第一行是該表格的頭部。我們本應(yīng)該這么做。整個第一行的部分沒有包含數(shù)據(jù)，它只是每個列的標題。因此，我們可以<thead>元素來完成這件事情，它會包裹第一個<tr>元素(它會包裹所有的行所需要的頭部信息)

HTML代碼如下所示：

當你使用了<thead>元素后，<table>元素中不能有直接的<tr>子元素，所有的行必須存在于<thead>，<tbody>和<tfoot>里面。要注意的是我們會把所有的數(shù)據(jù)行包含在<tbody>里面。

表尾

連同<thead>和<tbody>一起的還有<tfoot>,用于包裹指出表格頁腳的行。和<thead>一樣,它只是語義地指出了輔助信息，沒包含別的數(shù)據(jù)。

<tfoot>獨一無二的一點是它在HTML中的位置，它緊跟著<thead>并位于<tbody>的前面！你可能會認為它是table標簽結(jié)束前的最后一個元素，但情況并不是這樣。因為頁腳可能包含了用于理解表格的必要信息，因為在資源序列中它應(yīng)當排在在數(shù)據(jù)的前面。

盡管首先在資源序列中出現(xiàn)，<tfoot>確實渲染在了表格的底部，這使其成為一個不同尋常的HTML元素。

舉個例子，它可以用于這樣的場景，在一個很長或很高的表格中，<tfoot>重復(fù)了表頭的信息，使得讀者更容易地在底部看到列表的標題信息，而不用回到頭部查看。但你并沒有必要這樣來使用它。

在一些元素位置根據(jù)需要從上至下跳動的布局中，<tfoot>是個不錯的技巧。舉個例子，雖然一個導(dǎo)航在屏幕的底部，但在HTML源碼中導(dǎo)航應(yīng)該在頂部。

單元格：td和th

在表格中一個獨立的單元格總是<td>或<th>兩者之一，只要你愿意，你可以把任何東西放進表格的單元格中，但要使這些元素成為表格中的單元格元素。<th>是“表格的標題”，<td>是“表格的數(shù)據(jù)”。

使用我們現(xiàn)有的簡單例子，頂行是所有的頭部信息。它們是數(shù)據(jù)的標題而不是數(shù)據(jù)，而剩下的所有行都為數(shù)據(jù)。如下：

<th>元素并不是必須放在<thead>元素當中。它們簡單地指出了頭部信息。因此它們也能用于<tbody>元素的第一行當中。我們會在后面給出這樣的一個例子。

基本樣式

你看到的大多數(shù)表格都用顏色和線條來區(qū)別表格的不同部分。邊框是非常常見的。默認的，所有的單元格相互之間都有2px的空隙（通過用戶代理樣式表給出）

注意第一行和余下部分輕微的額外差距。這是默認的應(yīng)用在和中的 border-spacing 導(dǎo)致他們產(chǎn)生了一點間隔。這不是外邊距，他們沒有折疊。你可以像這樣來控制間隔：

table {
    border-spacing: 0.5rem;
}

但更常見的做法是移除這些間隔，這個屬性能夠完全忽略和折疊這些間隔，像如下設(shè)置：

table {
    border-collapse: collapse;
}

小小的內(nèi)邊距，邊框并使<th>元素左對齊就能樣式化一個簡單的表格：

合并單元格

有兩個能應(yīng)用在任何單元格中的重要的屬性（<td>或<th>）：colspan 和 rowspan 。他們接受任何大于等于2的正整數(shù)。如果一個 td 元素的 colspan 值為2（<td colspan="2">），它將仍然是單獨的單元格，但它會在一行中水平的占據(jù)兩個單元格的空間。rowspan 也一樣，但它作用于垂直方向。

在你開始準備使用合并單元格的工作前你必須先進行一點心算。合并列相對比較簡單。所有的單元格在其數(shù)量值上等價于1，如果它具有 colspan 屬性，則等價于更多。合計一行中的每個單元格的值則可以得到表格行的最終值。其他的每一行的值都必須精確地等于該值，否則你將得到一個非矩形的尷尬的表格布局。（最長的表格行將會突出）

合并行是相似的，只是它難度要稍大一點并需要思維跳躍。因為列并不像行那樣分組。如果一個表格元素具有 rowspan 屬性，它會垂直跨越兩行。這意味著它代表的單元格數(shù)得到了+1。

在你得腦袋中想象出它們可能有點難度，但我們是開發(fā)者，相信我們能做到這點。=）

實際上這些屬性經(jīng)常僅僅是簡單地被應(yīng)用，例如合并幾個相關(guān)聯(lián)的表頭：

寬度自適應(yīng)... 或包含在容器中... 或撐破容器

表格元素在其自身應(yīng)該占據(jù)多寬的問題上是不同尋常的，它表現(xiàn)地像一個塊級元素（如：<div>）,如果你把一個表格放在另一個表格后面，每一個都會分解到它自己的行當中。但表格的實際寬度卻僅按照它所需要的給出。

如果在表格最寬的行中文本的寬度為100px寬，則這個表格寬度為100px。如果文本的數(shù)量寬度比表格的外容器要寬，則文本將會被包裹（通過折行）起來。

然而如果文本被設(shè)置為非包裹(例如： white-space: nowrap;)，表格可能會撐破容器。因為單元格也是非包裹的，所以如果內(nèi)容太多，表格則會撐破容器。

兩軸表格

有時候表格具有兩個軸是有意義的。像一個交叉引用的情況。下面以一個乘法表為例子：

在這種情況我可能會省略<thead>標簽即使第一行全是表格頭部信息。因為這個頭部并不顯得十分重要，將它單獨分行放在<thead>中會讓人感到有點奇怪。因此只要讓第一行的所有列都使用<th>標簽并讓余下的行的第一列使用<th>標簽就可以了。

什么時候使用表格

現(xiàn)在讓我們緩一緩并討論一下應(yīng)該何時使用表格，或許你已經(jīng)聽過這類型的建議：表格是為列表式的數(shù)據(jù)準備的（請看本文的第一個句子）。

把什么東西放在表格當中是比較合適的？這里列出了一些：一個計劃表/價格表/特性比價，保齡球分數(shù)，網(wǎng)格式的員工信息，財務(wù)數(shù)據(jù)，日歷，營養(yǎng)成分表信息版，邏輯難題解算器，等等。

你可能會聽說過：表格是非語義的。這并不正確 - 它們語義地指出了表格數(shù)據(jù)，當展示數(shù)據(jù)時表格是個很好的選擇。

什么時候不使用表格

表格并不適用于布局。這看起來好像有點奇怪。那讓我們看一下為何表格的特性使它們似乎適合用于布局：易于控制，邏輯嚴密，具有可預(yù)見性，并且一點也不脆弱。

但當使用表格來布局時有一些嚴重的問題。首先，HTML標簽意味著某些東西。像我們前面提到的，table 元素語義地描述了列表式數(shù)據(jù)。把它們用于其他的任何東西都是違反語義化的職責(zé)的。雖然你在郵件中使用并不會受到懲罰，但在HTML文檔中使用 table 的獲益并沒有這么大。

但談?wù)撜Z義化有時候并不是那么簡單（相關(guān)資料：1，2，3，4，5），因此我們來談?wù)撘恍┧腥硕蓟就獾臇|西（即使我們沒有像我們想達到地那么好）：網(wǎng)站應(yīng)該是可訪問的。其中一部分的可訪問性是面向屏幕讀者而言。屏幕讀者是從上至下從左至右地閱讀表格的。因為你要根據(jù)表格的結(jié)構(gòu)來決定如何呈現(xiàn)網(wǎng)站內(nèi)容，也就意味著由視覺的選擇而不是可訪問性的選擇決定。

說到資源順序，它的影響超過了可訪問性。想象一個“側(cè)邊欄在左邊”的布局，一個表格會要求表格應(yīng)該首先出現(xiàn)在資源序列中，這同時也不利于可訪問性，也可能不利于SEO，這潛在地決定了你得輔助內(nèi)容在你得主要內(nèi)容之上。

你能通過在表格中使用語義化的標簽來解決SEO的問題嗎？這是有可能的，但你現(xiàn)在在使用雙重HTML。如果你真的需要表格的布局能力但又想使用語義標簽，那請看下一部分。如果你在使用 table 布局時不知道該如何達到語義化，請在表格中使用ARIArole="presentation"表明它的含義。

當我在2013下半年后寫這篇文章時，表格已經(jīng)變得不那么流行并且在布局方案中也沒有那么大的吸引力了。我們看到現(xiàn)在大量的人更多地使用固定或絕對定位，這在表格當中是無法做到的。我們看到 flexbox 在主流可用性的邊緣成為極好的一個選擇。我們看到網(wǎng)格布局開始發(fā)展起來。我們看到 inline-block 強大的使用方法。我們看到過去那浮動的脆弱性已經(jīng)逐漸消失。

現(xiàn)在你已經(jīng)很少看到現(xiàn)代網(wǎng)站使用表格來布局了，除了HTML郵件還在堅持以外。呈現(xiàn)郵件的范圍是非常廣闊的。郵件出現(xiàn)在互聯(lián)網(wǎng)的任何地方和移動端的原生應(yīng)用以及老式和新式系統(tǒng)的桌面端。你可以對郵件做些進步性的優(yōu)化，但大家一致認為它最安全的布局方式是使用表格。一個有力的證據(jù)是：主要的郵件推送服務(wù)器全都用表格來搭建模板。

使語義元素表現(xiàn)地像一個表格

CSS中有一個屬性能讓任何元素表現(xiàn)地像一個表格元素。你需要從本質(zhì)上改變它們因為你需要的是個表格，并且它會從屬像表格一樣的資源順序的依賴關(guān)系。我不是在做什么無聊的事，因為它有時候是有很大作用的。如果這種布局風(fēng)格解決了問題并不會再順序上造成什么影響，你應(yīng)該使用它。

請避免使用內(nèi)聯(lián)樣式，但為了便于理解，這里就破例用了：

<section style="display: table;">
  <header style="display: table-row;">
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
  </header>
  <div style="display: table-row;">
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
  </div>
</section>

這兒一個方便的技巧是，如果你不希望的話，你甚至不需要表格行元素。這樣的話，所有的display: table-cell元素會作為display: table;元素的子元素并且他們都在同一個表格行當中。

你總是需要改變元素的 display 屬性來得到表格風(fēng)格的行為，這里是它們的相關(guān)值：

display: table                /* <table>     */
display: table-cell           /* <td>        */
display: table-row            /* <tr>        */
display: table-column         /* <col>       */
display: table-column-group   /* <colgroup>  */
display: table-footer-group   /* <tfoot>     */
display: table-header-group   /* <thead>     */

注意這里沒有<th>的值，這是因為語義的關(guān)系，<th>和<td>的表現(xiàn)實際上是相同的，所以沒必要多增加這樣一個值。

這里還有一個相當有趣的值display: inline-table;。記得我們前面談?wù)撨^的怪異的表格元素的寬度。表格是自適應(yīng)寬度的。它就像 inline-block 元素一樣。顧名思義，這個值使得它們成為一個 inline-block 元素而不會產(chǎn)生換行。

如果你想要了解更多的語義元素和表格風(fēng)格布局，請查看Everything You Know About CSS Is Wrong!

我從來沒有認可過這個標題因為該書建議過除了表格風(fēng)格的布局其他的布局方法都是錯誤的。但正如我曾說過的，這種方法是非常有用的，它能在CSS中出現(xiàn)我感到非常開心。只是要意識到無論你使用什么樣的元素來創(chuàng)建一個表格式的布局，它們都遵循一個相同的東西（資源順序依賴關(guān)系）。

所有的表格相關(guān)元素

有幾個元素在前面我們是沒有提及的，讓我們看看HTML表格的相關(guān)元素。這里我們也用一個表格來呈現(xiàn)它們：

所有的表格相關(guān)屬性

只有這么一點表格屬性實在令人吃驚。當然你可以使用類和ID來使用你所需要的全局屬性。以前表格擁有相當多的屬性，但大多數(shù)都已經(jīng)被廢棄了。

棄用的屬性

不要使用它們的任何一個，它們已經(jīng)被棄用了。盡管它們可能還可以起作用，但未來它們有可能會失效。

表格的堆疊

表格元素有一個隱式的垂直堆疊方式，和HTML結(jié)構(gòu)中父元素和子元素的關(guān)系相同。這個理解在表格中是相當重要的，因為在應(yīng)用 background 之類的屬性時，我們可以通過在表格或者表格行應(yīng)用一種背景，再在單元格應(yīng)用另一種背景來覆蓋它。

這就是它的外貌（使用firefox瀏覽器開發(fā)者工具的3D特性呈現(xiàn)）：

表格的重要樣式規(guī)則

在表格元素上你可以使用大多數(shù)的CSS屬性，font-family在表格元素上的表現(xiàn)和在其他元素時一樣，舉個例子。如果我們層疊地應(yīng)用此屬性，在 table 元素中使用一種font-family，在 table-cell 元素中使用另一種font-family，文字會使用后一種樣式，因為table-cell才是文字的最近父容器。

下面這些屬性一些是特別地只能應(yīng)用與表格元素的，一些則是在表格元素中有不同的特性。

以上的屬性并不是很詳盡，對表格來說還有一些屬性的表現(xiàn)是怪異的，舉個例子，你不能對單元格進行相對定位從而改變它的位置或者絕定位它的子元素。但可以通過別的辦法來實現(xiàn)。

如果你想到了更多的有關(guān)表格的怪異現(xiàn)象，可以在下方評論區(qū)跟大家分享一下。

默認樣式/User Agent樣式表

Webkit內(nèi)核的默認樣式：

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray
}

thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit
}

tfoot {
    display: table-footer-group;
    vertical-align: middle;
    border-color: inherit
}

table > tr {
    vertical-align: middle;
}

col {
    display: table-column
}

colgroup {
    display: table-column-group
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit
}

td, th {
    display: table-cell;
    vertical-align: inherit
}

th {
    font-weight: bold
}

caption {
    display: table-caption;
    text-align: -webkit-center
}

我在已經(jīng)更換為Blink內(nèi)核的Chrome瀏覽器的開發(fā)者工具中檢查了這里面的每個元素，它們?nèi)匀皇窍嗤摹?

有意思的是，在<th>標簽中的文本默認是居中的（text-align: center;）。但這并沒有被聲明在UA樣式表中。雖然并不是什么大不了的事情，但這讓人感到有點神秘，讓你還想知道更多在渲染的時候發(fā)生的其他神秘東西。

UA樣式表在不同的瀏覽器中是各不相同的。舉個例子，在firefox瀏覽器中(此處是 3.6的 UA 樣式表, 但在v23里面也是正確的)單元格具有以下屬性：

td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}

但在WebKit中，這1px的內(nèi)邊距是不存在的。雖然沒有造成多大的區(qū)別，但它們確實是不一樣。這就是CSS Reset(或者其他相似的東西)的作用：去除瀏覽器造成的差異。因此來讓我們看看這個東西吧。

重置默認的表格樣式

世界上最流行的CSS reset叫做 Meyer Reset，對表格做了如下設(shè)置：

table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

它的做法和 HTML5 Reset 以及 HTML5 (Doctor) Reset Stylesheet 是相同的。

這還有一個可供選擇的 CSS resets，Normalize.css 。它的重置的原理有一點兒不同。它沒有將所有的樣式重置為0，而是設(shè)置一些合理的不一致的樣式。我對使用 Normalize.css 的建議是：不要移除里面的任何東西。但可以自由地修改它們。

Normalize 對表格只做了如下樣式設(shè)置:

table {
  border-collapse: collapse;
  border-spacing: 0;
}

我好像需要更深入地研究，因為我覺得上面的樣式有點不尋常......

1. 我很喜歡使用border-collapse: collapse，因為單元格之間的空隙會讓人感到有點尷尬，但我知道在所有的瀏覽器中都是如此的border-collapse: separate;，所以它并不需要被歸一化。
2. 如果border-collapse的值是collapse，那么border-spacing是無關(guān)緊要的。
3. 單元格元素時需要進行歸一化的（例如在firefox和chrome中的padding是不同的），但這里卻沒有這么做。

這些東西不會有太大影響，也不必糾結(jié)。

對我來說，通常我會對表格進行下面的重置：

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 0.25rem;
  text-align: left;
  border: 1px solid #ccc;
}

“隱含”元素和未關(guān)閉的標簽

看看下面丑陋的HTML：

<table>
  <col>
  <tr>
    <td>Cell
</table>

雖然看起來有點怪異，但它是起作用的。為什么會這樣？

• <col>標簽是屬于那種無內(nèi)容的不需要閉合的標簽，類似<br>/<br />
• <td>元素在這些情況中是無需閉合的：“如果<td>元素后面沒有更多的<td>或<th>元素或者在它父元素中沒有更多的內(nèi)容，閉合標簽是可以省略的?！?
• 缺少的</tr>標簽的原理也是相同的：“如果<tr>元素后面沒有緊跟著一個<tr>元素或者如果它父元素組(<thead>,<tbody>或者<tfoot>)沒有更多的內(nèi)容，結(jié)束標簽是可以省略的?！?

如果我們檢查瀏覽器對表格的渲染，我們可以看到那些缺少了閉合標簽的標簽又重新?lián)碛辛碎]合標簽。這是瀏覽器自動為我們添加的。并且里面還增加了一些新的元素。

要注意到的是，<col>元素被一個自動添加的<colgroup>元素所包裹。

甚至如果我們這樣做：

<table>
  <col>
  <colgroup>
    <col>
  </colgroup>
  <tr>
    <td>Cell
    <td>Cell
</table>

然后：

colgroup:first-child {
  background: red;
}

你可能會認為第二個單元格會變成紅色，而不是第一個。因為這里的“第一個” colgroup 僅會影響第二個單元格。但在渲染的時候卻發(fā)現(xiàn)，兩列都被包裹在 colgroup 當中，因此CSS選擇器會選擇第一個。

<tbody>元素也是隱含的。如果你不使用任何的 tbody，thead 或 tfoot，那么整個表格的內(nèi)容都會被包裹在 tbody 當中（實際上被包裹的只有表格行和其子元素， col 和 colgroup 并不會被包含）。如果你使用 thead 那么整個表格會包裹在它里面直到找到 tbody （但在我的測試下并不是這樣子，thead并不會包含任何元素，不知道是否作者筆誤）,然后它會自動關(guān)閉 thead 標簽。

你可以在CSS選擇器中使用這些隱含的元素即使你沒有將它寫在HTML當中。但我并不建議這樣做，因為這樣的HTML是相當丑陋和讓人迷惑的。通常也是不建議使用標簽選擇器進行樣式設(shè)置。

使表格變?yōu)榉潜砀裨?

在一些情況下你可能會需要強制讓表格不應(yīng)用它的表格形式的布局行為而更像一些其他的規(guī)則元素。

這只是個通過改寫單元格的 display 屬性來實現(xiàn)的技巧：

th, td {
  display: inline;
}

我們可以相當快速地去表格化一個表格：

為了安全起見，我對所有表格相關(guān)元素進行了重置。因為這個我會知道這下父元素不會對我的測試造成什么影響了。

table, thead, tbody, tfoot, tr, td, th, caption {
  display: block;
}

這在響應(yīng)式布局中相當?shù)赜杏?，因為傳統(tǒng)的表格布局從大屏幕轉(zhuǎn)移到小屏幕時需要做顯著的改變以保持布局的完整。

表格可訪問性

我們已經(jīng)談?wù)撨^使用表格來布局以及表格的可訪問性了。但假設(shè)表格已經(jīng)被正確地用于表格數(shù)據(jù)了，仍然有許多值得關(guān)注的可訪問性問題。

這里有幾篇很好的相關(guān)文章：

• WebAIM: 創(chuàng)建可訪問的表格
• Portland Community College: 對屏幕讀者而言的優(yōu)秀的和劣質(zhì)的表格布局例子
• Web Usability: 易于訪問的表格數(shù)據(jù)

斑馬條紋表格

如果你不為表格單元設(shè)置背景顏色，你可以為它們的所屬的表格行設(shè)置背景色，所以最簡單地，你可以這樣做：

tbody tr:nth-child(odd) {
  background: #eee;
}

我們在選擇器的 tr 前面增加了 tbody，因為你不太會希望為表格的 header 和 footer 中的表格行添加條紋。你也可以改變偶數(shù)行的背景顏色來突出它們，如果你想的話。

如果你想要支持那些不支持 :nth-child() 的瀏覽器（相當該死），你可以使用 JQuery 來實現(xiàn)。

調(diào)查似乎顯示添加斑馬條紋是個不錯的注意。

高亮行與列

特別地高亮某一行是相當簡單的，你只需要為該行添加一個類來指定它就可以了：

<tr class="highlight">
  ...
</tr>

列的高亮有點兒棘手，一個可行的辦法是使用<col>元素，它可以讓我們?yōu)槌霈F(xiàn)在那一列中的表格設(shè)置屬性。這可能會讓你有點迷糊，因為受到影響的表格并不是<col>實際的后代元素。

一個擁有4個列的表格在每一行都會有4個<col>元素：

<table>
  <col>
  <col>
  <col>
  <col>

  <thead>
     ...

</table>

然后你可以高亮特定的一列，如：

col:nth-child(3) {
  background: yellow; 
}

然而很少人會這樣使用。如果你為某一行或某個單元格設(shè)置背景色，它總是會覆蓋如上設(shè)置的某一列背景色。

你可能最好能為指定的某列的每一個單元格設(shè)置一個類，如：

td:nth-child(2),
th:nth-child(2){
  background: yellow;
}

高亮鼠標所在的行/列/單元格

單元格的高亮是非常簡單的，你可以通過下面的CSS設(shè)置：

td:hover { /* th:hover also if you wish */
  background: yellow;
}

行的高亮也相當簡單。你可以設(shè)置鼠標所在的表格行的背景色，這樣只要鼠標經(jīng)過背景色便會改變，但前提是你不設(shè)置單元格的背景色。

tbody tr:hover {
  background: yellow;
}

如果你設(shè)置了單元格的背景色，你也可以通過code>tr:hover td, tr:hover th { }來達到同樣的效果，也還是相當簡單的。

列的高亮有點兒麻煩，你不能使用col:hover來實現(xiàn)，因為這個列元素并不是實際的占據(jù)了像素空間的元素，因此鼠標也無法懸浮到該元素上。唯一的方法就是通過Javascript來實現(xiàn)。

它的工作方式如下：

1. 得到一個所有單元格的集合。
2. 綁定 mouseover 和 mouseout 事件到每一個單元格元素。
3. 當 mouseover 事件觸發(fā)時，得到單元格在該行中的位置。
4. 遍歷所有的行，并為每一行的那個位置的單元格添加一個高亮類。
5. 當 mouseout 事件觸發(fā)時，移除所有單元格的高亮類。

下面我在一個例子中結(jié)合使用了行和列的高亮，我使用jQuery使JS代碼減少到12行（原生JS太過費勁）。

但實現(xiàn)的原理是相同的，只不過使用jQuery可以更快地得到元素的集合，并能快速的得到單元格在行中所處的位置。

樣式美化后的表格

一些深度,視覺上不同的標題,和一個終端匹配的標題。

當表格被鼠標懸浮時，只有當前高亮行的文本時保持黑色的，其他行的文本顏色淡化處理。另外記住一點：表格自身設(shè)置圓角時需要設(shè)置border-collapse: separate;

這里是另外一個在non-hovered行進行模糊處理的例子：

Twitter Bootstrap 的表格樣式非常簡單：

這一個，作為獎勵，還具有鍵盤控制：

我一直努力保持收集精心設(shè)計的表格的習(xí)慣以便作為參考。因此如果你發(fā)現(xiàn)了任何精美的表格，請與我分享。Hong Kiat 也有一個精美表格集合。

表格搜索

雖然表格的排列相當困難，但表格的搜索卻非常容易。增加一個搜索輸入，如果那里的值匹配到了任意一行的文本，則顯示該行，并隱藏其他所有的行。使用jQuery來實現(xiàn)就像下面這么簡單：

var allRows = $("tr");
$("input#search").on("keydown keyup", function() {
  allRows.hide();
  $("tr:contains('" + $(this).val() + "')").show();
});

這是使用正則表達式來實現(xiàn)的版本：

這是原生JS實現(xiàn)的版本：

表格在流體/響應(yīng)式設(shè)計中會有點難以處理

我過去已經(jīng)寫過這方面的文章，并且我認為這個圖形能讓你了解到數(shù)據(jù)表在小屏幕中的體驗是怎樣的。

我最終對過去的各式各樣的解決方案做了一個綜述。

真正快速的方法：

• 將行變成塊（1）（2）
• FooTable - 一個通過切換圖標來隱藏行和使數(shù)據(jù)可用的jQuery插件
• 將數(shù)據(jù)轉(zhuǎn)換成圖表
• 通過隱藏列來節(jié)省空間并允許用戶切換那些隱藏的列
• 壓縮單元格并讓它們被包裹
• 固定表頭部分并使數(shù)據(jù)區(qū)的內(nèi)容可滾動（1）（2）（3）

下面是兩個不同風(fēng)格和需求的實體例子：

固定表頭

這也是我以前寫過的東西并且還做了一小段視頻。這些東西都已經(jīng)有一段歷史了，但這些案例還是能使用的。

最現(xiàn)代的固定表頭的辦法是position: sticky;，這兒有一篇相關(guān)的文章。老實說我并不確定這個推薦的方法是否可行。在正常情況下它無法在中起作用。這還是有點意義的因為你無法在表格里面進行絕對定位子元素。但它在<th>當中是起作用的。不管怎樣，如果有人想把它弄清楚，這會是對這篇文章的一個很好的更新。

這里是使用 jQuery 插件實現(xiàn)的一個例子：

使用 Emmet 來創(chuàng)建表格標簽

有一大堆的理由可以說明 Emmet 是個好工具，其中一個就是可以用它來書寫縮略的 HTML 然后再一鍵拓展為真正的 HTML，因為表格通常都是重復(fù)性比較高并且很冗長的。 Emmet 對它來說實在是太適合了，Emmet 還能在 CodePen 運行呢。=）

簡單的4行4列

table>tr*4>td*4

5行并且包含左側(cè)標題信息

table>tr*5>th+td*4

一行并包含上方標題信息

table>tr>th*5^tr*3>td*5

具有自增ID的員工信息表

table>tr>th{Name}+th{ID}+th{Favorite Color}^tr*3>td{Name}+td{$$$$$}+td{Blue}

包含頭部尾部和內(nèi)容的表格

table>thead>tr>th{Header Cell}*5^^tfoot>tr>th{Footer Cell}*5^^tbody>tr*10>th{Row Header}+td{Cell Data}*4

Javascript生成表格

Javascript通過HTMLTableElementAPI提供了非常明確的用于處理表格的方法。Louis Lazaris最近寫了一些關(guān)于這方面的東西。你可以通過閱讀它來使用JS生成表格，訪問子元素，以及用特別的方法來改變屬性。這是MDN站上的相關(guān)資料。

下面是給出的例子：

表格排序

假設(shè)現(xiàn)有一個具有兩列的表格。一列用于記錄員工的ID，另一列用于記錄員工的email地址。每一列上方都有一個標題?？梢酝ㄟ^點擊標題來對該列的數(shù)據(jù)進行排序。舉個例子，ID以數(shù)值進行排序，郵件地址以字母進行排序，兩者可以進行升序和降序的切換。這就是表格排序，能夠使數(shù)據(jù)起更大的作用。

這是一個相當常用的需求，這還有一份為其準備的說明書。只要將sortable屬性放進 table 當中，它便會自動地排序只要遵循說明書中的幾條規(guī)則。

在寫下這篇文章的時候，我不知道是否有任何的瀏覽器支持表格的原生排序。但這還有提供了三個額外的實現(xiàn)方法!

• tablesorter - 基于jQuery的 "靈活的客戶端表格排序"
• sorttable - 原生 javaScript
• tablesort - "一個精簡的應(yīng)用于表格排序的組件。原生 Javascript 實現(xiàn)，沒有其他的依賴。"

下面是表格排序的例子：

如果上面這些并沒有幫助到你，Codrops 收集的33中表格排序腳本，可以給予你更多的選擇。

這些都是 Javascript 的解決方法。也可以通過在后端進行排序然后將排序好的數(shù)據(jù)直接在前端呈現(xiàn)。這個方法可以用在：在分頁表格中，當DOM中的所有數(shù)據(jù)并不是馬上可用的時候。

出處：

英文原文：http://css-tricks.com/complete-guide-table-element/

中文譯文：http://www.w3cplus.com/css/complete-guide-table-element.html

　　哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費用，即可穩(wěn)步提升排名至首頁。歡迎體驗最佳的哈爾濱網(wǎng)站建設(shè)。