HTML Markup Language - Table Markup_HTML/Xhtml_Web Page Production

Standardized Design Solutions - Markup Language and Style Handbook
Web Standards Solutions The Markup and Style Handbook
Part 1: Get Down With Markup Starting from Markup Syntax
Chapter2 Evil form?
Did you know that when did using tables become a sinful act? Indeed, the biggest myth about writing web pages based on web standards is "Don't use tables anymore, ever!" Listen Forms must be avoided like the plague, must be sealed and thrown into dusty cabinets, and preserved as antiques passed down from the early days of the Internet.
Where does such disgust come from? Maybe in the beginning. Very simple, at least there is a good reason. Many people will confidently promote the benefits of abandoning the traditional layout of nested tables and fill-in-the-blank GIF images, and switching to the flexible and structured CSS layout. We may start to peel off the cocoon. Get rid of all the tables, and even start to stubbornly insist on expelling all the tables - regardless of the occasion.
We will see the CSS layout method and all the benefits of doing so later in the book. But for now we still Let’s first look at how to use tables in the right context—that is, when labeling data lists. We’ll look at a few simple ways to make our data lists easier to use and more beautiful.
That’s it Table
There is absolutely no reason not to use the table tag when labeling list data. But wait, what is list data? Here are some examples: calendar spreadsheet Chart Time Schedule
For these examples and many other cases, very complex and strict CSS effects must be used to make the data look like a table. Perhaps you can imagine what you get after using clever CSS floats and positioning all the items. The incompatible and contradictory results, not to mention that without CSS, accurately reading every piece of information would probably become an impossible task. In fact, we don’t have to be afraid of tables—we should use them for the purpose for which they were designed.
Forms for everyone
One of the reasons forms are reviled is because they have usability flaws if not used with care. For example: screen readers have trouble reading the content correctly, and Small screen devices are often disrupted by tables used for layout, but we have some simple ways to increase the usability of list data tables. At the same time, create a flexible structure for future styling with CSS.
Let’s take a look at Figure 3- A simple example from 1, this is the league record of the American League:

Figure 3-1: Typical data table example
Perhaps this is very depressing for Red Sox fans Statistical data, but Figure 3-1 is a perfect example of list data. It has three table headers (year, opponent, season record (w-l)), followed by four years of data. Above the table is the table title, description The content of the table.
The way to mark this data table is very intuitive. We may complete the work with code like this:

Boston Red Sox World Series Championships< ;/p>

Opponent

Year	Season Record (W-L)< ;/td>
1918	Chicago Cubs
1916	Brooklyn Robins	91-63
1915	Philadelphia Phillies td>	101-50
1912	New York Giants	105-47

The results displayed in this way should be the same as the picture 3-1 is very similar, but we can add some improvements on this basis.
First, we can use a more semantic

tag to store "Boston Red Sox World Series Championships". start tag, which is usually used to store the title of the table or the description of the table data.
It seems that it makes it easier for users to see the theme of the table, and it can also help Someone who knows the content of the page in some other way.
Let’s take out the paragraph at the beginning and add the correct :

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

重要的是,标题必须快速传达后面资料的主题,根据默认设置,大多数可视化浏览器将标签内的文字居中显示在表格的最上面,当然,我们稍后可以使用css来改变默认设置的样式 — 本章的技巧延伸中会讨论这个问题.事实上,现在标题位于独特的标签内,正好让我们之后的修改工作变得轻松简单.
                                               #p#
加上摘要
另外,我们也能为标签加上summary属性,进一步解释这个表格的目的和内容,摘要属性对非可视化浏览器尤为重要,这能帮助它们解说表格的内容.
以下是为示例表格加上摘要属性的代码:

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

表格的表头
在建立数据表格时,善用表头是件很重要的工作.在标记重要单元格时,我们可以发挥标签的作用,而不是使用之类在显示上暗示用户这个单元格是重要的的显示效果标签.就像我们在第二章中使用标题标签标记段落标题一样.
可视化浏览器或许会以粗体居中的效果显示 标签中的内容,但是我们依然可以用 标签的独特性,稍后再给这些重要的内容加上不同的样式,以便于存放在 内的一般资料及进行区别.
除显示效果的优势外,使用 标签也能帮助非可视化浏览器 — 这部分我们稍后进行深入讨论.
示例表格中的表头是最上面的那一行: Year,Opponent和Season Record(W-L).我们来把刚才的显示效果标签替换成正确的表头标签:












