tailieunhanh - CSS Mastery- P5

CSS Mastery- P5: The human race is a naturally inquisitive species. We just love tinkering with things. When I recently bought a new iMac, I had it to bits within seconds, before I’d even read the instruction manual. We enjoy working things out ourselves and creating our own mental models of how we think things behave. We muddle through and only turn to the manual when something goes wrong or defies our expectations. | STYLING FORMS AND DATA TABLES s January 2008 S M T W T F 30 31 1 2 3 4 5 6 z 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 1 2 Figure 7-2. Widely spaced tables can also be difficult to immediately comprehend By contrast a few minutes spent designing your data tables can greatly improve their comprehension and the speed at which information can be retrieved. For instance the dates in Figure 7-3 have been given breathing room with a small amount of vertical and horizontal padding. They have also been highlighted with a subtle beveled effect making them look clickable. The main column headings have been distinguished from the data through subtly different background colors the use of a bottom border and typographic treatment. The result is an easy-to-use calendar widget. January 2008 Sun Mon Tue Wed Thu Fri Sat 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ilï 24 25 26 27 28 29 30 31 Figure 7-3. Stylized data table 177 CHAPTER 7 Table-specific elements If data tables can be difficult for sighted users imagine how complicated and frustrating they must be for people using assistive technologies such as screen readers. Fortunately the HTML specification includes a number of elements and attributes intended to increase the accessibility of data tables for these devices. Not all of these elements are currently supported by screen readers but it is definitely good practice to use them where possible. Summary and caption The first of these elements is a table caption which basically acts as a heading for the table. Although this is not a required element it is always a good idea to use a caption wherever possible. In this example I m using the caption to show users which month they are looking at. Another useful addition is a table summary. The summary attribute can be applied to the table tag and is used to describe the content of the table. Much like an image s alt text the summary should effectively summarize the data in the table and