表格元素的徹底指南(譯)

時間 2019-11-16

標籤表格元素徹底指南简体版

原文原文鏈接

此文根據Chris Coyier的《A Complete Guide to the Table Element》所譯，整個譯文帶有我本身的理解與思想，若是譯得很差或不對之處還請同行朋友指點。javascript

一個很是基礎的例子

下面是一個很是簡單的表格數據例子：php

這是一個跨多軸的數據。想象下，經過你得手指劃過某一行來了解某我的的相關信息。或者從上至下來感覺某個數據點的模式和變化。css

表頭和表體

上面這個基礎例子中咱們沒有作的一件事是沒有語義地指出第一行是該表格的頭部。咱們本應該這麼作。整個第一行的部分沒有包含數據，它只是每一個列的標題。所以，咱們能夠<thead>元素來完成這件事情，它會包裹第一個<tr>元素(它會包裹全部的行所須要的頭部信息)html

HTML代碼以下所示：前端

當你使用了<thead>元素後，<table>元素中不能有直接的<tr>子元素，全部的行必須存在於<thead>，<tbody>和<tfoot>裏面。要注意的是咱們會把全部的數據行包含在<tbody>裏面。html5

表尾

連同<thead>和<tbody>一塊兒的還有<tfoot>,用於包裹指出表格頁腳的行。和<thead>同樣,它只是語義地指出了輔助信息，沒包含別的數據。java

<tfoot>獨一無二的一點是它在HTML中的位置，它緊跟着<thead>並位於<tbody>的前面！你可能會認爲它是table標籤結束前的最後一個元素，但狀況並非這樣。由於頁腳可能包含了用於理解表格的必要信息，由於在資源序列中它應當排在在數據的前面。jquery

儘管首先在資源序列中出現，<tfoot>確實渲染在了表格的底部，這使其成爲一個不一樣尋常的HTML元素。git

舉個例子，它能夠用於這樣的場景，在一個很長或很高的表格中，<tfoot>重複了表頭的信息，使得讀者更容易地在底部看到列表的標題信息，而不用回到頭部查看。但你並無必要這樣來使用它。github

在一些元素位置根據須要從上至下跳動的佈局中，<tfoot>是個不錯的技巧。舉個例子，雖然一個導航在屏幕的底部，但在HTML源碼中導航應該在頂部。

單元格：td和th

在表格中一個獨立的單元格老是<td>或<th>二者之一，只要你願意，你能夠把任何東西放進表格的單元格中，但要使這些元素成爲表格中的單元格元素。<th>是「表格的標題」，<td>是「表格的數據」。

使用咱們現有的簡單例子，頂行是全部的頭部信息。它們是數據的標題而不是數據，而剩下的全部行都爲數據。以下：

<th>元素並非必須放在<thead>元素當中。它們簡單地指出了頭部信息。所以它們也能用於<tbody>元素的第一行當中。咱們會在後面給出這樣的一個例子。

基本樣式

你看到的大多數表格都用顏色和線條來區別表格的不一樣部分。邊框是很是常見的。默認的，全部的單元格相互之間都有2px的空隙（經過用戶代理樣式表給出）

注意第一行和餘下部分輕微的額外差距。這是默認的應用在和中的 border-spacing 致使他們產生了一點間隔。這不是外邊距，他們沒有摺疊。你能夠像這樣來控制間隔：

table {
    border-spacing: 0.5rem;
}

但更常見的作法是移除這些間隔，這個屬性可以徹底忽略和摺疊這些間隔，像以下設置：

table {
    border-collapse: collapse;
}

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

合併單元格

有兩個能應用在任何單元格中的重要的屬性（<td>或<th>）：colspan 和 rowspan 。他們接受任何大於等於2的正整數。若是一個 td 元素的 colspan 值爲2（<td colspan="2">），它將仍然是單獨的單元格，但它會在一行中水平的佔據兩個單元格的空間。rowspan 也同樣，但它做用於垂直方向。

在你開始準備使用合併單元格的工做前你必須先進行一點心算。合併列相對比較簡單。全部的單元格在其數量值上等價於1，若是它具備 colspan 屬性，則等價於更多。合計一行中的每一個單元格的值則能夠獲得表格行的最終值。其餘的每一行的值都必須精確地等於該值，不然你將獲得一個非矩形的尷尬的表格佈局。（最長的表格行將會突出）

