表格用法

原创 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>

 

Latex中的一些表格用法总结(二)

如果我们要构建一个行列式: 可以使用下面的代码 $\left(\begin{tabular}{ccc|c} a11 & a12 & a13 & b1 \\ a21 & a22 & a23 & b...

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

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

Spreadsheet电子表格控件安装及用法总结

Spreadsheet是一个用来查看和编辑Excel电子表格文件的控件,它可用在类似Excel的界面上。它结合了很多我们最流行的部件,像网格控件,Ribbon组件,公式引擎,还有很多其他控件。旨在创建...

关于webix数据表格用法完整示例

本文用简单示例,说明webix如何快速实现数据表的锁列,锁标题行,翻页,数据统计,排序,这些功能只需要配置实现,不需要写代码。 本文提供所有运行的源代码,可以导入到MyEclipse中即刻运行。...

QTableView基本用法讲解,Qt表格控件的使用方法

QTableView是Qt中用来把数据集以表格形式提供给用户的一个控件,它与C++Builder中的DBGrid作用类似。坦白的说,DBGrid的使用要比QTableView更容易一些。但QTable...

初学HTML用法大全指导(三)html中建立表格

上一篇博客我们讲了web页面中html脚本语言对图片的设置,这一篇博客我们来聊一聊html页面中经常见到的再普通不过的表格。这篇博客我会首先去聊一聊怎样在web页面用html标签创建表格,其次我会聊一...

JQuery表格插件datatables用法详解

这篇文章主要介绍了jQuery表格插件datatables用法,包括分页、排序等功能,是jQuery表格插件datatables比较基础的部分知识,需要的朋友可以参考下 一、Datatabl...
  • AinUser
  • AinUser
  • 2017年03月24日 12:16
  • 211

HTML标签用法(四)图形标记&表格标记

图形标记 代码 图形标记 效果图 表格标记 代码 表格标记 姓名 年龄 pe...

JS表格分页组件:fupage的设计思路和具体用法(未来考虑开源,争取在2015年)

一、背景         之前在秒针工作的时候,某js高级工程师写了很多自己的组件,其中一套是分页组件,叫做st-grid。不过在我看来,bug太多,我经常给他反馈bug,我也不清楚为啥别人没有发现。...

QTableView基本用法讲解,Qt表格控件的使用方法

QTableView是Qt中用来把数据集以表格形式提供给用户的一个控件,它与C++Builder中的DBGrid作用类似。坦白的说,DBGrid的使用要比QTableView更容易一些。但QTable...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:表格用法
举报原因:
原因补充:

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