Tài liệu Pro CSS Techniques- P6 docx

agent understand which cells are related to one another. Again, this is especially helpful to screen readers and other assistive technology. It helps them read or display tables more logically. Our example table, with the scope attribute added, might look something like this: <table> <tr> <th scope="col">Name</th> <th scope="col">Affiliation</th> <th scope="col" abbr="URL">Website URL</th> </tr> <tr> <td scope="row">Jeff Croft</td> <td>World Online</td> <td>http://jeffcroft.com</td> </tr> <tr> <td scope="row">Ian Lloyd</td> <td>Accessify</td> <td>http://accessify.com</td> </tr> <tr> <td scope="row">Dan Rubin</td> <td>Webgraph</td> <td>http://superfluousbanter.org/</td> </tr> </table> Note that the element containing the names of individuals is marked up as a td, not a th, but is still assigned the scope attribute. Because our names are data values in this table and not simply generic labels, they should be table data cell elements rather than table header elements. However, they still provide context for the rest of the information in the row, so the addition of the scope attribute is appropriate. Assigning scope in Complex Tables As your tables become more complex, you may find cases where the header information for a particular data cell is not the same row or column as that cell, or where three or more head- ers apply to a single data cell. In these cases, scope breaks down and you’ll need to use the headers attribute on your cells. By assigning a unique id to your headers, you can then refer- ence them as the context for a data cell. Our example is simple enough that scope works fine, but here’s an example of how it looks using headers instead: <table> <tr> <th id="name">Name</th> <th id="affiliation">Affiliation</th> <th id="url" abbr="URL">Website URL</th> </tr> <tr> CHAPTER 10 ■ STYLING TABLES222 732Xch10FINAL.qxd 11/1/06 2:10 PM Page 222 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. <td id="jeff_croft">Jeff Croft</td> <td headers="jeff_croft affiliation">World Online</td> <td headers="jeff_croft url">http://jeffcroft.com</td> </tr> <tr> <td id="ian_lloyd">Ian Lloyd</td> <td headers="ian_lloyd affiliation">Accessify</td> <td headers="ian_lloyd url">http://accessify.com</td> </tr> <tr> <td id="dan_rubin">Dan Rubin</td> <td headers="dan_rubin affiliation">Webgraph</td> <td headers="dan_rubin url">http://superfluousbanter.org/</td> </tr> </table> As this markup is far more complex than using the scope attribute, it’s always best to use scope where possible—and it works great for most cases. Only quite complex tables require the use of the headers attribute. The thead, tfoot, and tbody Elements Rows within a table can be optionally grouped in a table head, table foot, and one or more table body sections, using the thead, tfoot, and tbody elements, respectively. Typically, the thead element is used to contain the header rows of the table, the tbody element is used to hold the main content, and the tfoot element is used to collect any totals and similar “closing” information. By including these divisions in your markup, you provide the “hooks” necessary to create common and often desirable presentational effects, and also allow the user agent to do logical things, such as including the same header and footer on each page of a printed version of your table. It is worth remembering that both the thead and tfoot elements should appear above any tbody elements in your markup. The browser will still display the tfoot ele- ment at the bottom of the table where it belongs. Our example table doesn’t have data appropriate for multiple tbody elements or a tfoot element, but as it gets a bit more complex, it may. Consider the following: <table summary="A small table displaying the names, ➥ affiliations, web addresses, and roles of the ➥ authors and editors of Pro CSS Techniques."> <caption>Pro CSS Techniques authors and editors</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Affiliation</th> <th scope="col" abbr="URL">Website URL</th> <th scope="col">Role</th> </tr> </thead> <tbody id="authors"> CHAPTER 10 ■ STYLING TABLES 223 732Xch10FINAL.qxd 11/1/06 2:10 PM Page 223 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. <tr> <td scope="row">Jeff Croft</td> <td>World Online</td> <td>http://jeffcroft.com</td> <td>Author</td> </tr> <tr> <td scope="row">Ian Lloyd</td> <td>Accessify</td> <td>http://accessify.com</td> <td>Author</td> </tr> <tr> <td scope="row">Dan Rubin</td> <td>Webgraph</td> <td>http://superfluousbanter.org/</td> <td>Author</td> </tr> </tbody> <tbody id="editors"> <tr> <td scope="row">Chris Mills</td> <td>Apress/friends of ED</td> <td>http://www.friendsofed.com/bloggED</td> <td>Editor</td> </tr> <tr> <td scope="row">Wilson Miner</td> <td>Apple Computer</td> <td>http://wilsonminer.com</td> <td>Technical Editor</td> </tr> </tbody> </table> Here, we’ve wrapped our first row in the thead element, and also added a second tbody section for the book’s editors. We haven’t used the tfoot element, as this set of data doesn’t have any information appropriate for it. A case where you may use tfoot may be for the totals at the bottom of a spreadsheet or invoice. You’re probably already envisioning ways these markup additions could be exploited with CSS styles—we’ll get to that later in the chapter. Columns Tables have always contained the tr element to designate table rows, but only more recently did columns earn their way into the (X)HTML specifications. However, no current browser supports using CSS to style columns, so their current benefits are purely semantic and “future proofing.” If you define columns now, you won’t have to when browsers begin supporting the styling of them; therefore, we’ve decided to cover them here. CHAPTER 10 ■ STYLING TABLES224 732Xch10FINAL.qxd 11/1/06 2:10 PM Page 224 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. The colgroup element provides a way to define a set of columns for your table. Individual columns are then defined using the col element. To define proper columns for our table, we would add the following code: <colgroup> <col id="name" /> <col id="affiliation" /> <col id="url" /> <col id="role" /> </colgroup> The summary Attribute Data tables can take an optional summary attribute whose purpose is to provide a description of the table’s purpose and structure. The summary attribute, by default, doesn’t display on the page (although by using CSS attribute selectors, you could make it display). The summary attribute is especially helpful to nonvisual viewers of your content. When writing a table sum- mary, consider explaining any nonobvious relationships between rows and columns, as well as defining the relationship between the table and the context of the document that contains it. Although our example table is very simple and may not require a summary, one could be added like so: <table summary="A small table displaying the names, affiliations, and web➥ addresses of the authors of Pro CSS Techniques."> All Marked Up So, our fully marked-up, semantic table code looks like this: <table summary="A small table displaying the names, ➥ affiliations, web addresses, and roles of the ➥ authors and editors of Pro CSS Techniques."> <caption>Pro CSS Techniques authors and editors</caption> <colgroup> <col id="name" /> <col id="affiliation" /> <col id="url" /> <col id="role" /> </colgroup> <thead> <tr> <th scope="col">Name</th> <th scope="col">Affiliation</th> <th scope="col" abbr="URL">Website URL</th> <th scope="col">Role</th> </tr> </thead> <tbody id="authors"> CHAPTER 10 ■ STYLING TABLES 225 732Xch10FINAL.qxd 11/1/06 2:10 PM Page 225 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. <tr> <td scope="row">Jeff Croft</td> <td>World Online</td> <td>http://jeffcroft.com</td> <td>Author</td> </tr> <tr> <td scope="row">Ian Lloyd</td> <td>Accessify</td> <td>http://accessify.com</td> <td>Author</td> </tr> <tr> <td scope="row">Dan Rubin</td> <td>Webgraph</td> <td>http://superfluousbanter.org/</td> <td>Author</td> </tr> </tbody> <tbody id="editors"> <tr> <td scope="row">Chris Mills</td> <td>Apress/friends of ED</td> <td>http://www.friendsofed.com/bloggED</td> <td>Editor</td> </tr> <tr> <td scope="row">Wilson Miner</td> <td>Apple Computer</td> <td>http://wilsonminer.com</td> <td>Technical Editor</td> </tr> </tbody> </table> With the addition of a handful of useful elements and attributes, we’ve added a great deal of meaning, usability, and accessibility to even this simple table. But perhaps more importantly (at least in the context of this book), we’ve added a plethora of hooks within the table we can attach CSS styles to. CHAPTER 10 ■ STYLING TABLES226 732Xch10FINAL.qxd 11/1/06 2:10 PM Page 226 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Adding Style Data tables may seem like boring spreadsheets of mind-numbing information—and often they are. But that is, if anything, a really good reason to give them special attention when it comes to visual and information design. With a bit of CSS work, we can take the mundane, ordinary table and transform it into a fascinating resource that is a pleasure to browse. In this section, we’ll cover some of the common styles and features you can add to your table to increase readability, findability, and aesthetic value. First, take a look at Figure 10-2, which shows our finished example table as it appears in a browser with no CSS styling. Figure 10-2. Our sample table, completely unstyled Most folks will agree this isn’t ideal. Let’s add some basic table styles, as well as some type styling (see the previous chapter), to enhance its presentation. We’ll start with this CSS: table { width: 90%; margin: 0 auto; font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; font-size: .9em; line-height: 1.4em; } By simply making the table 90 percent wide, centering it on the page (by giving it auto left and right margins), and tweaking the type a bit, we get a good start toward a cleaner presenta- tion, as shown in Figure 10-3. CHAPTER 10 ■ STYLING TABLES 227 732Xch10FINAL.qxd 11/1/06 2:10 PM Page 227 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Figure 10-3. Some basic tweaks have already improved our table to no end! Now, what about those headers? We’d rather see them left-aligned, and perhaps a border under them would help delineate them from the data cells: th { text-align: left; border-bottom: 1px solid #000; } Let’s also adjust the color of the text in the data cells while we’re at it: td { color: #333; } Our table now looks like Figure 10-4. Figure 10-4. Basic delineation of headers and body using color and a border CHAPTER 10 ■ STYLING TABLES228 732Xch10FINAL.qxd 11/1/06 2:10 PM Page 228 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Getting better already! But nothing we’ve done so far is table specific. We’ve simply styled some type and added some borders, just as we can do on any element with CSS. Table Borders CSS defines two separate models for table borders: collapsed and separate. The default ren- dering mode for most browsers is the separate model, in which borders around cells are kept separate from one another. For example, adding a one-pixel border to our example table in separate mode produces the results shown in Figure 10-5. Figure 10-5. Table borders in the separate model You’ll note there is some space between each cell, and each cell receives its own, noncon- necting border. Let’s change the border model to collapsing before we add our border, like so: table { width: 90%; margin: 0 auto; font-family: Lucida Grande, Verdana, Helvetica, Arial, sans-serif; font-size: .9em; line-height: 1.4em; border-collapse: collapse; } th { text-align: left; border-bottom: 1px solid #000; } td { color: #333; border: 1px solid #ccc; } CHAPTER 10 ■ STYLING TABLES 229 732Xch10FINAL.qxd 11/1/06 2:10 PM Page 229 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. As you can see in Figure 10-6, the result is quite different. Figure 10-6. Table borders in the collapsed model The borders have “collapsed” into one another and the space between cells has been removed. For most purposes, this collapsed model is more useful than it’s separate counter- part. The rules that control the collapsed model are quite specific: • The table element itself cannot have padding (although it can have margins). This means there is never any space between a table’s border and its outermost cells. • In addition to the table element, cells, rows, columns, row groups, and column groups can all have borders. • There is never any space between cell borders. Borders themselves collapse into one another so that only one is actually drawn. So, if two cells each have a one-pixel-wide border, rather than two adjacent one-pixel-wide borders (for a total width of two pix- els), you will see only one border line with a one-pixel weight. • If two cells collapsing into one another have differing border-style attributes, the style with the greater priority will be displayed. The priority, from most preferred to least pre- ferred, is as follows: hidden, double, solid, dashed, dotted, ridge, outset, groove, inset, none. If the two collapsing cells have the same border-style attribute, that value will be used. • If two cells collapsing into one another have borders of the same style and width but different color, the displayed color is taken from the element with the greater priority. The priority, from most preferred to least preferred, is as follows: cell, row, row group, column, column group, table. If the two elements are of the same type, then no behav- ior is defined, and each user agent or browser is left to its own devices when choosing which color to display. With that in mind, let’s experiment with some different border styles for our example table: CHAPTER 10 ■ STYLING TABLES230 732Xch10FINAL.qxd 11/1/06 2:10 PM Page 230 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. table { width: 90%; margin: 0 auto; font-family: Lucida Grande, Verdana, Helvetica, Arial, sans-serif; font-size: .9em; line-height: 1.4em; border-collapse: collapse; } tr { border: 1px solid #666; } th { text-align: left; border-left: 1px solid #333; border-right: 1px solid #333; border-bottom: 3px double #333; padding: 0 .5em; } td { color: #333; border: 1px dotted #666; padding: 0 .5em; } Adding these styles to our CSS gives us the result shown in Figure 10-7. Figure 10-7. Adding some basic border styles to our sample table As you can see, there are countless ways to use borders with tables. Throughout the chap- ter, the examples will use different borders to show more possibilities. CHAPTER 10 ■ STYLING TABLES 231 732Xch10FINAL.qxd 11/1/06 2:10 PM Page 231 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... http-equiv="Content-Type" content="text/html; charset=utf-8"/> Example form ... has been noted throughout this book, CSS styling works best and most consistently when it is applied to pages that are built with clean, semantic (X)HTML (X)HTML provides a few helpful yet underused elements for forms that not only add structure and meaning to your document but also provide significant form usability improvements and copious hooks on which to hang CSS styles The fieldset and legend Elements... inconsistencies Web professional Roger Johansson created what may be the world’s most authoritative source on both the default styles of form elements and which CSS properties can and cannot be applied to them in various browsers across multiple platforms In a blog post titled “Styling even more form controls,” (www.456bereastreet.com/archive/200410/styling_even_more_form_controls/), Roger provides screen... PM Page 233 CHAPTER 10 ■ STYLING TABLES ■ Note CSS 3 provides a selector that allows for this sort of thing However, no major browser currently supports it: tr:nth-child(odd) { background-color: #dfdfdf } Styling the Caption Early in the chapter, we added the caption element to our table By default, it will appear above your table However, CSS offers a property, caption-side, which positions the caption... examples shown here, you can consider using the background-image property on the tables, individual rows, or heads to achieve great effects Veerle Pieters does this very well in her example at http://veerle.duoh.com/index.php/blog/comments/a _css_ styled_table/, as well as her CSS- styled calendar at http://veerle.duoh.com/index.php/blog/comments/a _css_ styled_calendar/ Nathan Smith also uses a calendar as a... currently support styling the col element As such, this approach is only practical for rows (You could achieve the effect on columns, but it would require adding a class to a lot of cells This may be OK for very small tables but usually proves to be impractical for tables of any size.) However, future versions of browsers should let you apply the same approach to columns as well To do this in today’s browser... Page 235 11 ■■■ Styling Forms U sing the power of CSS, forms can be styled in many interesting and creative ways to enhance not only their aesthetics, but also their usability However, forms are also the single area where default styling and differences in CSS support are the most inconsistent across browsers There are two main components to forms and CSS: laying out entire forms and styling individual... browser For example, Safari does not allow for CSS borders or backgrounds on input elements (although this may be changing in the near future), but Firefox does Web designers often find this frustrating However, there are two schools of thought on whether browsers should let CSS authors modify the appearance of form widgets Whereas smart designers can use CSS s widget styling to create usable forms that... } See Figure 11-15—much better! Figure 11-15 We’ve corrected our radio button label alignment by properly setting the line-height property Summary There’s no doubt that form styling on the Web is less consistent from browser to browser than most other (X)HTML elements However, using semantic (X)HTML and CSS it is possible to achieve clear, clean, concise forms that are at once usable, accessible, and... same way in every browser,” he says, “Trying to style form controls to look the same across platforms is often a waste of time.” In short, the best practice is probably to leave most form controls alone, or to style them only lightly, using basic properties such as those for font color, size, and style, borders, and background colors—and to do so with the expectation that these styles will often go unseen . addresses, and roles of the ➥ authors and editors of Pro CSS Techniques."> <caption> ;Pro CSS Techniques authors and editors</caption>. addresses, and roles of the ➥ authors and editors of Pro CSS Techniques."> <caption> ;Pro CSS Techniques authors and editors</caption>