表格用法
http://www.lunji.com/develop/table-develop.htm

表格用法

<script type="text/javascript"> &amp;amp;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;amp;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>

  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>
在没有边框与样式风格的情况下,显示如下:
CompanyEmployeesFounded
ACME Inc10001947
XYZ Corp20001973

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

CompanyEmployeesFounded
ACME Inc10001947
XYZ Corp20001973

对于一个视力正常的人,现在可以很快的在消息头与格格数据元素建立联系。
首页,并也是最简单的方法,正确的标志表格的消息头。方法也很简单,只是用在表格的消息头中,用<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>
CompanyEmployeesFounded
ACME Inc10001947
XYZ Corp20001973

 

表格的标题,<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
CompanyEmployeesFounded
ACME Inc10001947
XYZ Corp20001973
缩短消息头,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
CompanyEmployeesFounded
ACME Inc10001947
XYZ Corp20001973

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

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

有些表格稍复杂,我们去掉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
 EmployeesFounded
ACME Inc10001947
XYZ Corp20001973
在这个表格里,每个数据元素有两个消息头。需要注意的是,在不可视的浏览器中,应加个范围属性
  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
 EmployeesFounded
MenWomen
ACME Inc7003001947
XYZ Corp12008001973

  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>

 

阅读更多
个人分类: 开发文档
想对作者说点什么? 我来说一句

我的简单表格实现商品的管理

2007年11月27日 46KB 下载

html表格属性

2014年05月23日 2KB 下载

个人留言版

2013年05月12日 5KB 下载

Excel应用大全

2012年07月24日 4.8MB 下载

表格数据处理matlab程序

2012年12月25日 124B 下载

java中的表格用法JTABLE

2009年05月08日 1KB 下载

jqgrid插件相关说明

2015年11月06日 28KB 下载

HTML表格使用

HTML表格使用

byrantch byrantch

2016-04-03 13:00:48

阅读数:507

没有更多推荐了,返回首页

不良信息举报

表格用法

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