社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > css教學 > 標準化——表格_CSS/HTML

標準化——表格_CSS/HTML

WBOY
發布： 2016-05-16 12:11:42
原創
1380 人瀏覽過

对于那些刚接触CSS布局的人来说，常对如何使用表格（table）感到迷惑。我在很多地方看到人们把“避免用表格来布局”理解成“完全不使用table标签”。值得注意的是，表格是可以用的而且非常好用——只要用的正确。

是的，你得尽量的去避免用表格来布局。但是对于表格型数据，你就应该使用table。我想谈谈如何使用表格来组织表现表格型数据。在HTML和XHTML里，表格不仅仅是行（row）和单元格（cell），还有很多其他元素，特别是如果你想让数据更加容易理解。

首先来点背景知识，“避免用表格来布局”这句话可以在HTML 4.01 规范的表格介绍部分里面找到：

表格不应该纯粹的被用来布局文档内容，这样可能在处理渲染非可视媒体的时候产生问题。另外，当和图片一起使用的时候，这些表格可能在某个系统上显示过大而强迫用户拖动水平滚动条，为了减少这些问题，设计者应该使用样式表来控制布局而不是表格。

这样已经很明白了，尽管文档中说“应该”而不是“必须”，所以这个规范还是有弹性的。

但是本文并不是讨论是否使用表格布局，而是使用表格来组织表现表格型数据——这是表格诞生的本意。

当表格用来组织实际的数据时，不仅仅是一个编排布局的格子而已。一般人可以从表格的编排和表现上看出标题和数据单元格之间的关系。盲人或者有视觉障碍的人则不能做到这一点。如果一个表格要让那些使用屏幕阅读器或用其他非可视用户代理（UA）的人们能够理解，它则需要告诉用户代理它包含的信息之间是如何联系起来的。

幸运的是，HTML在这方面提供了很多元素和属性。然而，使用这些可以增强易用性和语义化的功能比较难而且本身不容易理解。在本文中，我尝试着解释如何使用他们。

表头， <th>

让我们从一个非常简单的表格开始——只包含一行表头和两行三列的数据。如果用以前流行的做法，只用表格的行和单元格，写出来就如下：

  1. <table>
  2. <tr>
  3. <td>公司</td>
  4. <td>雇员</td>
  5. <td>成立于</td>
  6. </tr>
  7. <tr>
  8. <td>ACME Inc</td>
  9. <td>1000</td>
  10. <td>1947</td>
  11. </tr>
  12. <tr>
  13. <td>XYZ Corp</td>
  14. <td>2000</td>
  15. <td>1973</td>
  16. </tr>
  17. </table>

没有边框和修饰，那么上面的代码在你现在的浏览器里看起来就如下：

<table> <tbody> <tr> <td>公司</td> <td>雇员</td> <td>成立于</td> </tr> <tr> <td>ACME Inc</td> <td>1000</td> <td>1947</td> </tr> <tr> <td>XYZ Corp</td> <td>2000</td> <td>1973</td> </tr> </tbody> </table>

用CSS稍微修饰一下表格，你可以使表头在图形化浏览器里面更加明显：

<tbody> <td>公司</td> <td>雇员</td> <td>成立于</td> </tr> <tr> <td>ACME Inc</td> <td>1000</td> <td>1947</td> </tr> <tr> <td>XYZ Corp</td> <td>2000</td> <td>1973</td> </tr> </tbody> </table>

一个视力正常的人，很容易并且很快就可以明白表头和数据单元格之间的关系。从另一方面讲，那些使用屏幕阅读器的人可以听到如下顺序的词：公司，雇员，成立于，ACME Inc，1000，1947，XYZ Corp，2000，1973。不是十分容易明白其中的关系。

第一步——最简单的——通过适当的标出表头来使得表格更加有意义。很简单：只要使用<th>标签取代表头的<td>标签即可。

  1. <table>
  2. <tr>
  3. <th>公司
  4. <th>雇员
  5. <th>成立于
  6. </tr>
  7. <tr>
  8. <td>ACME Inc</td>
  9. <td>1000</td>
  10. <td>1947</td>
  11. </tr>
  12. <tr>
  13. <td>XYZ Corp</td>
  14. <td>2000</td>
  15. <td>1973</td>
  16. </tr>
  17. </table>