1916








< ;tr>



> ;

Boston Red Sox World Series Championships

Year	Opponent	Season Record (W-L)
1918	Chicago Cubs	75-51
Brooklyn Robins	91-63
1915	Philadelphia Phillies	101-50
1912	New York Giants	105-47

Using the tag to mark the header cell has the same effect as in Figure 3-1. Let’s take a look at why this method is better:
We don’t have to use additional display effect tags to highlight the header outside the data content.
According to the default settings, most visual browsers will display the content in the tag in bold and centered effect, allowing users to easily distinguish the difference between the header and the table content.
Since it is relatively independent from the tag, we can add a different style to the table header than the data content.
We will continue to discuss other benefits of using the table header tag in the following chapters. .
                                                                        #p#

The relationship between header and data
We can use the headers attribute to associate the header with the data in the corresponding so that screen readers can It is easier to organize the table content for people who need it. After using this attribute, the screen reader will be able to read the table content more logically, instead of rigidly reading from the left to the right of each column as usual.
We continue to use the Red Sox record table as an example to demonstrate how to use it. First, we need to add a unique id to each in the It is very simple to add an id to each header, just like this:







< ;tr>

Boston Red Sox World Series Championships

Year	Opponent	Season Record (W-L)
1918	Chicago Cubs	75-51
1915	Philadelphia Phillies	101-50
1912	New York Giants	105- 47

We choose a short and descriptive name for each header id, and then we give each data Add appropriate headers attributes to the cell so that the content matches the correct header id:







1918

Boston Red Sox World Series Championships

Year	Opponent	Season Record (W-L)
Chicago Cubs	75-51 td>
1916	Brooklyn Robins< ;/td>	91-63
1915	Philadelphia Phillies	101-50
1912	New York Giants	105-47

After establishing the correspondence between the table header and the content, the screen reader It is possible to read out each row of the table in this way: "Year: 1918, Opponent: Chicago Cubs, Season Record (W-L): 75-51". Compared with reading out the contents of each cell from left to right, This makes a lot more sense.
Letting each have a unique id has other benefits. We can use this identification basis to set special css rules, which will be discussed in the extension of the technique at the end of this chapter. This method.
                                                                        #p#

Use the abbr attribute
In the previous example, you may feel that the "Season Record (W-L)" in the header is too long to pronounce using a speech synthesizer. At this time, as long as we add the abbr attribute, we can shorten the pronunciation content while retaining the original text in the cell for the visual browser.














> ;









< ;td>New York Giants

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	105-47

