Standardization--form _css/html

for those who have just touched the CSS layout, it is often confusing how to use tables (table). I have seen in many places that people use the "avoid table layout" as a "no table label at all." It is important to note that tables are usable and very useful-as long as they are used correctly.

Yes, you have to try to avoid using tables to lay out. But for tabular data, you should use Table. I want to talk about how to use tables to organize table-of-expression data. In HTML and XHTML, tables are not just row and cell (cell), there are many other elements, especially if you want to make your data easier to understand.

First of all, a bit of background knowledge, "Avoid table layout" This sentence can be found in the table of the HTML 4.01 Specification section:

Tables should not be used purely for the layout of document content, which may cause problems when dealing with rendering non-visual media. In addition, when used with pictures, these tables may appear too large on a system and force the user to drag the horizontal scroll bar, in order to reduce these problems, the designer should use style sheets to control the layout instead of the table.

It is clear that the specification is resilient, even though the document says " should " rather than " must ".

But instead of discussing whether to use table layouts, this article uses tables to organize tabular data--the original intent of the form.

When a table is used to organize actual data, it is not just a grid of layouts. The relationship between the header and the data cells can be seen from the layout and performance of the table. People who are blind or visually impaired cannot do this. If a table is to be understood by people who use a screen reader or other non-visual user agent (UA), it needs to tell the user how the information it contains is linked.

Fortunately, HTML provides many elements and attributes in this area. However, using these features to enhance ease of use and semantics is difficult and is not easy to understand. In this article, I try to explain how to use them.

Table header,

Let's start with a very simple table-containing only one row of headers and two rows of three columns of data. If you use the previously popular practice of using only table rows and cells, write them as follows:

1. 
















Li class= "tab2" >












company	Employees	established in
ACME Inc	+	1947
XYZ Corp	+	1973

没有边框和修饰，那么上面的代码在你现在的浏览器里看起来就如下：

Company	Employees	Founded in
ACME INC	1000	1947
XYZ Corp	2000	1973

用CSS稍微修饰一下表格，你可以使表头在图形化浏览器里面更加明显：


Company	Employees	Founded in
ACME INC	1000	1947
XYZ Corp	2000	1973

一个视力正常的人，很容易并且很快就可以明白表头和数据单元格之间的关系。从另一方面讲，那些使用屏幕阅读器的人可以听到如下顺序的词：公司，雇员，成立于，ACME Inc，1000，1947，XYZ Corp，2000，1973。不是十分容易明白其中的关系。

第一步——最简单的——通过适当的标出表头来使得表格更加有意义。很简单：只要使用标签取代表头的标签即可。

2. 















10. < code>












16. < code>


/table>

Company	Employee	established in
ACME Inc	19
XYZ Corp	1973

company	Employees	Founded in
ACME INC	1000	1947
XYZ Corp	2000	1973

这个例子虽然简单，但是已经包含了足够的信息使得屏幕阅读器能够让使用者明白表头和数据单元格之间的关系。一个屏幕阅读器一般会这么读：公司: ACME Inc. ，雇员: 1000，成立于: 1947., 以此类推。比之前好多了。

表格标题，

标签可以为表格提供一个简短的说明，和图像的说明比较类似。默认情况下，大部分可视化浏览器显示表格标题在表格的上方中央。CSS里的caption-side属性用来控制表格标题显示的地方。大部分浏览器只能把表格标题显示在表格的上方或者下方，只有一些浏览器支持左边或者右边。这个就留给大家去试试了。

使用的时候，标签一定要紧接着开始的

标签写，如下：

Company

Table 1:company Data

	Employees	founded
ACME INC	1000	1947
XYZ Corp	2000	1973

Company

Table 1:company Data

	Employees	founded
ACME INC	1000	1947
XYZ Corp	2000	1973

Of course you can also use CSS to style the table headings. However, to achieve the same effect in different browsers also requires a certain skill, this also left to you to practice.

Table Interpretation: summary properties

The average person can easily decide whether to study the details of the table, just a glance to see how big the table is, and probably what the content is. But people who use screen readers are not that easy unless we add attributes to the table summary . This can provide a more detailed description than the label.

The contents of the Sumary property are not displayed by the Visual browser, so you can make the description as long as possible, so that those who "listen" understand the contents of the table. Of course, do not overdo it, when necessary to add the summary attribute, such as for a very complex table, adding a summary property can use screen reader people relatively simple to understand the contents of the table.

1. 































Company

Table 1:company Data

	Employees	founded
ACME INC	1000	1947
XYZ Corp	2000	1973

缩写表头:abbr属性

当屏幕阅读器遇到一个表格，每一行会把表头连每一个数据单元格一起读出来。如果表头很长，听一遍一遍的读是十分乏味的。通过使用abbr属性，可以给那些长的表头提供简写形式，取代表头的内容。abbr属性是可选的，大部分情况表头还是（或许是应该）比较简短的。

稍微修改一下刚才的表格，让表头更长些，abbr属性就可以这样用：

1. 































Company Number of Year

Table 1:company Data

Name	Employees	Foundation
ACME INC	1000	1947
XYZ Corp	2000	1973

Company Number of Year

Table 1:company Data

Name	Employees	Foundation
ACME INC	1000	1947
XYZ Corp	2000	1973

对于第一行数据，屏幕阅读器会读表头的全称，而从第二行开始即使用简称。

这样让数据表格适应布局是挺困难的，而以下的做法更为常见：即让表头尽可能的短，或者简写，使用title属性或者标签提供一个更长的说明。

把表头和数据联系起来：scope，id，headers属性