<tbody> <tr> <th>公司 <th>雇员 <th>成立于 </tr> <tr> <td>ACME Inc</td> <td>1000</td> <td>1947</td> </tr> <tr> <td>XYZ Corp</td> <td>2000</td> <td>1973</td> </tr> </tbody> </table>

这个例子虽然简单，但是已经包含了足够的信息使得屏幕阅读器能够让使用者明白表头和数据单元格之间的关系。一个屏幕阅读器一般会这么读：公司: ACME Inc. ，雇员: 1000，成立于: 1947., 以此类推。比之前好多了。

表格标题， <caption>

<caption>标签可以为表格提供一个简短的说明，和图像的说明比较类似。默认情况下，大部分可视化浏览器显示表格标题在表格的上方中央。CSS里的caption-side属性用来控制表格标题显示的地方。大部分浏览器只能把表格标题显示在表格的上方或者下方，只有一些浏览器支持左边或者右边。这个就留给大家去试试了。

使用的时候，<caption>标签一定要紧接着开始的<table>标签写，如下：

  1. <table>
  2. <caption>Table 1: Company data
  3. <tr>
  4. <th>Company
  5. <th>Employees
  6. <th>Founded
  7. </tr>
  8. <tr>
  9. <td>ACME Inc</td>
  10. <td>1000</td>
  11. <td>1947</td>
  12. </tr>
  13. <tr>
  14. <td>XYZ Corp</td>
  15. <td>2000</td>
  16. <td>1973</td>
  17. </tr>
  18. </table>
<caption>Table 1: Company data <tbody> <tr> <th>Company <th>Employees <th>Founded </tr> <tr> <td>ACME Inc</td> <td>1000</td> <td>1947</td> </tr> <tr> <td>XYZ Corp</td> <td>2000</td> <td>1973</td> </tr> </tbody> </table>

当然你也可以用CSS去样式化表格标题。然而，要在不同浏览器里获得同样的效果还需要一定的技巧，这个也留给各位去实践了。

表格释义：summary属性

一般人可以很容易的决定是否研究一下表格的细节，只要瞥一眼就可以看出表格有多大、大概有什么内容。但是使用屏幕阅读器的人就不是那么容易了，除非我们给表格加上summary属性。这样可以提供比<caption>标签更详细的描述。

sumary属性的内容不会被可视化浏览器显示，所以可以尽可能的让描述足够长，使得那些用“听”的浏览者了解表格的内容。当然也不要用过头了，当有需要的时候才加上summary属性，比如对于很复杂的表格，添加一个summary属性可以使用屏幕阅读器人比较简单的了解表格的内容。

  1. <table summary="The number of employees and the foundation year of some imaginary companies.">
  2. <caption>Table 1: Company data
  3. <tr>
  4. <th>Company
  5. <th>Employees
  6. <th>Founded
  7. </tr>
  8. <tr>
  9. <td>ACME Inc</td>
  10. <td>1000</td>
  11. <td>1947</td>
  12. </tr>
  13. <tr>
  14. <td>XYZ Corp</td>
  15. <td>2000</td>
  16. <td>1973</td>
  17. </tr>
  18. </table>

缩写表头:abbr属性

当屏幕阅读器遇到一个表格，每一行会把表头连每一个数据单元格一起读出来。如果表头很长，听一遍一遍的读是十分乏味的。通过使用abbr属性，可以给那些长的表头提供简写形式，取代表头的内容。abbr属性是可选的，大部分情况表头还是（或许是应该）比较简短的。

稍微修改一下刚才的表格，让表头更长些，abbr属性就可以这样用：

  1. <table summary="The number of employees and the foundation year of some imaginary companies.">
  2. <caption>Table 1: Company data
  3. <tr>
  4. <th abbr="Company">Company Name</th>
  5. <th abbr="Employees">Number of Employees</th>
  6. <th abbr="Founded">Foundation Year</th>
  7. </tr>
  8. <tr>
  9. <td>ACME Inc</td>
  10. <td>1000</td>
  11. <td>1947</td>
  12. </tr>
  13. <tr>
  14. <td>XYZ Corp</td>
  15. <td>2000</td>
  16. <td>1973</td>
  17. </tr>
  18. </table>
