表格用法

原创 2005年05月09日 07:46:00
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>

 

html5 表格使用基础

在 HTML 4.01 中,不赞成使用 "align" 和 "bgcolor" 属性。 在 HTML5 中,不支持 标签的任何属性。...
  • li5685918
  • li5685918
  • 2015年12月14日 00:08
  • 276

3分钟学会表格中的函数使用!

据说看了这篇文章的人,工作效率都提升了300%
  • kongki
  • kongki
  • 2016年12月01日 11:39
  • 582

HTML5表格的介绍与使用

(1)表格中的常见元素,用来定义表格,定义表格标题,表头,行,单元,页眉,主体,页脚,列属性 (2)表格的常见用法:          1,没有边距的表格(代码如下)              ...
  • darongzi1314
  • darongzi1314
  • 2015年07月28日 18:40
  • 816

Latex中的表格总结

导言 好久没用Latex了,所以一用的时候就出问题了,在不赶deadline的时候先总结好,用的时候直接ctrl+c,要是你也需要,欢迎参考,不针对没有Latex基础的小伙伴,所以不打算写的很细致。 ...
  • Grace_0642
  • Grace_0642
  • 2014年12月14日 07:49
  • 1818

HTML table使用详解

对于table来说,在一些小的模块中进行表格布局是非常好用的。我们可以这样来理解table,主要分成table部分和td部分。 table部分: 主要是来控制外边框的(就是最外面一层边框,不包括里面...
  • crown_0726
  • crown_0726
  • 2015年02月01日 10:55
  • 8743

HTML中表格width和height具体用法

在对一整个网页进行框架设计时可能会用到表格的嵌套用法,其中要求对width和height属性值个人觉得比较重要. 标签width:在table中用来设置宽度的最大值,不能改变即使字数超过也不能改变但如...
  • SpeedyElane
  • SpeedyElane
  • 2017年04月14日 21:53
  • 242

Latex中的表格用法总结(三)

我们可以使用makecell命令对表格单元格中的数据进行一些变换的控制。我们可以使用 \ 命令进行换行,也可以使用p{(宽度)}选项控制列表的宽度使用\makecell 命令我们需要在导言区添加\us...
  • Grace_0642
  • Grace_0642
  • 2016年08月01日 02:01
  • 20394

Excel:公式中的这些特殊数字

19E+307 9E+307是科学计数法表示的一个数字,就简单理解成是Excel支持的一个很大的数字就可以了。 用法示例: =LOOKUP(9E+307,A:A) ...
  • 3150379
  • 3150379
  • 2017年02月15日 10:52
  • 233

LaTex表格用法

记录表格的基本语法。
  • u013344915
  • u013344915
  • 2016年06月01日 20:27
  • 370

HTML表格标签用法

今天偶然发现自己对表格中的一些标签用法不是很熟悉,经过在网上一些查找,让自己更加熟悉,在此进行记录。 1、form, 标签用于为用户输入创建 HTML 表单。 表单能够包含 input 元素,比如...
  • wang17866603359
  • wang17866603359
  • 2017年09月19日 14:36
  • 265
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:表格用法
举报原因:
原因补充:

(最多只允许输入30个字)