就我用到现在，很多表格要比上面提供的例子复杂的多。让例子复杂一点，我会移去“Company”表头，并且把第一列的数据移到表头单元格里：

1. 
































Table 1:company Data

	Employees	founded
ACME INC	1000	1947
XYZ Corp	2000	1973

Table 1:company Data

	Employees	founded
ACME INC	1000	1947
XYZ Corp	2000	1973

在这个表格里，每一个数据单元格都有两个表头。最简单的方法让那些非可视的浏览器理解这个表格，就是为每个表头添加一个scope属性。

1. 
































Table 1:company Data

	Employees	founded
ACME INC	1000	1947
XYZ Corp	2000	1973

Scope属性同时定义了行的表头和列的表头：

• col: 列表头
• row: 行表头

在第一行的 加上值为col的scope属性，声明他们是下面数据单元格的表头。同样的，给每行的开头加上值为row的scope属性声明他们是右边数据单元格的表头。

Scope属性还有两个值：

• colgroup: 定义列组（column group）的表头信息
• rowgroup: 定义行组（row group）的表头信息

一个列组是由标签定义的。行组则是由、和定义的。稍后我将会详细介绍它们。

如果你既想要保留“Company”表头，而又想让公司名字作为行表头（row headers）显示，你会怎么做？那样的话，应该使得包含公司名字的单元格同时提供表头和数据信息。也就是说，标签也应该加上scope属性：

1. 































Company

Table 1:company Data

	Employees	founded
ACME INC	1000	1947
XYZ Corp	2000	1973

这样的话可视化浏览器不会默认的把company name显示为表头。所以需要用CSS来修正一下，就刚才那个例子，我使用了下面的CSS：

1. td[scope] {

2. font-weight:bold;
3. }

要注意上面的规则使用了属性选择符，IE是不支持的。而通过添加一个class来样式化表头是个不错的办法。

Company

Table 1:company Data

	Employees	founded
ACME INC	1000	1947
XYZ Corp	2000	1973

另一个连接表格数据单元格和表头的方法就是给每一个表头添加一个唯一的ID。然后为下面的数据单元格添加headers属性，这个headers属性值包含用空格分开的各个ID，这些ID代表的表头各自关联到该数据单元格上。这样做很复杂，只是当有超过两个表头的单元格才用。在复杂的和不规则的表格中，scope属性就力不从心了。

为了演示，我修改了一下表格，加上了公司雇员性别及人数：

1. 












































Table 1:company data

	employees		founded
	men	women
acme Inc	700	300	1947
xyz Corp	1200	800	1973

Men

Table 1:company Data

	Employees		founded
		Women
ACME INC	700	300	1947
XYZ Corp	1200	800	1973

你可以发现，这种方法真的很麻烦，所以如果可能的话，还是尽量用scope属性吧。

跨行和跨列

在以前用表格布局的年代，rowspan属性和colspan属性常被用来让单元格跨几列或跨几行，来布局那些经过整齐切割的图像。这两个属性现在还在用， 因为并没有CSS来控制单元格的跨行和跨列。仔细想想，其实是很有道理的：跨行和跨列示表格结构(structure)的一部分，而不是其表现(presentation)。

列和列组：和

HTML提供了和标签来为相关的表格列分组。这样就可以（在一些浏览器中）使用CSS来单独的为列样式化。列组也可以使用scope属性来标明其表头信息。

这就是我要说的关于列和列组的全部。更多信息参考“其他”部分。

行组： , , 和

表格的行可以分组为表头组(), 表尾（或表注）组(), 然后是一个或多个表身() 。每一个行组必须包含一个或多个表格行。

If a table contains , it must appear before and . The must appear before . If you do not use and , the tab can also be added (and not necessarily, as you like). A table structure with a row group looks like this:

1. 





4. ... More table header rows
   






7. ... More rows in footer
   






10. ... First
line







14. ... Second
line



16. ... More

使用行组有以下几个原因：

• 这样样式化表头、表尾和表身比较方便，而且独立，不必要给每个标签加样式或class。
• 当打印比较长的表格的时候，一些浏览器（比如基于Mozilla的）会在每一页的开头重复表头和表尾的内容，这样阅读打印版本的表格就比较方便。
• 区分开表头和表尾也可以使一些浏览器浏览表格的时候，只滚动表身。

仅为数据表格而写

本文所写的所有都是关于使用HTML表格来组织和表现数据。如果你还是想用表格来布局，那么上文所述的都没有意义而且用不到。没有summary属性、没有表头、没有、什么都没有，没有格式，陈旧的布局表格除了

,,和的描述也不是很深。对于格式化和样式化还有border模型我也没有深究，还缺少一个真正复杂的表格的例子。

想了解更多信息，可以参考以下文章：

• Tables in HTML documents
• CSS formatting of tables
• Techniques for Accessible HTML Tables
• Building accessible websites: Tables and frames
• A table, s'il vous plaît



You can do nothing. There is also the risk of how to face those non-visual user agents (UA). Advantage It seems that there is a lot of work to do with HTML to make a semantic data table. This is true for complex tables. Sometimes it's impossible to write it by hand. But for a simple table, use a

Plus the scope attributes, it's quick and easy. It is very obvious that a semantic table is good for a viewer who uses a screen reader or other assistive technology. It is very difficult to make large and complex forms "listen" to them, so make the tables as simple as possible. It's also good for designers and users who use visual browsers: a semantic table with a large number of interfaces can be styled using CSS, and a good style makes the table easier to use. Other In addition to this article, there is more about data table content. For example, there is no mention axis of attributes, and for