<table class="extbl" summary="The number of employees and the foundation year of some imaginary companies."> <caption>Table 1: Company data <tbody> <tr> <th abbr="Company">Company Name</th> <th abbr="Employees">Number of Employees</th> <th abbr="Founded">Foundation Year</th> </tr> <tr> <td>ACME Inc</td> <td>1000</td> <td>1947</td> </tr> <tr> <td>XYZ Corp</td> <td>2000</td> <td>1973</td> </tr> </tbody> </table>

对于第一行数据，屏幕阅读器会读表头的全称，而从第二行开始即使用简称。

这样让数据表格适应布局是挺困难的，而以下的做法更为常见：即让表头尽可能的短，或者简写，使用title属性或者<abbr>标签提供一个更长的说明。

把表头和数据联系起来：scope，id，headers属性

就我用到现在，很多表格要比上面提供的例子复杂的多。让例子复杂一点，我会移去“Company”表头，并且把第一列的数据移到表头单元格里：

  1. <table summary="The number of employees and the foundation year of some imaginary companies.">
  2. <caption>Table 1: Company data
  3. <tr>
  4. <td>
  5. <th>Employees
  6. <th>Founded
  7. </tr>
  8. <tr>
  9. <th>ACME Inc
  10. <td>1000</td>
  11. <td>1947</td>
  12. </tr>
  13. <tr>
  14. <th>XYZ Corp
  15. <td>2000</td>
  16. <td>1973</td>
  17. </tr>
  18. </table>
<table class="extbl" summary="The number of employees and the foundation year of some imaginary companies."> <caption>Table 1: Company data <tbody> <tr> <td>  <th>Employees <th>Founded </tr> <tr> <th>ACME Inc <td>1000</td> <td>1947</td> </tr> <tr> <th>XYZ Corp <td>2000</td> <td>1973</td> </tr> </tbody> </table>

在这个表格里，每一个数据单元格都有两个表头。最简单的方法让那些非可视的浏览器理解这个表格，就是为每个表头添加一个scope属性。

  1. <table summary="The number of employees and the foundation year of some imaginary companies.">
  2. <caption>Table 1: Company data
  3. <tr>
  4. <td>
  5. <th scope="col">Employees</th>
  6. <th scope="col">Founded</th>
  7. </tr>
  8. <tr>
  9. <th scope="row">ACME Inc</th>
  10. <td>1000</td>
  11. <td>1947</td>
  12. </tr>
  13. <tr>
  14. <th scope="row">XYZ Corp</th>
  15. <td>2000</td>
  16. <td>1973</td>
  17. </tr>
  18. </table>

Scope属性同时定义了行的表头和列的表头：

  • col: 列表头
  • row: 行表头

在第一行的

<th>加上值为col的scope属性，声明他们是下面数据单元格的表头。同样的，给每行的开头<th>加上值为row的scope属性声明他们是右边数据单元格的表头。

Scope属性还有两个值：

  • colgroup: 定义列组（column group）的表头信息
  • rowgroup: 定义行组（row group）的表头信息

一个列组是由<colgroup>标签定义的。行组则是由<thead>、<tfoot>和<tbody>定义的。稍后我将会详细介绍它们。

如果你既想要保留“Company”表头，而又想让公司名字作为行表头（row headers）显示，你会怎么做？那样的话，应该使得包含公司名字的单元格同时提供表头和数据信息。也就是说，<td>标签也应该加上scope属性：

  1. <table summary="The number of employees and the foundation year of some imaginary companies.">
  2. <caption>Table 1: Company data
  3. <tr>
  4. <th scope="col">Company</th>
  5. <th scope="col">Employees</th>
  6. <th scope="col">Founded</th>
  7. </tr>
  8. <tr>
  9. <td scope="row">ACME Inc</td>
  10. <td>1000</td>
  11. <td>1947</td>
  12. </tr>
  13. <tr>
  14. <td scope="row">XYZ Corp</td>
  15. <td>2000</td>
  16. <td>1973</td>
  17. </tr>
  18. </table>

