Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P37 docx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (213.09 KB, 10 trang )
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"
" /><html xmlns=" /><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"
" /><html xmlns=" /><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]