合併行是類似的，只是它難度要稍大一點並須要思惟跳躍。由於列並不像行那樣分組。若是一個表格元素具備 rowspan 屬性，它會垂直跨越兩行。這意味着它表明的單元格數獲得了+1。

在你得腦殼中想象出它們可能有點難度，但咱們是開發者，相信咱們能作到這點。=）

實際上這些屬性常常僅僅是簡單地被應用，例如合併幾個相關聯的表頭：

寬度自適應... 或包含在容器中... 或撐破容器

表格元素在其自身應該佔據多寬的問題上是不一樣尋常的，它表現地像一個塊級元素（如：<div>）,若是你把一個表格放在另外一個表格後面，每個都會分解到它本身的行當中。但表格的實際寬度卻僅按照它所須要的給出。

若是在表格最寬的行中文本的寬度爲100px寬，則這個表格寬度爲100px。若是文本的數量寬度比表格的外容器要寬，則文本將會被包裹（經過折行）起來。

然而若是文本被設置爲非包裹(例如： white-space: nowrap;)，表格可能會撐破容器。由於單元格也是非包裹的，因此若是內容太多，表格則會撐破容器。

兩軸表格

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

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

何時使用表格

如今讓咱們緩一緩並討論一下應該什麼時候使用表格，或許你已經聽過這類型的建議：表格是爲列表式的數據準備的（請看本文的第一個句子）。

把什麼東西放在表格當中是比較合適的？這裏列出了一些：一個計劃表/價格表/特性比價，保齡球分數，網格式的員工信息，財務數據，日曆，養分成分表信息版，邏輯難題解算器，等等。

你可能會據說過：表格是非語義的。這並不正確 - 它們語義地指出了表格數據，當展現數據時表格是個很好的選擇。

何時不使用表格

表格並不適用於佈局。這看起來好像有點奇怪。那讓咱們看一下爲什麼表格的特性使它們彷佛適合用於佈局：易於控制，邏輯嚴密，具備可預見性，而且一點也不脆弱。

但當使用表格來佈局時有一些嚴重的問題。首先，HTML標籤意味着某些東西。像咱們前面提到的，table 元素語義地描述了列表式數據。把它們用於其餘的任何東西都是違反語義化的職責的。雖然你在郵件中使用並不會受到懲罰，但在HTML文檔中使用 table 的獲益並無這麼大。

但談論語義化有時候並非那麼簡單（相關資料：1，2，3，4，5），所以咱們來談論一些全部人都基本贊成的東西（即便咱們沒有像咱們想達到地那麼好）：網站應該是可訪問的。其中一部分的可訪問性是面向屏幕讀者而言。屏幕讀者是從上至下從左至右地閱讀表格的。由於你要根據表格的結構來決定如何呈現網站內容，也就意味着由視覺的選擇而不是可訪問性的選擇決定。

說到資源順序，它的影響超過了可訪問性。想象一個「側邊欄在左邊」的佈局，一個表格會要求表格應該首先出如今資源序列中，這同時也不利於可訪問性，也可能不利於SEO，這潛在地決定了你得輔助內容在你得主要內容之上。

你能經過在表格中使用語義化的標籤來解決SEO的問題嗎？這是有可能的，但你如今在使用雙重HTML。若是你真的須要表格的佈局能力但又想使用語義標籤，那請看下一部分。若是你在使用 table 佈局時不知道該如何達到語義化，請在表格中使用ARIArole="presentation"代表它的含義。

當我在2013下半年後寫這篇文章時，表格已經變得不那麼流行而且在佈局方案中也沒有那麼大的吸引力了。咱們看到如今大量的人更多地使用固定或絕對定位，這在表格當中是沒法作到的。咱們看到 flexbox 在主流可用性的邊緣成爲極好的一個選擇。咱們看到網格佈局開始發展起來。咱們看到 inline-block 強大的使用方法。咱們看到過去那浮動的脆弱性已經逐漸消失。

如今你已經不多看到現代網站使用表格來佈局了，除了HTML郵件還在堅持之外。呈現郵件的範圍是很是廣闊的。郵件出如今互聯網的任何地方和移動端的原生應用以及老式和新式系統的桌面端。你能夠對郵件作些進步性的優化，但你們一致認爲它最安全的佈局方式是使用表格。一個有力的證據是：主要的郵件推送服務器全都用表格來搭建模板。

