Web page Standardization Tutorial: Application of Tables

For people who just touch css layouts, it's often confusing to use tables (table). In many places, I've seen people think of "avoid table layouts" as "not using table tags at all." It's worth noting that the tables are available and very useful--as long as they are used properly.

Yes, you have to try to avoid the layout with the form. But for tabular data, you should use table. I'd like to talk about how to use tables to organize the presentation of tabular data. In HTML and XHTML, tables are more than rows (row) and cells (cell), and many other elements, especially if you want to make the data easier to understand.

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

Tables should not be used purely to lay out document content, which may cause problems when working with render non-visual media. In addition, when used with pictures, these tables may appear too large on one system and force the user to drag the horizontal scroll bar, in order to reduce these problems, designers should use style sheets to control the layout rather than the table.

This is quite clear, although the document says "should" rather than "must", so the specification is flexible.

But this article is not about using table layouts, but about using tables to organize the presentation of tabular data--the original meaning of the table.

When a table is used to organize the actual data, it is not just a layout-arranging lattice. Most people can see the relationship between the title and the data cell from the table layout and performance. People who are blind or have visual impairments cannot do this. If a table is to be understood by people who use screen readers or other non-visual user agents (UA), it needs to tell the user how the information it contains is connected.

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

Table Head, <th>

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

<table>
<tr>
<td>公司</td>
<td>雇员</td>
<td>成立于</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>

Without Borders and decorations, the above code looks like the following in your current browser:

Using CSS to slightly decorate the table, you can make the header in a graphical browser more obvious:

A person with a normal vision can easily and quickly understand the relationship between the header and the data cells. On the other hand, those who use screen readers can hear words in the following order: Company, employee, founded, ACME inc,1000,1947,xyz corp,2000,1973. It is not very easy to understand the relationship.

The first step-the simplest-is to make the table more meaningful by properly marking the header. Very simple: just use the <th> tag instead of the <td> tab of the header.

<table>
<tr>
<th>公司</th>
<th>雇员</th>
<th>成立于</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>