表格用法
<script type="text/javascript"> &amp;lt;!-- google_ad_client = "pub-9194760792135763"; google_ad_width = 728; google_ad_height = 90; google_ad_format = "728x90_as"; google_ad_channel =""; google_color_border = "A8DDA0"; google_color_bg = "EBFFED"; google_color_link = "0000CC"; google_color_url = "008000"; google_color_text = "6F6F6F"; //--&amp;gt; </script><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>
<table>
<tr>
<td>Company</td>
<td>Employees</td>
<td>Founded</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>
</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>。
<table>
<tr>
<th>Company</th>
<th>Employees</th>
<th>Founded</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>
</table>
Company | Employees | Founded |
---|---|---|
ACME Inc | 1000 | 1947 |
XYZ Corp | 2000 | 1973 |
表格的标题,<caption>
<caption>表格标签,可以为表格数据提供一个简短的说明。在可视化的浏览器中,<caption>中的元素位居表格外,上方的中部。如果需要也可以格式化其所处的位置。
当用元素<caption>时,必须紧跟<table>元素。
<table>
<caption>Table 1: Company data</caption>
<tr>
<th>Company</th>
<th>Employees</th>
<th>Founded</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>
</table>
Company | Employees | Founded |
---|---|---|
ACME Inc | 1000 | 1947 |
XYZ Corp | 2000 | 1973 |
当使用可以阅读的浏览器时,有时表格的消息头缩写,以便于阅读。
<table>
<caption>Table 1: Company data</caption>
<tr>
<th>Company</th>
<th>Employees</th>
<th>Founded</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>
</table>
Company | Employees | Founded |
---|---|---|
ACME Inc | 1000 | 1947 |
XYZ Corp | 2000 | 1973 |
发声阅读时,可以先全部读第一行的消息头,第二行时就只读出缩写的部分了。
用数据来说明消息头,概要有些表格稍复杂,我们去掉Company消息头,并将些列的两个数据定义为消息头
<table summary="The number of employees and the foundation year of some imaginary companies.">
<caption>Table 1: Company data</caption>
<tr>
<td></td>
<th>Employees</th>
<th>Founded</th>
</tr>
<tr>
<th>ACME Inc</th>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<th>XYZ Corp</th>
<td>2000</td>
<td>1973</td>
</tr>
</table>
Employees | Founded | |
---|---|---|
ACME Inc | 1000 | 1947 |
XYZ Corp | 2000 | 1973 |
<table summary="The number of employees and the foundation year of some imaginary companies.">
<caption>Table 1: Company data</caption>
<tr>
<td></td>
<th scope="col">Employees</th>
<th scope="col">Founded</th>
</tr>
<tr>
<th scope="row">ACME Inc</th>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<th scope="row">XYZ Corp</th>
<td>2000</td>
<td>1973</td>
</tr>
</table>
如何保留表格中的数据即是消息头,又是数据,如原来company列?
<table summary="The number of employees and the foundation year of some imaginary companies.">
<caption>Table 1: Company data</caption>
<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>
</table>
这种情况,可视浏览器不会按默认显示COMPANY NAME,我们需要一小段CSS来修正它,例如我用如下CSS:
td[scope] {
font-weight:bold;
}
拓展:
<table class="extbl" summary="The number of employees and the foundation year of some imaginary companies.">
<caption>Table 1: Company data</caption>
<tr>
<td rowspan="2"></td>
<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>
</table>
Employees | Founded | ||
---|---|---|---|
Men | Women | ||
ACME Inc | 700 | 300 | 1947 |
XYZ Corp | 1200 | 800 | 1973 |
<table>
<thead>
<tr></tr>
… more rows for the table head
</thead>
<tfoot>
<tr></tr>
… more rows for the table foot
</tfoot>
<tbody>
<tr></tr>
… more rows for the first table body
</tbody>
<tbody>
<tr></tr>
… more rows for the second table body
</tbody>
… more table bodies if necessary
</table>