这样的话可视化浏览器不会默认的把company name显示为表头。所以需要用CSS来修正一下，就刚才那个例子，我使用了下面的CSS：

  1. td[scope] {
  2. font-weight:bold;
  3. }

要注意上面的规则使用了属性选择符，IE是不支持的。而通过添加一个class来样式化表头是个不错的办法。

<table class="extbl" summary="The number of employees and the foundation year of some imaginary companies."> <caption>Table 1: Company data <tbody> <tr> <th scope="col">Company</th> <th scope="col">Employees</th> <th scope="col">Founded</th> </tr> <tr> <td scope="row">ACME Inc</td> <td>1000</td> <td>1947</td> </tr> <tr> <td scope="row">XYZ Corp</td> <td>2000</td> <td>1973</td> </tr> </tbody> </table>

另一个连接表格数据单元格和表头的方法就是给每一个表头添加一个唯一的ID。然后为下面的数据单元格添加headers属性，这个headers属性值包含用空格分开的各个ID，这些ID代表的表头各自关联到该数据单元格上。这样做很复杂，只是当有超过两个表头的单元格才用。在复杂的和不规则的表格中，scope属性就力不从心了。

为了演示，我修改了一下表格，加上了公司雇员性别及人数：

  1. <table class="extbl" summary="The number of employees and the foundation year of some imaginary companies.">
  2. <caption>Table 1: Company data
  3. <tr>
  4. <td rowspan="2"></td>
  5. <th id="employees" colspan="2">Employees</th>
  6. <th id="founded" rowspan="2">Founded</th>
  7. </tr>
  8. <tr>
  9. <th id="men">Men</th>
  10. <th id="women">Women</th>
  11. </tr>
  12. <tr>
  13. <th id="acme">ACME Inc</th>
  14. <td headers="acme employees men">700</td>
  15. <td headers="acme employees women">300</td>
  16. <td headers="acme founded">1947</td>
  17. </tr>
  18. <tr>
  19. <th id="xyz">XYZ Corp</th>
  20. <td headers="xyz employees men">1200</td>
  21. <td headers="xyz employees women">800</td>
  22. <td headers="xyz founded">1973</td>
  23. </tr>
  24. </table>
<table class="extbl" summary="The number of employees and the foundation year of some imaginary companies."> <caption>Table 1: Company data <tbody> <tr> <th id="employees" colspan="2">Employees</th> <th id="founded" rowspan="2">Founded</th> </tr> <tr> <th id="men">Men</th> <th id="women">Women</th> </tr> <tr> <th id="acme">ACME Inc</th> <td headers="acme employees men">700</td> <td headers="acme employees women">300</td> <td headers="acme founded">1947</td> </tr> <tr> <th id="xyz">XYZ Corp</th> <td headers="xyz employees men">1200</td> <td headers="xyz employees women">800</td> <td headers="xyz founded">1973</td> </tr> </tbody> </table>

你可以发现，这种方法真的很麻烦，所以如果可能的话，还是尽量用scope属性吧。

跨行和跨列

在以前用表格布局的年代，rowspan属性和colspan属性常被用来让单元格跨几列或跨几行，来布局那些经过整齐切割的图像。这两个属性现在还在用， 因为并没有CSS来控制单元格的跨行和跨列。仔细想想，其实是很有道理的：跨行和跨列示表格结构(structure)的一部分，而不是其表现(presentation)。

列和列组：<col>和<colgroup>

<abbr>HTML提供了<colgroup>和<col>标签来为相关的表格列分组。这样就可以（在一些浏览器中）使用CSS来单独的为列样式化。列组也可以使用scope属性来标明其表头信息。

这就是我要说的关于列和列组的全部。更多信息参考“其他”部分。

行组： <thead>, <tfoot>, 和<tbody>

表格的行可以分组为表头组(<thead>), 表尾（或表注）组(<tfoot>), 然后是一个或多个表身(<tbody>) 。每一个行组必须包含一个或多个表格行。

