Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P37 docx

Modifying the Appearance of Tables Modifying the Appearance of Tables In Lesson 8, "Building Tables," I discussed the creation of tables. In it, I touched on ways that you can use CSS to improve how your tables look. Now I'm going to explain how you can use the CSS properties I've discussed to really spruce up your tables. Ironically, the main goal of today's lesson is to show you that there are alternatives to using tables to lay out complex pages. Right now, I'm going to also demonstrate how to use CSS to improve the presentation of tabular data. As a refresher, take a look at one of the tables I created in Lesson 8 in Figure 9.21. Figure 9.21. One of the tables from Lesson 8. Now I'm going to replace many of the formatting changes made to the table using HTML with CSS. The source code for the new page (see Figure 9.22 for the result) follows: Input <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Service Data</title> <style type="text/css"> td, th { padding: 5px; border: 1px solid #c90; background-color: #ffc; text-align: center; margin: 0px; } th.emtpy { background-color: #fff; file:///G|/1/0672328860/ch09lev1sec6.html (1 von 3) [19.12.2006 13:49:12] Modifying the Appearance of Tables border-left: none; border-top: none; } .left { text-align: left; } table { border: 5px groove #c90; } caption { font: bold 18px Verdana; margin: 10px; } </style> </head> <body> <table cellspacing="0"> <caption>Drive Belt Deflection</caption> <tr> <th rowspan="2" colspan="2" class="emtpy"></th> <th colspan="2">Used Belt Deflection</th> <th rowspan="2">Set<br /> deflection<br /> of new belt</th> </tr> <tr> <th>Limit</th> <th>Adjust<br /> Deflection</th> </tr> <tr> <th rowspan="2" class="left">Alternator</th> <td class="left">Models without AC</td> <td>10mm</td> <td>5-7mm</td> <td rowspan="2">5-7mm</td> </tr> <tr> <td class="left">Models with AC</td> <td>12mm</td> <td>6-8mm</td> </tr> <tr> <th colspan="2" class="left">Power Steering Oil Pump</th> <td>12.5mm</td> <td>7.9mm</td> <td>6-8mm</td> </tr> </table> </body> </html> Output Figure 9.22. The table from Figure 9.21 formatted using CSS. file:///G|/1/0672328860/ch09lev1sec6.html (2 von 3) [19.12.2006 13:49:12] Modifying the Appearance of Tables Given the size of the style sheet, we haven't gained a whole lot in terms of efficiency by using CSS for formatting. However, there are some things that can be accomplished using CSS that cannot be accomplished using regular table formatting attributes. First, though, as you can see, I used CSS to set the background colors for my table cells and to handle the alignment tasks for the table. Because nearly everything in the table is centered, I made that the default for all <td> and <th> tags. I put the cells that need to be left aligned in the class left and changed its alignment to left. One thing I could accomplish using CSS that isn't possible without it is to use a different border for the outside of the table than I used inside. For the border between the cells, I used a thin 1-pixel border. Around the table, I used a 5-pixel grooved border. I also turned off the top and left borders for the empty cell, along with setting its background color to white. You should note that one thing I didn't change was the cellspacing attribute of the <table> tag. If you want to modify cell spacing, you must use this attribute because there's no CSS equivalent. file:///G|/1/0672328860/ch09lev1sec6.html (3 von 3) [19.12.2006 13:49:12] The <body> Tag The <body> Tag I've already mentioned that you can adjust the margin, padding, and border of a page by applying styles to the <body> tag. More importantly, any styles that you want to apply on a pagewide basis can be assigned to the page's body. You already know about setting the background color for the page by using style="background-color: black" in your <body> tag. That's really just the beginning. If you want the default font for all the text on your page to appear in the Georgia font, you can use the following style: body { font-family: Georgia; } That's a lot easier than changing the font-family property for every tag that contains text on your page. A common <body> tag you often see looks something like <body bgcolor="#000000" text="#ffffff" alink="blue" vlink="yellow" alink="purple"> You can modify the background and text colors like this: body { color: white; background-color: black; } I'll explain how to alter the link colors shortly. One of the main advantages of taking this approach, aside from the fact that it's how the standard says you should do things, is that then you can put the style into a linked style sheet and set the background color for your whole site on one page. Many layouts require that elements be flush with the edge of the browser. In these cases, you need to set the margin to 0 for your <body> tag. Some browsers enabled you to do this with proprietary attributes of the <body> tag, but they're not reliable. To turn off margins, just use this rule: body { margin: 0px; } file:///G|/1/0672328860/ch09lev1sec7.html [19.12.2006 13:49:12] Links Links You already know how to adjust the colors of elements on a page, but links are a bit different. They're more complicated than other types of elements because they can exist in multiple states: an unvisited link, a visited link, an active link, and a link that the user currently has the pointer over. As you can see, there's one more state here than has been traditionally reflected in the <body> tag. Using CSS, you can change the color of a link when the user mouses over it (referred to as the hover state) as opposed to when he's currently clicking on it (the active state). Another advantage of CSS is that you can change the color schemes for links on the same page, rather than being forced to use one scheme throughout. Finally, you can turn off link underlining if you want. For example, here's a style sheet that turns off link underlining for navigation links, renders them in boldface, and keeps the same color for visited and unvisited links. a:link { color: blue; } a:active { color: red; } a:visited { color: purple; } a:hover { color: red; } a.nav { font-weight: bold; text-decoration: none; } a.nav:hover, a.nav: active { background-color: yellow; color: red; } a.nav:link, a.nav:visited { color: green; } From the style sheet, you can see that for all <a> tags in the class nav, the text-decoration property is set to none, which turns off underlining, and font-weight is set to bold. For <a> tags on the rest of the page, the underlining remains on, but I've set it up so that when the mouse is over the links, they turn red. For navigation links, when the mouse is over the links, the background of the element turns yellow and the text turns red. You can use pretty much any property you like with these selectors, and browsers that support them will dynamically reflow the page to accommodate the change. However, changes that affect the size of the element (such as boldfacing the text dynamically or increasing the font size) can be very jarring to users, so use them cautiously. file:///G|/1/0672328860/ch09lev1sec8.html [19.12.2006 13:49:12] Creating Layouts with Multiple Columns Creating Layouts with Multiple Columns Over the course of this lesson, you've seen how to modify many aspects of a page's design using cascading style sheets. Now let's look at an example that kind of ties everything together. In this case, we're going to see the sort of effect that might normally be accomplished using a table that encompasses the whole page implemented using CSS instead. This page uses a two-column layout with a header across the top. One thing you'll be impressed by is the small amount of markup within the HTML. All the formatting is contained in the style sheet. Here's the source code for the page, which appears in Figure 9.23: Input <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>The Star</title> <style type="text/css"> body { font-family: Georgia; margin: 0px; background-color: #f90; } #header { font: bold 48px Trebuchet MS; padding-left: 30px; border-bottom: 3px solid black; background-color: #c00; margin-bottom: 0px; } #content { float: right; padding: 1px 20px 1px 10px; width: 70%; margin: 0px; border: none; background-color: #fff; } #nav { float: left; width: 20%; margin-top: 0px; font-weight: bold; padding: 10px; border: none; font-family: Trebuchet MS; } #nav a { text-decoration: none; color: #006; } #nav a:hover { color: #c00; } h2 { margin-top: 10px; } </style> </head> <body> file:///G|/1/0672328860/ch09lev1sec9.html (1 von 4) [19.12.2006 13:49:13] Creating Layouts with Multiple Columns <div id="header">The Star</div> <div id="content"> <h2>Curly Bill</h2> <h3>The Noted Desperado, Gets it in the Neck at Galeyville</h3> <p>May 26, 1881 - The notorious Curly Bill, the man who murdered Marshal White at Tombstone last fall and who has been concerned in several other desperate and lawless affrays in South Eastern Arizona, has at last been brought to grief and there is likely to be a vacancy in the ranks of out border desperados. The affair occurred at Galeyville Thursday. A party of 8 or 9 cowboys, Curly Bill and his partner Jim Wallace among the number, were enjoying themselves in their usual manner, when deputy Sheriff Breakenridge of Tombstone, who was at Galeyville on business, happened along.</p> <p>Wallace made some insulting remark to the deputy at the same time flourishing his revolver in an aggressive manner. Breakenridge did not pay much attention to this "break" of Wallace but quietly turned around and left the party. Shortly after this, Curly Bill, who it would seem had a friendly feeling for Breakenridge, insisted that Wallace should go and find him and apologize for the insult given. This Wallace was induced to do after finding Breakenridge he made the apology and the latter accompanied him back to the saloon where the cowboys were drinking. By this time Curly Bill who had drank just enough to make him quarrelsome, was in one of his most dangerous moods and evidently desirous of increasing his record as a man killer. He commenced to abuse Wallace, who, by the way, had some pretensions himself as a desperado and bad man generally and finally said, "You g-d Lincoln county s-of a b , I'll kill you anyhow." Wallace immediately went outside the door of the saloon, Curly Bill following close behind him. Just as the latter stepped outside, Wallace, who had meanwhile drawn his revolver, fired, the ball entering penetrating the left side of Curly Bill's neck and passing through, came out the right cheek, not breaking the jawbone. A scene of the wildest excitement ensued in the town.</p> <p>The other members of the cowboy party surrounded Wallace and threats of lynching him were made. The law abiding citizens were in doubt what course to pursue. They did not wish any more blood shed but were in favor of allowing the lawless element to "have it out" among themselves. But Deputy Breakenridge decided to arrest Wallace, which he succeeded in doing without meeting any resistance. The prisoner was taken before Justice Ellinwood and after examination into the facts of the shooting he was discharged.</p> <p>The wounded and apparently dying desperado was taken into an adjoining building, and a doctor summoned to dress his wounds. After examining the course of the bullet, the doctor pronounced the wound dangerous but not necessarily fatal, the chances for and against recovery being about equal. Wallace and Curly Bill have been Partners and fast friends for the past 4 or 6 months and so far is known, there was no cause for the quarrel, it being simply a drunken brawl.</p> </div> <div id="nav"> file:///G|/1/0672328860/ch09lev1sec9.html (2 von 4) [19.12.2006 13:49:13] Creating Layouts with Multiple Columns <a href="">News</a><br /> <a href="">Sports</a><br /> <a href="">Weather</a><br /> <a href="">Business</a><br /> <a href="">Classified</a> </div> </body> </html> Output Figure 9.23. A page laid out entirely using CSS. [View full size image] As you can see, the page I created uses a two-column layout with a header across the top. If you take a look at the source code, you'll see that there are three <div>s that are used to lay out the page. One contains the heading (with the ID "header"), one is for the main content (with the ID "content"), and one is for the navigation elements (with the ID "nav"). Note that the navigation <div> actually comes after the content in the source file. I didn't have to do it this way, but there are good reasons to do so, as I'll describe in Lesson 17, "Designing for the Real World." Let's go through the style sheet rule by rule. First of all, I set the font for the document to Georgia in the <body> tag. I also set the margins for the page to 0px and set the page's background color to the same background color that I'm going to use in the navigation div. I'll explain why in a bit. file:///G|/1/0672328860/ch09lev1sec9.html (3 von 4) [19.12.2006 13:49:13] Creating Layouts with Multiple Columns Next, I set up the header. I set the font size to a nice, large, bold font, befitting the header for a page. Then I add some padding to the left side of the <div> to give myself a margin because I turned off margins for the page as a whole. I add some accents to the header by putting a 3-pixel border across the bottom and setting the background of the header to a dark red color. I also turn off the margin on the bottom to get things to fit together nicely. The next rule is for the content section. This is the most important part of the page, so I set its width to 70%. I turn off its margin completely, and give it some padding on the left and right to create some white space around the text and a 1-pixel margin on the top and bottom because there's plenty of white space there already. The background color of this <div> is white and the borders are turned off. Now let's look at the rules for the navigation <div>. I've this one set to float: left. One thing you may be wondering is why I have float turned on for both the content <div> and the navigation <div>. Things are set up this way so that the <div>s run down opposite sides of the page no matter what. I don't want one of them to wrap around the other, and I also wanted to be able to put the navigation <div> under the content <div> and have them both pushed all the way up against the header. If there were some unfloated text content for this page that was extremely skinny, or I made both of these <div>s narrower, I could run some content right down the middle of the page between them. If I did want to put some content on the page below the two <div>s, I'd need to make sure to use clear: both to eliminate the floats. When you have two <div>s side by side on a page and you want them to appear as columns, you must set the page background color to match the background of the smaller <div>. That way, the background of the space below the smaller <div> will match that <div>. The next two rules affect the links in the navigation bar. The links are set to be navy blue and to turn red when the user passes the mouse over them. I've also turned off underlining. The links were set to boldface in the larger rule for the navigation <div>. The last rule adjusts the white space for <h2> tags slightly to make it consistent between Netscape and Internet Explorer. file:///G|/1/0672328860/ch09lev1sec9.html (4 von 4) [19.12.2006 13:49:13] Summary Summary In the earlier days of this book, I've given you a taste of how to use cascading style sheets. You didn't get the full flavor because I used them only within the context of the style attribute of tags. Today, I discussed how you can create actual style sheets either as part of a page or as a standalone file that can be included by any page. I also moved beyond properties that discuss text formatting to explain how to use CSS to lay out an entire page. CSS provides a better alternative to tables, transparent single-pixel GIFs, and other old techniques that have been relied on to gain control over how pages are laid out. By understanding how browsers render pages and how you can affect that process using CSS, you can achieve the effects you want without writing loads of markup that's difficult to understand and maintain. As cool as cascading style sheets are, they're only half the fun. In Lesson 15, "Creating Applications with Dynamic HTML and AJAX," you'll learn how to modify styles from within your pages using JavaScript, adding an amazing degree of flexibility to how you create your web pages. Any styles you learned about today can be manipulated in the world of dynamic HTMLit's exciting stuff. file:///G|/1/0672328860/ch09lev1sec10.html [19.12.2006 13:49:13] . necessarily fatal, the chances for and against recovery being about equal. Wallace and Curly Bill have been Partners and fast friends for the past 4 or 6 months and so far is known, there was no cause. using CSS, you can achieve the effects you want without writing loads of markup that's difficult to understand and maintain. As cool as cascading style sheets are, they're only half. Breakenridge, insisted that Wallace should go and find him and apologize for the insult given. This Wallace was induced to do after finding Breakenridge he made the apology and the latter accompanied