Click here to return to the webpage HTML tutorial topic. above: Markup Language -- title Original Source standardization design solution-markup language and style manual WebStandardsSolutionsTheMarkupandStyleHandbookPart1: GetDownWithMarkup from markup syntax to Chapter2 evil
Standardized design solutions-Markup Language and Style Manuals
Web Standards Solutions The Markup and Style Handbook
Part 1: Get Down With Markup
Chapter2 evil table?
Do you know? I don't know when to start using a table, but it turns into a behavior full of evil? Indeed, the biggest myth of writing web Pages Based on web standards is "never use tables any more, never! "It sounds like a form that must be avoided like a plague. It must be sealed and thrown into a dust-filled cabinet. It should be preserved as an antique circulating in the early age of network development.
Where does such disgust come from? It may be very simple at the beginning, at least for a good reason. A lot of people are justified in promoting the benefits of abandoning the traditional layout of nested tables and GIF images, and switching to a flexible and structured css layout. we may just get rid of all the tables, or even insist on expelling all the tables.
Later in the book, we will see the css layout method and all the benefits it brings. but now let's take a look at how to use a table when marking a data list. we will study a few simple ways to make the data list easier to use and more beautiful.
Table
When marking list data, we have no reason not to use table tags. But what is list data? Here are some examples: Calendar workbook chart time table
For these examples and many other cases, you must use very complex and strict css special effects to make the materials look like tables. Maybe you can imagine it, with clever css floating, after locating all the projects, the results are incompatible, not to mention reading each document accurately after the css is removed. in fact, we don't have to fear tables-we should use them with their initial goals.
Suitable tables for all
One of the reasons for the abuse of the table is that there will be availability defects if you are not careful with the use. for example, it is difficult for the screen reader to read the content correctly, while small screen devices are often disturbed by tables used for layout. However, we have some simple ways to increase the availability of List data tables. at the same time, a flexible structure is established to facilitate css settings in the future.
Let's take a look at the simple example in-1, which is the league record of the American baseball league:
# P #
Add Abstract
In addition, we can
The label adds the summary attribute to further explain the purpose and content of the table. Abstract attributes are especially important to non-visual browsers, which can help them explain the table content.The following code adds the summary attribute to the example table:
Boston Red Sox World Series Championships
| Year |
Opponent |
Season Record (W-L) |
| 1918 |
Chicago Cubs |
75-51 |
| 1916 |
Brooklyn Robins |
91-63 |
| 1915 |
Philadelphia Phillies |
101-50 |
| 1912 |
New York Giants |
105-47 |
Table Header
When creating a data table, it is very important to make good use of the header. When marking important cells, we can make full useLabel, instead of using
It implies that the user cell is an important display effect tag, just as we used the title tag in Chapter 2 to mark the paragraph title.
The visual browser may display the effect centered in boldLabel content, but we can still useThe uniqueness of tags. Later, we will add different styles to these important content to facilitate storage inGeneral information and differences.
In addition to the advantages of the display effectTags can also help non-visual browsers-this part will be discussed later.
The header in the example table is the top line: Year, Opponent and Season Record (W-L). Let's Replace the display label with the correct header label:
Boston Red Sox World Series Championships
| Year |
Opponent |
Season Record (W-L) |
| 1918 |
Chicago Cubs |
75-51 |
| 1916 |
Brooklyn Robins |
91-63 |
| 1915 |
Philadelphia Phillies |
101-50 |
| 1912 |
New York Giants |
105-47 |
UseLabel to mark the table header cells and the effect in-1 is the same. Let's see why this method is better:
We do not need to use additional display effect labels to highlight the header outside the data content.
According to the default settings, most visual browsers will show the effect centered in boldThe content in the label, allowing users to easily distinguish the content of the header from the table.
Because of itsLabels are relatively independent, so we can add a style different from the data content to the header.
We will continue to discuss other benefits of using the header label in the subsequent sections.
# P #
Relationship between table header and Data
We can use the headers attributeTo make it easier for screen readers to organize table content for the people they need. after this attribute is used, the screen reader can read the table content logically, instead of reading the rightmost content from the leftmost of each column as usual.
We will continue to use the Red Sox record table as an example to demonstrate how to use it. First, we need <表格中的每个 Add a unique id, and then add the headers attribute to each data cell, corresponding to the correct header.
It is easy to add an id for each header, as shown in the following code:
Boston Red Sox World Series Championships
| Year |
Opponent |
Season Record (W-L) |
| 1918 |
Chicago Cubs |
75-51 |
| 1916 |
Brooklyn Robins |
91-63 |
| 1915 |
Philadelphia Phillies |
101-50 |
| 1912 |
New York Giants |
105-47 |
We select a brief descriptive name for each header id, and then add the appropriate headers attribute for each data cell to match the correct header id:
Boston Red Sox World Series Championships
| Year |
Opponent |
Season Record (W-L) |
| 1918 |
Chicago Cubs |
75-51 |
| 1916 |
Brooklyn Robins |
91-63 |
| 1915 |
Philadelphia Phillies |
101-50 |
| 1912 |
New York Giants |
105-47 |
After establishing a ing between the header and content, the screen reader may meet to read each row of the table in this way: "Year: 1918, Opponent: Chicago Cubs, Season Record (W-L): 75-51 ", this is more meaningful than reading the content of each cell from left to right.
Let everyThere are other advantages of unique IDs. We can use this identification basis to set special css rules. This method will be discussed at the end of this chapter.
# P #
Use abbr attributes
In the previous example, you may think that the "Season Record (W-L)" in the header is too long to read with a speech synthesizer, at this time, as long as the abbr attribute is added, we can shorten the pronunciation, while retaining the content for the visual browser.The original text in the cell.
Boston Red Sox World Series Championships
| Year |
Opponent |
Season Record (W-L) |
| 1918 |
Chicago Cubs |
75-51 |
| 1916 |
Brooklyn Robins |
91-63 |
| 1915 |
Philadelphia Phillies |
101-50 |
| 1912 |
New York Giants |
105-47 |
After we add abbr = "Record", the screen reader will read the "Record" after using the brief version of the header ".
,And
Here I also want to mention three table-related labels. they not only provide more precise semantics for the table structure, but also provide additional css labels so that you do not needLabels design so many classes.
Reference A W3C description of these labels in the HTML4.01 specification (https://www.php1.cn /):
Reference:
Table rows can be divided into Table headers by using thead, tfoot, and tbody labels. The table end and number of table subjects are unlimited. this classification allows the browser to support the function of independently Rolling Table subjects. when a long table is printed, the header and end of the table can also appear on each page that contains the table data.
Therefore, using this classification method makes it easier for browser users who support independent table subjects to read Table content, especially long tables.
AndMust appear inPreviously, the browser and other devices were able to load the content first and mark the table as like in this table row classification:
... Table header content...
... Table footer content...
... Table data row...
... Table data row...
... Table data row...
You will find thatAndTags are enclosed and placed before the table data rows.
As I said before, these labels not only provide more precise semantics for the table, but also provide style anchor for css so that you can set css rules for specific content without havingDesign so many classes.
For example, if we only wantSet a background color that is different from other blocks. You only need to write such a css file to achieve the goal:
Tbody {
Background-color: gray;
}
If there is no tbody tag, we need to add a gray background for eachAdding class attributes to tags. Meaningful tag methods often make it easy to set styles with css later. This is a good example.
# P #
Is the table evil?
I think, if we make good use of the table label design at the beginning, then the answer is "No! ". Misuse of tables to create complex nested la s will naturally be condemned, but tables do provide the data block with the desired structure.
We cannot describe the skills required to create a perfect table in the entire book. Therefore, we hope that you will know how to create a simple and available simple table that facilitates css modification.
When talking about Styles, let's use several different css techniques to modify the previous examples.
Skill Extension
Like in the previous chapter, we use flexible semantic structured markup as the basis, and then use css to add some styles to him.
First, let's take a look at simple border techniques, create a single line border in the example, and then add a unique style to the table title and header.
Create border
Are you tired of the Three-dimensional effect of the default border attribute? Me too. in general, adding border = "1" to the table label will have a similar effect with-1. Of course, you can also change the method. Here is a trick to use css to make beautiful and clean borders. first, we give eachAdd a pixel border to both sides of the Cell (right and bottom:
Th, td {
Border-right: 1px solid #999;
Border-bottom: 1px solid #999;
}
Adding borders on both sides is the key to creating an equal width for each border and allowing most popular browsers to correctly display the border. if I add borders around the border, the top and left sides of the border will overlap when the cells are arranged. In the following example, I will provide a method to achieve the effect of a child with only one border rule.
You will find that the entire table in-2 lacks only the top and left edges. To complete the border
Remove gap
Adjust the Display Effect of the table Header
Add the border-top and border-left attributes with the same style to the element.Table {Border-top: 1px solid #999;Border-left: 1px solid #999;}Th, td {Border-right: 1px solid #999;Border-bottom: 1px solid #999;}# P #Now we have a complete table, but what is the gap between borders? Unfortunately, most browsers have a default set of out-of-the-box patches, so these annoying gaps are exposed.What we can do is add the border-collapse attribute to the table element to remove these gaps and get the style we want.Table {Border-top: 1px solid #999;Border-left: 1px solid #999;Border-collapse: collapse;}Th, td {Border-right: 1px solid #999;Border-bottom: 1px solid #999;}After adding the collapse attribute to border-collapse, we can see the exact single-line border style, 3-4# P #We can easily add a background color to the header and select different fonts to make the header more visible, because we use
Instead of directly setting the content to bold in the row, we can directly set the style for the header content without adding any other labels.
We also add a patch under the title, and use different fonts, colors (of course red) to highlight the title content (-7)
Table {
Border-top: 1px solid #999;
Border-left: 1px solid #999;
}
Caption {
Font-family: Arial, sans-serif;
Color: #993333;
Padding-bottom: 6px;
}
Th, td {
Padding: 10px;
Border-right: 1px solid #999;
Border-bottom: 1px solid #999;
}
Th {
Font-family: Verdana, sans-serif;
Background: # ccc;
}
# P #
Specify icon for ID
At the beginning of this chapter |
Is it a unique ID? At that time, we matched these IDs with the headers attribute in the data list to help non-visual browser users understand the table content. Now we can use this id in another place, that is, for each |
Specify different icons.
The icon path will be completely recorded in the css file, so that you can easily replace it when the website is restructured and updated, without having to modify the label part.
Icon
I made three unique icons with photoshop, used on each header in the example: Year, Opponent and Season Record (W-L).-10 is the three icons:
We also found that adding some styles can control the display mode of the List data, making them very attractive, and don't feel fear for using the table. |
