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

How Tables Are Used
other such trickery, remember that Cascading Style Sheets enable you to create layouts
exactly like those on the freshmeat.net page in a much simpler manner. You'll learn exactly
how this is done tomorrow.



file:///G|/1/0672328860/ch08lev1sec9.html (3 von 3) [19.12.2006 13:49:06]
Summary



Summary
Today, you've learned quite a lot about tables. They enable you to arrange your information in rows and
columns so that your visitors can get to the information they need quickly.
While working with tables today, you learned about headings and data, captions, defining rows and cells,
aligning information within cells, and creating cells that span multiple rows or columns. With these
features, you can create tables for most purposes.
As you're constructing tables, it's helpful to keep the following steps in mind:
● Sketch your table, indicating where the rows and columns fall. Mark which cells span multiple
rows and columns.

● Start with a basic framework and lay out the rows, headings, and data row by row and cell by
cell in HTML. Include row and column spans as necessary. Test frequently in a browser to make
sure that it's all working correctly.

● Modify the alignment in the rows to reflect the alignment of the majority of the cells.

● Modify the alignment for individual cells.

● Adjust line breaks, if necessary.

● Make other refinements such as cell spacing, padding, or color.

● Test your table in multiple browsers. Different browsers might have different approaches to
laying out your table, or might be more accepting of errors in your HTML code.

Table 8.2 presents a quick summary of the HTML elements that you learned about today, and which
remain current in HTML 4.01. Attributes that apply to each element are listed in
Table 8.3.
Table 8.2. Current HTML 4.01 Table Elements
Tag Use
<table> </table>
Indicates a table.
<caption> </caption>
Creates a caption for the table (optional).
<colgroup> </colgroup>
Encloses one or more columns in a group.
<col>
Used to define the attributes of a column in a table.
<thead> </thead>
Creates a row group that defines the heading of the table. A table can
contain only one heading.
file:///G|/1/0672328860/ch08lev1sec10.html (1 von 4) [19.12.2006 13:49:07]
Summary
<tfoot> </tfoot>
Creates a row group that defines the footer of the table. A table can
contain only one footer. Must be specified before the body of the table is
rendered.
<tbody> </tbody>
Defines one or more row groups to include in the body of the table. Tables

can contain more than one body section.
<tr> </tr>
Defines a table row, which can contain heading and data cells.
<th> </th>
Defines a table cell that contains a heading. Heading cells are usually
indicated by boldface and centered both horizontally and vertically within
the cell.
<td> </td>
Defines a table cell containing data. Table cells are in a regular font, and
are left-aligned and vertically centered within the cell.

Because several of the table attributes apply to more than one of the preceding elements, I'm listing
them separately.
Table 8.3 presents a quick summary of the HTML attributes you learned about today
that remain current in HTML 4.01.
Table 8.3. Current HTML 4.01 Table Attributes
Attribute Applied to Element Use
align <tr>
Possible values are left, center, and right, which
indicate the horizontal alignment of the cells within that
row (overriding the default alignment of heading and
table cells).

<th> or <td> Overrides both the row's alignment and any default cell
alignment. Possible values are
left, center, and right.

<thead>, <tbody>, <tfoot> Used to set alignment of the contents in table head,
body, or foot cells. Possible values are
left, center, and

right.

<col>
Used to set alignment of all cells in a column. Possible
values are
left, center, and right.

<colgroup>
Used to set alignment of all cells in a column group.
Possible values are
left, center, and right.

<table>
Deprecated in HTML 4.01. Possible values are left,
center, and right. align="center" isn't supported in
HTML 3.2 and older browsers. Determines the alignment
of the table and indicates that text following the table
will be wrapped alongside it.
file:///G|/1/0672328860/ch08lev1sec10.html (2 von 4) [19.12.2006 13:49:07]
Summary

<caption>
Deprecated in HTML 4.01. Indicates which side of the
table the caption will be placed. The possible values for
most browsers are
top and bottom. HTML 4.01 browsers
also support
left and right. In Internet Explorer, the
possible values are
left, right, and center, and they