使語義元素表現地像一個表格

CSS中有一個屬性能讓任何元素表現地像一個表格元素。你須要從本質上改變它們由於你須要的是個表格，而且它會從屬像表格同樣的資源順序的依賴關係。我不是在作什麼無聊的事，由於它有時候是有很大做用的。若是這種佈局風格解決了問題並不會再順序上形成什麼影響，你應該使用它。

請避免使用內聯樣式，但爲了便於理解，這裏就破例用了：

<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 屬性來獲得表格風格的行爲，這裏是它們的相關值：

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>的值，這是由於語義的關係，<th>和<td>的表現其實是相同的，因此不必多增長這樣一個值。

這裏還有一個至關有趣的值display: inline-table;。記得咱們前面談論過的怪異的表格元素的寬度。表格是自適應寬度的。它就像 inline-block 元素同樣。顧名思義，這個值使得它們成爲一個 inline-block 元素而不會產生換行。

若是你想要了解更多的語義元素和表格風格佈局，請查看Everything You Know About CSS Is Wrong!

我歷來沒有承認過這個標題由於該書建議過除了表格風格的佈局其餘的佈局方法都是錯誤的。但正如我曾說過的，這種方法是很是有用的，它能在CSS中出現我感到很是開心。只是要意識到不管你使用什麼樣的元素來建立一個表格式的佈局，它們都遵循一個相同的東西（資源順序依賴關係）。

全部的表格相關元素

有幾個元素在前面咱們是沒有說起的，讓咱們看看HTML表格的相關元素。這裏咱們也用一個表格來呈現它們：

Element	What it is
`<table>`	The table itself
`<caption>`	The caption for the table. Like a figcaption to a figure.
`<thead>`	The table header
`<tbody>`	The table body
`<tfoot>`	The table footer
`<tr>`	A table row
`<th>`	A table cell that is a header
`<td>`	A table cell that is data
`<col>`	A column (a no-content element)
`<colgroup>`	A group of columns

全部的表格相關屬性

只有這麼一點表格屬性實在使人吃驚。固然你可使用類和ID來使用你所須要的全局屬性。之前表格擁有至關多的屬性，但大多數都已經被廢棄了。

Attribute	Element(s) Found On	What it does
`colspan`	th, td	extends a cell to be as wide as 2 or more cells
`rowspan`	th, td	extends a cell to be as tall as 2 or more cells
`span`	col	Makes the column apply to more to 2 or more columns
`sortable`	table	Indicates the table should allow sorting
`headers`	td	space-separated string corresponding to ID's of the `<th>`elements relevant to the data
`scope`	th	row \| col \| rowgroup \| colgroup (default) - essentially specifies the axis of the header. The default is that a header is heading a column, which is typical, but a row might start with a header also, where you would scope that header to the row or rowgroup.

棄用的屬性

不要使用它們的任何一個，它們已經被棄用了。儘管它們可能還能夠起做用，但將來它們有可能會失效。

Deprecated Attribute	What to use instead
align	Use `float`property instead
valign	Use `vertical-align`property instead
char	The correct answer is to use `text-align: "x";`where x is the character to align on, but it's not implemented anywhere yet. But this attribute isn't supported either, so no big loss.
charoff	See above
bgcolor	Use `background`property instead
abbr	"consider starting the cell content by an independent abbreviated content itself or use the abbreviated content as the cell content and use the long content as the description of the cell by putting it in the `title`attribute"
axis	Use the `scope`attribute instead
border	Use `border`property instead
cellpadding	Using `padding`property instead
cellspacing	Use `border-spacing`property instead
frame	Use `border`property instead
rules	User `border`property instead
summary	Use `<caption>`element instead
width	Use `width`property instead

表格的堆疊

表格元素有一個隱式的垂直堆疊方式，和HTML結構中父元素和子元素的關係相同。這個理解在表格中是至關重要的，由於在應用 background 之類的屬性時，咱們能夠經過在表格或者表格行應用一種背景，再在單元格應用另外一種背景來覆蓋它。

這就是它的外貌（使用firefox瀏覽器開發者工具的3D特性呈現）：

表格的重要樣式規則

在表格元素上你可使用大多數的CSS屬性，font-family在表格元素上的表現和在其餘元素時同樣，舉個例子。若是咱們層疊地應用此屬性，在 table 元素中使用一種font-family，在 table-cell 元素中使用另外一種font-family，文字會使用後一種樣式，由於table-cell纔是文字的最近父容器。

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

