表格用法

http://www.lunji.com/develop/table-develop.htm

表格用法

<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script>
原文出处：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>