Bluesailor散记-留言本下载 \ 开发文档

表格用法


原文出处：http://www.456bereastreet.com/archive/200410/bring_on_the_tables/
由于水平与时间有限，译的有些乱，还请阅读者见谅。 但原作者的网站很不错，推荐有时间去看看。

对于刚涉足用样式定义的网站的新人来说，用表格布格常使其感觉困惑：因为有许多人讲网站应该避免用表格来布局，结果导致一个表格也不使用。我们应该明确表格依然非常棒－－前提是我们使用得当的话。

同意在网页布局尽可能避免用表格，是不错的做法，但对于表格化的数据，使用表格仍然是很必要的。下面我将谈谈如何正确的使用表格来格式化表格数据。有不少内容超出了表格在HTML与XHTML中的行与列，特别是当你想建个有效的表格时。

是的，应该尽力避免使用表格来布局，但对于列格化的数据，表格仍然是你需要用的。我将谈一下如何使用表格。在XHTML与HTML中，除了行与列外，仍有不少元素。

表格的消息头，<th>

  1. <table>
  2. <tr>
  3. <td>Company</td>
  4. <td>Employees</td>
  5. <td>Founded</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>
在没有边框与样式风格的情况下，显示如下：
Company Employees Founded
ACME Inc 1000 1947
XYZ Corp 2000 1973

当使用一些样式来格式化表格，你将能够清楚的分开哪些是表格的消息头，在图形界面的浏览器中:

Company Employees Founded
ACME Inc 1000 1947
XYZ Corp 2000 1973

对于一个视力正常的人，现在可以很快的在消息头与格格数据元素建立联系。
首页，并也是最简单的方法，正确的标志表格的消息头。方法也很简单，只是用在表格的消息头中，用<th>元素替换<td>。

  1. <table>
  2. <tr>
  3. <th>Company</th>
  4. <th>Employees</th>
  5. <th>Founded</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>
Company Employees Founded
ACME Inc 1000 1947
XYZ Corp 2000 1973

 

表格的标题,<caption>

<caption>表格标签，可以为表格数据提供一个简短的说明。在可视化的浏览器中，<caption>中的元素位居表格外，上方的中部。如果需要也可以格式化其所处的位置。
当用元素<caption>时，必须紧跟<table>元素。

  1. <table>
  2. <caption>Table 1: Company data</caption>
  3. <tr>
  4. <th>Company</th>
  5. <th>Employees</th>
  6. <th>Founded</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 1: Company data
Company Employees Founded
ACME Inc 1000 1947
XYZ Corp 2000 1973
缩短消息头，abbr属性
当使用可以阅读的浏览器时，有时表格的消息头缩写，以便于阅读。
  1. <table>
  2. <caption>Table 1: Company data</caption>
  3. <tr>
  4. <th>Company</th>
  5. <th>Employees</th>
  6. <th>Founded</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 1: Company data
Company Employees Founded
ACME Inc 1000 1947
XYZ Corp 2000 1973

发声阅读时，可以先全部读第一行的消息头，第二行时就只读出缩写的部分了。

用数据来说明消息头，概要

有些表格稍复杂，我们去掉Company消息头，并将些列的两个数据定义为消息头

  1. <table summary="The number of employees and the foundation year of some imaginary companies.">
  2. <caption>Table 1: Company data</caption>
  3. <tr>
  4. <td></td>
  5. <th>Employees</th>
  6. <th>Founded</th>
  7. </tr>
  8. <tr>
  9. <th>ACME Inc</th>
  10. <td>1000</td>
  11. <td>1947</td>
  12. </tr>
  13. <tr>
  14. <th>XYZ Corp</th>
  15. <td>2000</td>
  16. <td>1973</td>
  17. </tr>
  18. </table>
Table 1: Company data
  Employees Founded
ACME Inc 1000 1947
XYZ Corp 2000 1973
在这个表格里，每个数据元素有两个消息头。需要注意的是，在不可视的浏览器中，应加个范围属性
  1. <table summary="The number of employees and the foundation year of some imaginary companies.">
  2. <caption>Table 1: Company data</caption>
  3. <tr>
  4. <td></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>

如何保留表格中的数据即是消息头，又是数据，如原来company列？
  1. <table summary="The number of employees and the foundation year of some imaginary companies.">
  2. <caption>Table 1: Company data</caption>
  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并不支持。

拓展：

  1. <table class="extbl" summary="The number of employees and the foundation year of some imaginary companies.">
  2. <caption>Table 1: Company data</caption>
  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 1: Company data
  Employees Founded
Men Women
ACME Inc 700 300 1947
XYZ Corp 1200 800 1973

  1. <table>
  2. <thead>
  3. <tr></tr>
  4. … more rows for the table head
  5. </thead>
  6. <tfoot>
  7. <tr></tr>
  8. … more rows for the table foot
  9. </tfoot>
  10. <tbody>
  11. <tr></tr>
  12. … more rows for the first table body
  13. </tbody>
  14. <tbody>
  15. <tr></tr>
  16. … more rows for the second table body
  17. </tbody>
  18. … more table bodies if necessary
  19. </table>