CSS Property	Possible values	What it does
vertical-align	baseline sub super text-top text-bottom middle top bottom % length	Aligns the content inside a cell. Works particularly well in tables, although only the top/bottom/middle make much sense in that context.
white-space	normal pre nowrap pre-wrap pre-line	Controls how text wraps in a cell. Some data may need to be all on one line to make sense.
border-collapse	collapse separate	Applied to the table to determine if borders collapse into themselves (sort of like margin collapsing only bi-directional) or not.
border-spacing	length	If `border-collapse`is `separate`, you can specify how far cells should be spaced out from each other. Modern version of `cellspacing`attribute. And speaking of that, `padding`is the modern version of the `cellpadding`attribute.
width	length	Width works on table cells just about how you would think it does, except when there is some kind of conflict. For instance if you tell the table itself to be 400px wide then the first cell of a three-cell row to be 100px wide and leave the others alone, that first cell will be 100px wide and the other two will split up the remaining space. But if you tell all three of them to be 10000px wide, the table will still be 400px and it will just give each of them a third of the space. That's assuming white-space or elements like an image don't come into play. This is probably a whole post in itself!
border	length	Border works on any of the table elements and just about how you would expect. The quirks come in when you collapse the borders. In this case all table cells will have only one border width between them, rather than the two you would expect them to have (border-right on the first cell and border-left on the next cell). In order to remove a border in a collapsed environment, both cells need to "agree" to remove it. Like `td:nth-child(2) { border-right: 0; } td:nth-child(3) { border-left: 0; }`Otherwise, source order/specificity wins which border is shown on which edge.
table-layout	auto fixed	`auto`is the default. The width of the table and its cells depends on the content inside. If you change this to `fixed`, the table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths, which can speed up rendering. If content in subsequent cells can't fit, the overflow property determines what happens.

以上的屬性並非很詳盡，對錶格來講還有一些屬性的表現是怪異的，舉個例子，你不能對單元格進行相對定位從而改變它的位置或者絕定位它的子元素。但能夠經過別的辦法來實現。

若是你想到了更多的有關表格的怪異現象，能夠在下方評論區跟你們分享一下。

默認樣式/User Agent樣式表

Webkit內核的默認樣式：

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
}

我在已經更換爲Blink內核的Chrome瀏覽器的開發者工具中檢查了這裏面的每一個元素，它們仍然是相同的。

有意思的是，在<th>標籤中的文本默認是居中的（text-align: center;）。但這並無被聲明在UA樣式表中。雖然並非什麼大不了的事情，但這讓人感到有點神祕，讓你還想知道更多在渲染的時候發生的其餘神祕東西。

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

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

但在WebKit中，這1px的內邊距是不存在的。雖然沒有形成多大的區別，但它們確實是不同。這就是CSS Reset(或者其餘類似的東西)的做用：去除瀏覽器形成的差別。所以來讓咱們看看這個東西吧。

重置默認的表格樣式

世界上最流行的CSS reset叫作 Meyer Reset，對錶格作了以下設置：

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，而是設置一些合理的不一致的樣式。我對使用 Normalize.css 的建議是：不要移除裏面的任何東西。但能夠自由地修改它們。

Normalize 對錶格只作了以下樣式設置:

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

我好像須要更深刻地研究，由於我以爲上面的樣式有點不尋常......

我很喜歡使用border-collapse: collapse，由於單元格之間的空隙會讓人感到有點尷尬，但我知道在全部的瀏覽器中都是如此的border-collapse: separate;，因此它並不須要被歸一化。
若是border-collapse的值是collapse，那麼border-spacing是可有可無的。
單元格元素時須要進行歸一化的（例如在firefox和chrome中的padding是不一樣的），但這裏卻沒有這麼作。

這些東西不會有太大影響，也沒必要糾結。

對我來講，一般我會對錶格進行下面的重置：

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

「隱含」元素和未關閉的標籤

看看下面醜陋的HTML：

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

雖然看起來有點怪異，但它是起做用的。爲何會這樣？