如果一个表格包含<thead>，那么它必须出现在<tfoot>和<tbody>之前。而<tfoot>则必须出现在<tbody>之前。如果没有使用<thead>和<tfoot>，那么<tbody>标签也可以不加（也不是非得不加，随你喜欢了）。一个有行组的表格结构看起来如下：

  1. <table>
  2. <thead>
  3. <tr></tr>
  4. … 更多表头的行
  5. </thead>
  6. <tfoot>
  7. <tr></tr>
  8. … 更多表尾的行
  9. </tfoot>
  10. <tbody>
  11. <tr></tr>
  12. … 第一个<tbody>的行
  13. </tbody>
  14. <tbody>
  15. <tr></tr>
  16. … 第二个<tbody>的行
  17. </tbody>
  18. … 更多的<tbody>
  19. </table>

使用行组有以下几个原因：

  • 这样样式化表头、表尾和表身比较方便，而且独立，不必要给每个标签加样式或class。
  • 当打印比较长的表格的时候，一些浏览器（比如基于Mozilla的）会在每一页的开头重复表头和表尾的内容，这样阅读打印版本的表格就比较方便。
  • 区分开表头和表尾也可以使一些浏览器浏览表格的时候，只滚动表身。

仅为数据表格而写

本文所写的所有都是关于使用HTML表格来组织和表现数据。如果你还是想用表格来布局，那么上文所述的都没有意义而且用不到。没有summary属性、没有表头、没有<caption>、什么都没有，没有格式，陈旧的布局表格除了<table>,<tr>,<td>什么都可以不要。另外还要承担风险，即如何面对那些非可视的用户代理（UA）。

优势

看来要用HTML做一个有语义化的数据表格有很多工作。对于复杂的表格是这样的。有时候基本上是不可能手工写出来的。但是对于简单的表格，那么使用一个<th>加上scope属性就可以了，又快又简单。

非常明显，语义化的表格对于使用屏幕阅读器或其他辅助技术的浏览者非常有好处。让那些巨大而复杂的表格“听”起来很有意义是非常困难的，所以尽可能的使表格简单。

另外對於使用視覺化瀏覽器的設計者和使用者也是有好處的：一個語義化的表格有大量的介面可以利用CSS來樣式化，好的樣式可以讓表格更加易用。

其他

除了本文，還有更多關於資料表內容。例如這裡就沒有提到axis屬性，對於<colgroup>和<col>的描述也不是很深。對於格式化和樣式化還有border模型我也沒有深究，還缺少一個真正複雜的表格的例子。

想了解更多信息，可以參考以下文章：

相關標籤：
标准化——表格
來源：php.cn
上一篇：IE圖片下空隙問題解決方法集合_CSS/HTML 下一篇：CSS使用心得體會_CSS/HTML
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
垂直旋轉的表格標題，居中+底部對齊，跨瀏覽器 我的表格帶有旋轉標題，在Chrome中看起來符合預期，但在Firefox中卻不是。 Chromev108（垂直底部，水平中間）✅Firefoxv107（垂直中間，水平右）❌如何讓它...
來自於 2024-04-04 16:45:25
0
1
330
檢查查詢中的兩個值是否相同，使查詢非常慢 我的目標：查詢，提供正在建造建築物的所有省份。我的問題：一旦我確保每個建築物都與同一建築物進行比較（比較upgrade_id），查詢就會永遠持續下去。如果沒有where語句的最後一...
來自於 2024-04-03 19:06:32
0
1
288
PHP 表單未正確發布提交按鈕 我正在製作申請表，但該表格不起作用。當我單擊提交按鈕時，它甚至不運行if語句來發布變數。我的表單標籤如下所示：<formmethod="post"enct...
來自於 2024-04-03 12:46:54
0
1
379
具有固定標題和旋轉列標題的表格 我有一個固定標題和固定第一列的表格。我還想將列標題旋轉45度。固定標題需要設定背景顏色。但是，這會導致45度旋轉標題出現問題，因為下一欄的背景與前一欄的文字重疊。以下是問題的範例：...
來自於 2024-04-03 08:50:32
0
1
362
僅新條目：更新最近新增的字段 我正在嘗試找到一種方法，能夠更新任何新單位產品的單位代碼，但保留已建立的單位產品的原始單位代碼。即，如果單元代碼在提供的主題之間發生變化，我希望單元代碼能夠反映創建單元課程時的準確...
來自於 2024-04-02 22:48:20
0
1
389
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板