We added abbr="Record", the screen reader will read "Record" using the short version of the header. >Here I would also like to mention three table-related tags. They not only provide more precise semantics for the table structure, but also provide additional tags for css, so that you do not need to use There are so many classes in tag design.
Quote from a W3C description of these tags in the HTML4.01 specification (http://www.php.cn/):Quote:


Table rows can be divided into table headers, table footers and an unlimited number of table bodies using thead, tfoot and tbody tags. This classification method allows the browser to support the function of independently scrolling the table body. When printing long tables , the header and footer can also be repeated on every page containing table data.
Therefore, using this classification method can also make it easier for browser users who support independent table bodies to read the table Content, especially long tables. and must appear before so that browsers and other devices can load the content first and mark the table in this way of table row classification. It looks like this:


...table header content...



...table footer content...




...table data row...


...table data row ...


...table data row...


< ;/table>

You will find that the header and footer data are surrounded by and tags and placed before the table data rows.
As I said before, these tags not only provide more information for the table Precise semantics, and can also provide style anchors for css, allowing you to set css rules for these specific contents without having to design so many classes for each .
For example, if we only want to give data Block (marked with ) sets a different background color from other blocks. Then we only need to write this piece of css to achieve the goal:
tbody {
background-color: gray ;
}
If there is no tbody tag, we need to add a class attribute to each tag that we want to add a gray background. Meaningful marking methods can often be used later with css settings The work of setting styles becomes very easy. This is a good example.
                                                                        #p#

Are tables evil?
I think if we use table tags according to their original purpose, then the answer is definitely "no!". Abuse Tables are rightly condemned for creating complex, nested layouts, but tables do give blocks of data the good structure they need.
We can't spend the entire book describing everything needed to create the perfect table. techniques, so I’ll stop here and hopefully you’ve started to figure out how to create simple tables that are both simple and usable and can be easily modified with CSS.
Speaking of styles, let’s modify the previous example using a few different CSS techniques.
Extension of skills
As in the previous chapter, we use flexible semantic structured markup as the basis, and then use CSS to add some styles to it
First of all, let’s take a look Look at the simple border technique, create a single-line border on the example, and then we add a unique style to the table title and header
Create a border
Already have a 3D effect on the border default attribute Are you tired of it? Me too. Generally speaking, adding border="1" to the table tag will have a similar effect to Figure 3-1. Of course, you can also change the method. Here is a beautiful and neat way to use CSS The trick to borders. First, we add a one-pixel border to both sides (right and bottom) of each

cell:
th, td {
border- right: 1px solid #999;
border-bottom: 1px solid #999;
}
Only adding borders on both sides is to create borders with the same width everywhere while making most of them pop. The key is that the browser can display it correctly. If I add a border on all sides, the top and left sides of the border will cause overlap when the cells are arranged. In a later example, I will give a way to use only one The border rule is a way to achieve the childlike effect.
You will find that the entire table in Figure 3-2 is only missing the top and left borders. In order to complete the border, we add styles to the element Same border-top and border-left properties , td {
border-right: 1px solid #999; border-bottom: 1px solid #999;
}



Figure 3-2: for th Table example with and td plus side lines on both sides

Figure 3-3 Table example after filling in the side lines
                                                                        #p#

Remove the gap
Now we have a complete table, but what about the spacing between the borders? Unfortunately, since most browsers The editor will set a little outer patch by default, so these annoying gaps will be 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 precise single-line border style is achieved, as shown in Figure 3-4


Figure 3-4: Table example after using the border-collapse attribute
Does not support the version of IE for Mac

Except Internet Explorer for Mac, other browsers support abbreviating css like this:
table {
border-collapse: collapse; } th, td {
border: 1px solid #999;
}
Which method to use is of course up to you, there are still some people who still use IE for Mac, and using this alternative method will cause them to see some duplication of edges, if you don't care about this thing, then use a simplified approach. Strictly speaking, this is just a display issue, and the table functionality is not affected at all.
Since I can’t abandon the Mac fanatic (any web designer worth his salt should (like this), so in future examples, I will still use the version that can be displayed correctly in IE for Mac.
Expand the space
Now we have a perfect table in our hands, It looks a bit cramped though... Let's add a little inlining to the th, td rules at hand to give them room to breathe (Figure 3-5)
table {
border-top: 1px solid #999;
border-left: 1px solid #999;
border-collapse: collapse;
}
th, td {
padding: 10px;
border-right : 1px solid #999;
border-bottom: 1px solid #999;
}

Figure 3-5: Table example with 10 pixel inner patch
Did you know? If you use a single value to set the inner patch (such as 10px in the previous example), you need to add the same setting value to all four sides of the element. You can also follow the clockwise order (top, right, bottom, left ) specify the settings for each side separately. If you set the inner patch to 10px 5px 2px 10px, it will add a 10px inner patch to the top, a 5px inner patch to the right, and a 2px inner patch to the bottom. Patch, add an inner patch of 10px on the left side.
Another shortcut: If the setting values ​​​​for the top and bottom are the same, and the setting values ​​​​for the left and right are also the same, you only need to set them once respectively. If you set If padding: 10px 5px is set, 10px inner patches will be added to the upper and lower parts, and 5px inner patches will be added to the left and right sides.

Figure 3-6: Set the inner patches clockwise and Order of outer boundaries
                                                                        #p#

Adjust the display effect of the meter header
We can easily add a background color to the meter header and choose different fonts to make the meter header more obvious, because we The

tag is used instead of directly setting the content in bold in the line, so we can directly set the style for the header content without adding any other tags. We also add below the title In the previous point, we also use different fonts and colors (red, of course) to highlight the title content (Figure 3-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; } Figure 3-7: Styled title and Add a background image to the table header Just now we added a gray background to the	element in the table, but we can actually go one step further and use a tiled background image To create beautiful effects in the grid, for example, we can use detailed gray stripes to simulate many window styles in Mac OS (Other drawing tools you are familiar with) Create a small picture. In this example, we are going to create an effect of alternating 2 pixels gray and 2 pixels white, so the picture only needs to be 4 pixels high. It doesn’t matter if the width is different, because it will Flatten it in	to create the striped effect we want. In order to save bandwidth, we only make it 1 pixel wide (Figure 3-8) Figure 3-8: 1X4 pixel stripe image (enlarged) CSS Follow the code in the example just now. The only thing we need to modify is to change the background color to the path of the small image we just created, unless otherwise Specify, otherwise according to the default settings, the background image will automatically tile in each direction. 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: url(th_stripe.gif); } Figure 3-9 is the table after applying this style. The header part has a stripe background. You need to experiment with other ones. Tile background images are also very convenient. You can try how to create the best-looking effect for headers or information. Enjoy the process of this experiment. Figure 3-9: Example of using a tiled background in the table header                                                                         #p# Specify icons for IDs Remember at the beginning of this chapter when we added a unique ID to each	in the table? At that time we added these The id matches the headers attribute in the data list to help users of non-visual browsers understand the contents of the table. Now we can use the function of this id in another place, that is, specify a different value for each	Icon. The icon path will be completely recorded in the css file, allowing you to easily replace it during website reconstruction and update without having to modify the label part. Icon I use Photoshop made three unique icons, which are used on each table header in the example: Year, Opponent and Season Record (W-L). Figure 3-10 shows these three icons: picture 3-10 It is not difficult to add css to the three header icons CSS produced by hotoshop, because we have formulated a unique id for each	, so we can directly Use the background attribute to specify the correct icon. 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; } #year { padding-left: 26px; background: #ccc url(icon_year.gif) no-repeat 10px 50%; } #opponent { padding-left: 26px; background: #ccc url(icon_opp.gif) no-repeat 10px 50%; } #record { padding-left: 26px; background: #ccc url( icon_rec.gif) no-repeat 10px 50%; } You should notice that we use abbreviation to define the background style. We take out the background:#ccc rule from the definition of th, and Put it next to the icon name of each header. This will make our icon "sit" on the gray background we specified. We also leave enough space for the icon on the left side of each header content so that the text does not cover it. Go up, Figure 3-11 is the effect we want: Figure 3-11: The effect of formulating a unique icon for each	Using abbreviated syntax has obvious advantages, However, if we only define the image with the background attribute and do not define the background color, we should first cancel the background color previously defined with background in	. Combining rules and simplifying the content Another way of writing that can achieve the same function is to take out the rules that appear repeatedly in each table header (in this case, the background image, inner patch and position) and write them in	and define them once (because their settings are indeed the same in each	), and then only retain their different setting values ​​​​(that is, the image path) within the #year, #opponent, #record definitions 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; padding-left: 26px; background-color: #ccc; background-repeat: no-repeat; background-position: 10px 50%; } #year { background-image: url(icon_year.gif); } #opponent { background-image: url(icon_opp.gif); } #record { background: url(icon_rec.gif); } Isn’t this a little more concise? By integrating the same rules, we can save the time and energy of repeatedly defining and modifying each time. In this example, it seems that there are only six, half a dozen, but for larger For style sheets, the savings are considerable. Summary In this chapter, we not only discovered that tables are not evil, but also after understanding the tables in depth, we found that they It is very suitable for labeling table data, and is still easy to use We also found that by adding some styles, we can control the display of list data, making them very attractive. Don't worry about using tables anymore. Feeling scared.