<col>標籤是屬於那種無內容的不須要閉合的標籤，相似<br>/<br />
<td>元素在這些狀況中是無需閉合的：「若是<td>元素後面沒有更多的<td>或<th>元素或者在它父元素中沒有更多的內容，閉合標籤是能夠省略的。」
缺乏的</tr>標籤的原理也是相同的：「若是<tr>元素後面沒有緊跟着一個<tr>元素或者若是它父元素組(<thead>, <tbody>或者 <tfoot>)沒有更多的內容，結束標籤是能夠省略的。」

若是咱們檢查瀏覽器對錶格的渲染，咱們能夠看到那些缺乏了閉合標籤的標籤又從新擁有了閉合標籤。這是瀏覽器自動爲咱們添加的。而且裏面還增長了一些新的元素。

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

甚至若是咱們這樣作：

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

而後：

colgroup:first-child {
  background: red;
}

你可能會認爲第二個單元格會變成紅色，而不是第一個。由於這裏的「第一個」 colgroup 僅會影響第二個單元格。但在渲染的時候卻發現，兩列都被包裹在 colgroup 當中，所以CSS選擇器會選擇第一個。

<tbody>元素也是隱含的。若是你不使用任何的 tbody，thead 或 tfoot，那麼整個表格的內容都會被包裹在 tbody 當中（實際上被包裹的只有表格行和其子元素， col 和 colgroup 並不會被包含）。若是你使用 thead 那麼整個表格會包裹在它裏面直到找到 tbody （但在個人測試下並非這樣子，thead並不會包含任何元素，不知道是否做者筆誤）,而後它會自動關閉 thead 標籤。

你能夠在CSS選擇器中使用這些隱含的元素即便你沒有將它寫在HTML當中。但我並不建議這樣作，由於這樣的HTML是至關醜陋和讓人迷惑的。一般也是不建議使用標籤選擇器進行樣式設置。

使表格變爲非表格元素

在一些狀況下你可能會須要強制讓表格不該用它的表格形式的佈局行爲而更像一些其餘的規則元素。

這只是個經過改寫單元格的 display 屬性來實現的技巧：

th, td {
  display: inline;
}

咱們能夠至關快速地去表格化一個表格：

爲了安全起見，我對全部表格相關元素進行了重置。由於這個我會知道這下父元素不會對個人測試形成什麼影響了。

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

這在響應式佈局中至關地有用，由於傳統的表格佈局從大屏幕轉移到小屏幕時須要作顯著的改變以保持佈局的完整。

表格可訪問性

咱們已經談論過使用表格來佈局以及表格的可訪問性了。但假設表格已經被正確地用於表格數據了，仍然有許多值得關注的可訪問性問題。

這裏有幾篇很好的相關文章：

WebAIM: 建立可訪問的表格
Portland Community College: 對屏幕讀者而言的優秀的和劣質的表格佈局例子
Web Usability: 易於訪問的表格數據

斑馬條紋表格

若是你不爲表格單元設置背景顏色，你能夠爲它們的所屬的表格行設置背景色，因此最簡單地，你能夠這樣作：

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

咱們在選擇器的 tr 前面增長了 tbody，由於你不太會但願爲表格的 header 和 footer 中的表格行添加條紋。你也能夠改變偶數行的背景顏色來突出它們，若是你想的話。

若是你想要支持那些不支持 :nth-child() 的瀏覽器（至關該死），你可使用 JQuery 來實現。

調查彷佛顯示添加斑馬條紋是個不錯的注意。

高亮行與列

特別地高亮某一行是至關簡單的，你只須要爲該行添加一個類來指定它就能夠了：

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

列的高亮有點兒棘手，一個可行的辦法是使用<col>元素，它可讓咱們爲出如今那一列中的表格設置屬性。這可能會讓你有點迷糊，由於受到影響的表格並非<col>實際的後代元素。

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

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

  <thead>
     ...

</table>

而後你能夠高亮特定的一列，如：

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

然而不多人會這樣使用。若是你爲某一行或某個單元格設置背景色，它老是會覆蓋如上設置的某一列背景色。

你可能最好能爲指定的某列的每個單元格設置一個類，如：

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

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

單元格的高亮是很是簡單的，你能夠經過下面的CSS設置：

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

行的高亮也至關簡單。你能夠設置鼠標所在的表格行的背景色，這樣只要鼠標通過背景色便會改變，但前提是你不設置單元格的背景色。

tbody tr:hover {
  background: yellow;
}

若是你設置了單元格的背景色，你也能夠經過tr:hover td, tr:hover th { }來達到一樣的效果，也仍是至關簡單的。