indicate the horizontal alignment of the caption.
bgcolor All
(HTML 3.2, deprecated in HTML 4.01.) Changes the
background color of that table element. Cell colors
override row colors, which override table colors. The
value can be a hexadecimal color number or a color
name.
border <table>
Indicates whether the table will be drawn with a border.
The default is no border. If
border has a value, it's the
width of the shaded border around the table.
bordercolor <table>
(Internet Explorer and Netscape extension.) Can be used
with any of the table elements to change the color of the
border around that elements. The value can be a
hexadecimal color number or a color name.
bordercolorlight <table>
(Internet Explorer extension.) Same as bordercolor,
except it affects only the light component of a 3D-look
border.
bordercolordark <table>
(Internet Explorer extension.) Same as bordercolor,
except it affects only the dark component of a 3D-look
border.
cellspacing <table>
Defines the amount of space between the cells in the
table.
cellpadding <table>
Defines the amount of space between the edges of the

cell and its contents.
char

Specifies a character to be used as an axis to align the
contents of a cell (for example, a decimal point in
numerical values). Can be applied to
colgroup, col,
tbody, thead, tfoot, tr, TD, and th elements.
charoff

Specifies the amount of offset to be applied to the first
occurrence of the alignment character specified by the
char attribute. Applies to the same elements previously
listed in
char.
frame <table>
Defines which sides of the frame that surrounds a table
are visible. Possible values are
void, above, below,
hsides, lhs, rhs, vsides, box, and border.
height
<th>
or <td> Deprecated in HTML 4.01. Indicates the height of the cell
in pixel or percentage values.
nowrap
<th>
or <td> Deprecated in HTML 4.01. Prevents the browser from
wrapping the contents of the cell.
rules <table>
Defines which rules (division lines) appear between cells

in a table. Possible values are
none, groups, rows, cols,
and
all.
file:///G|/1/0672328860/ch08lev1sec10.html (3 von 4) [19.12.2006 13:49:07]
Summary
width <table>
Indicates the width of the table, in exact pixel values or
as a percentage of page width (for example, 50%).
span <colgroup>
Defines the number of columns in a column group. Must
be an integer greater than 0.

<col>
Defines the number of columns which a cell spans. Must
be an integer greater than 0.
width <colgroup>
Defines the width of all cells in a column group.

<col>
Defines the width of all cells in one column.
colspan
<th>
or <td> Indicates the number of cells to the right of this one that
this cell will span.
rowspan
<th>
or <td> Indicates the number of cells below this one that this cell
will span.
valign <tr>

Indicates the vertical alignment of the cells within that
row (overriding the defaults). Possible values are
top,
middle, and bottom.

<th> or <td> Overrides both the row's vertical alignment and the
default cell alignment. Possible values are
top, middle,
and
bottom.

In Netscape, valign can also have the value baseline.

<thead>, <tfoot>, <tbody> Defines vertical alignment of cells in the table head,
table foot, or table body.

<colgroup>
Defines the vertical alignment of all cells in a column
group.

<col>
Defines the vertical alignment of all cells in a single
column.
width
<th>
or <td> Deprecated in HTML 4.01. Indicates width of the cell, in
exact pixel values or as a percentage of table width (for
example, 50%).

file:///G|/1/0672328860/ch08lev1sec10.html (4 von 4) [19.12.2006 13:49:07]
Workshop


Workshop
Today's lesson covered one of the more complex subjects in HTMLtables. Before you move on to full
immersion into the world of Cascading Style Sheets, you should work through the following questions
and exercises to make sure that you've really got a good grasp of how tables work.
Q&A
Q Tables are a real hassle to lay out, especially when you get into row and
column spans. That last example was awful.
A
You're right. Tables are a tremendous pain to lay out by hand like this. However, if
you're using writing editors and tools to generate HTML code, having the table defined
like this makes more sense because you can just write out each row in turn
programmatically.
Q Can you nest tables, putting a table inside a single table cell?
A
Sure! As I mentioned earlier, you can put any HTML code you want inside a table cell,
and that includes other tables.
Q
Why does most of the world use
align for positioning a caption at the top or
bottom of a page, but Internet Explorer does something totally different?
A
I don't know. And worse, Microsoft claims it got that definition for Internet Explorer
from HTML 3.0, but no version of HTML 3.0 or the tables specification in HTML 3.2 has
it defined in that way. HTML 4.01 added left and right aligning to this attribute, but
Internet Explorer added that alignment before HTML even mentioned the possibility.

Quiz
1.
What are the basic parts of a table, and which tags identify them?
2.
Which attribute is the most common attribute of the table tag, and what does it do?
file:///G|/1/0672328860/ch08lev1sec11.html (1 von 3) [19.12.2006 13:49:07]
Workshop
3.
What attributes define the amount of space between the edges of the cells and their
content, and the amount of space between cells?
4.
Which attributes are used to create cells that span more than one column or row?
5.
Which elements are used to define the head, body, and foot of a table?
Quiz Answers
1.
The basic parts of a table (the
<table> tag) are the border (defined with the border
attribute), the caption (defined with the
<caption> tag), header cells (<th>), data cells
(
<td>), and table rows (<tr>).
2.
The
border attribute is the most common attribute for the table tag. It specifies
whether border lines are displayed around the table, and how wide the borders should
be.
3.
cellpadding defines the amount of space between the edges of the cell and their
contents.