列的高亮有點兒麻煩，你不能使用col:hover來實現，由於這個列元素並非實際的佔據了像素空間的元素，所以鼠標也沒法懸浮到該元素上。惟一的方法就是經過Javascript來實現。

它的工做方式以下：

獲得一個全部單元格的集合。
綁定 mouseover 和 mouseout 事件到每個單元格元素。
當 mouseover 事件觸發時，獲得單元格在該行中的位置。
遍歷全部的行，併爲每一行的那個位置的單元格添加一個高亮類。
當 mouseout 事件觸發時，移除全部單元格的高亮類。

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

但實現的原理是相同的，只不過使用jQuery能夠更快地獲得元素的集合，並能快速的獲得單元格在行中所處的位置。

樣式美化後的表格

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

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

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

Twitter Bootstrap 的表格樣式很是簡單：

這一個，做爲獎勵，還具備鍵盤控制：

我一直努力保持收集精心設計的表格的習慣以便做爲參考。所以若是你發現了任何精美的表格，請與我分享。Hong Kiat 也有一個精美表格集合。

表格搜索

雖然表格的排列至關困難，但表格的搜索卻很是容易。增長一個搜索輸入，若是那裏的值匹配到了任意一行的文本，則顯示該行，並隱藏其餘全部的行。使用jQuery來實現就像下面這麼簡單：

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

這是使用正則表達式來實現的版本：

這是原生JS實現的版本：

表格在流體/響應式設計中會有點難以處理

我過去已經寫過這方面的文章，而且我認爲這個圖形能讓你瞭解到數據表在小屏幕中的體驗是怎樣的。

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

真正快速的方法：

將行變成塊（1）（2）
FooTable - 一個經過切換圖標來隱藏行和使數據可用的jQuery插件
將數據轉換成圖表
經過隱藏列來節省空間並容許用戶切換那些隱藏的列
壓縮單元格並讓它們被包裹
固定表頭部分並使數據區的內容可滾動（1）（2）（3）

下面是兩個不一樣風格和需求的實體例子：

固定表頭

這也是我之前寫過的東西而且還作了一小段視頻。這些東西都已經有一段歷史了，但這些案例仍是能使用的。

最現代的固定表頭的辦法是position: sticky;，這兒有一篇相關的文章。老實說我並不肯定這個推薦的方法是否可行。在正常狀況下它沒法在中起做用。這仍是有點意義的由於你沒法在表格裏面進行絕對定位子元素。但它在<th>當中是起做用的。無論怎樣，若是有人想把它弄清楚，這會是對這篇文章的一個很好的更新。

這裏是使用 jQuery 插件實現的一個例子：

使用 Emmet 來建立表格標籤

有一大堆的理由能夠說明 Emmet 是個好工具，其中一個就是能夠用它來書寫縮略的 HTML 而後再一鍵拓展爲真正的 HTML，由於表格一般都是重複性比較高而且很冗長的。 Emmet 對它來講實在是太適合了，Emmet 還能在 CodePen 運行呢。=）

簡單的4行4列

table>tr*4>td*4

5行而且包含左側標題信息

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}

包含頭部尾部和內容的表格

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最近寫了一些關於這方面的東西。你能夠經過閱讀它來使用JS生成表格，訪問子元素，以及用特別的方法來改變屬性。這是MDN站上的相關資料。

下面是給出的例子：

表格排序

假設現有一個具備兩列的表格。一列用於記錄員工的ID，另外一列用於記錄員工的email地址。每一列上方都有一個標題。能夠經過點擊標題來對該列的數據進行排序。舉個例子，ID以數值進行排序，郵件地址以字母進行排序，二者能夠進行升序和降序的切換。這就是表格排序，可以使數據起更大的做用。

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

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

tablesorter - 基於jQuery的 "靈活的客戶端表格排序"
sorttable - 原生 javaScript
tablesort - "一個精簡的應用於表格排序的組件。原生 Javascript 實現，沒有其餘的依賴。"

下面是表格排序的例子：

若是上面這些並無幫助到你，Codrops 收集的33中表格排序腳本，能夠給予你更多的選擇。

這些都是 Javascript 的解決方法。也能夠經過在後端進行排序而後將排序好的數據直接在前端呈現。這個方法能夠用在：在分頁表格中，當DOM中的全部數據並非立刻可用的時候。