cellspacing defines the amount of space between the cells.
4.
The
rowspan attribute creates a cell that spans multiple rows. The colspan attribute
creates a cell that spans multiple columns.
5.
<thead>, <tbody>, and <tfoot> define the head, body, and foot of a table.
Exercises
1.
Here's a brainteaser for you: Create a simple nested table (a table within a table) that
contains three rows and four columns. Inside the cell that appears at the second
column in the second row, create a second table that contains two rows and two
columns.
file:///G|/1/0672328860/ch08lev1sec11.html (2 von 3) [19.12.2006 13:49:07]
Workshop
2.
Modify the table shown in
Figure 8.30 so that the rules in the table only appear
between columns.


file:///G|/1/0672328860/ch08lev1sec11.html (3 von 3) [19.12.2006 13:49:07]
Lesson 9. Creating Layouts with CSS


Lesson 9. Creating Layouts with CSS
In the past few lessons, I've discussed how to lay out web pages using HTML tags. Today, I'm going to
describe how you can create complex pages using cascading style sheets (CSS).
In this Lesson
You've already learned about the advantages CSS can provide for formatting smaller snippets of text. In

this lesson, you'll learn how to use CSS to control the appearance of an entire page.
The following topics will be covered:
● Creating style sheets and including them in a page
● Linking to external style sheets
● Using selectors to apply styles to elements on a page
● Units of measure supported by CSS
● CSS properties associated with boxes
● Positioning elements using CSS
● Applying styles to tables and the <body> tag
● Using CSS to create multicolumn layouts


file:///G|/1/0672328860/ch09.html [19.12.2006 13:49:07]
Including Style Sheets in a Page


Including Style Sheets in a Page
Thus far, when I've discussed style sheets, I've always applied them using the style attribute of tags.
For example, I've shown how you can modify the font for some text using tags such as
<div> and
<span>, or how you can modify the appearance of a list item by applying a style within an <li> tag. It
might have occurred to you that applying styles this way doesn't really provide much of an advantage
over using things like the
<font> tag. If you rely on the style attribute of tags to apply CSS, if you want
to embolden every paragraph on a page, you need to put
style="font-weight: bold" in every <p> tag.
This is no improvement over simply using
<p><b> and </b></p> instead. Fortunately, CSS provides ways
to apply styles generally to a page, or even to an entire website.
Creating Page-Level Styles

First, let's look at how we can apply styles to our page at the page level. Thus far, you've seen how
styles are applied, but you haven't seen any style sheets. Here's what one looks like:
<style type="text/css">
h1 { font-size: x-large; font-weight: bold }
h2 { font-size: large; font-weight: bold }
</style>

The <style> tag should be included within the <head> tag on your page. The type attribute indicates the
MIME type of the style sheet.
text/css is the only value you'll use. The body of the style sheet consists
of a series of rules. All rules follow the same structure:
selector { property1: value1; property2: value2; }

Each rule consists of a selector followed by a list of properties and values associated with those
properties. All the properties being set for a selector are enclosed in curly braces, as shown in the
example. You can include any number of properties for each selector, and they must be separated from
one another using semicolons. You can also include a semicolon following the last property/value pair in
the rule, or notit's up to you.
You should already be quite familiar with CSS properties and values because that's what you use in the
style attribute of tags. Selectors are something new. I'll discuss selectors in detail in a bit. The ones I've
used thus far have the same names as tags. If you use
h1 as a selector, the rule will apply to any <h1>
tags on the page. By the same token, if you use
p as your selector, it will apply to <p> tags.
Creating Sitewide Style Sheets
You can't capture the real efficiency of style sheets until you start creating sitewide style sheets. You can
store all of your style information in a file and include it without resorting to any server trickery (which
I'll discuss in
Lesson 19, "Taking Advantage of the Server"). A CSS file is basically just the body of a
<style> tag. To turn the style sheet from the previous section into a separate file, you could just save

the following to a file called
style.css:
h1 { font-size: x-large; font-weight: bold }
file:///G|/1/0672328860/ch09lev1sec1.html (1 von 2) [19.12.2006 13:49:08]