Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P32 pptx
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 (276.09 KB, 10 trang )
More Advanced Table Enhancements
appearance? That's where the <col> element comes into play. Whereas <colgroup> defines the structure
of table columns,
<col> defines their attributes. To use this element, begin the column definition with a
<col> tag. The end tag is forbidden in this case. Instead, you should use the XHTML 1.0 construct for
tags with no closing tag and write the tag as
<col />.
Going back to your 450-pixel-wide table, you now want to make the two columns in the first column
group 75 pixels wide. In the second column group, you have columns of 50, 75, 75, and 100 pixels,
respectively. Here's how you format the second column group with the
<col> tag:
<table border="1" width="450">
<colgroup span="2" width="75" />
</colgroup>
<colgroup>
<col span="1" width="50" />
<col span="2" width="75" />
<col span="1" width="100" />
</colgroup>
Now apply this to some real code. The following example shows a table that displays science and
mathematics class schedules. Start by defining a table that has a one-pixel-wide border and spans
100% of the browser window width.
Next, you define the column groups in the table. You want the first column group to display the names
of the classes. The second column group consists of two columns that display the room number for the
class, as well as the time that the class is held. The first column group consists of one column of cells
that spans 20% of the entire width of the table. The contents of the cell are aligned vertically toward the
top and centered horizontally. The second column group consists of two columns, each spanning 40% of
the width of the table. Their contents are vertically aligned to the top of the cells. To further illustrate
how
colgroup works, I'm going to use the style attribute and backgroundcolor property to set each of
the column groups to have different background colors.
Finally, you enter the table data the same way that you normally do. Here's what the complete code
looks like for the class schedule, and the results are shown in
Figure 8.28:
Input
<html>
<head>
<title>Grouping Columns</title>
</head>
<body>
<table border="1" width="100%" summary="Grouping Columns">
<caption><b>Science and Mathematic Class Schedules</b></caption>
<colgroup width="20%" align="center" valign="top"
style="background-color: #fcf"></colgroup>
<colgroup span="2" width="40%" valign="top"
style="background-color: #ccf"></colgroup>
<tr>
<th>Class</th>
<th>Room</th>
<th>Time</th>
</tr>
file:///G|/1/0672328860/ch08lev1sec7.html (2 von 8) [19.12.2006 13:49:05]
More Advanced Table Enhancements
<tr>
<td>Biology</td>
<td>Science Wing, Room 102</td>
<td>8:00 AM to 9:45 AM</td>
</tr>
<tr>
<td>Science</td>
<td>Science Wing, Room 110</td>
<td>9:50 AM to 11:30 AM</td>
</tr>
<tr>
<td>Physics</td>
<td>Science Wing, Room 107</td>
<td>1:00 PM to 2:45 PM</td>
</tr>
<tr>
<td>Geometry</td>
<td>Mathematics Wing, Room 236</td>
<td>8:00 AM to 9:45 AM</td>
</tr>
<tr>
<td>Algebra</td>
<td>Mathematics Wing, Room 239</td>
<td>9:50 AM to 11:30 AM</td>
</tr>
<tr>
<td>Trigonometry</td>
<td>Mathematics Wing, Room 245</td>
<td>1:00 PM to 2:45 PM</td>
</tr>
</table>
</body>
</html>
Output
Figure 8.28. The class schedule with formatted column groups.
[View full size image]
file:///G|/1/0672328860/ch08lev1sec7.html (3 von 8) [19.12.2006 13:49:05]
More Advanced Table Enhancements
Grouping and Aligning Rows
Now that you know how to group and format columns, let's turn to the rows. You can group the rows of
a table into three sections: table heading, table footer, and table body. You can apply Cascading Style
Sheet properties to emphasize the table heading and table footer, and give the body of the table a
different appearance.
The table header, footer, and body sections are defined by the
<thead>, <tfoot>, and <tbody> elements,
respectively. Each of these elements must contain the same number of columns.
The
<thead> </thead> element defines the heading of the table, which should contain information
about the columns in the body of the table. Typically, this is the same type of information that you've
been placing within header cells so far today. The starting
<thead> tag is always required when you want
to include a head section in your table, as is the closing
</thead> tag under XHTML 1.0.
The head of the table appears right after the
<table> element or after <colgroup> elements, as the
following example shows, and must include at least one row group defined by the
<tr> element. I'm
including
style attributes in the row grouping tags to illustrate how they are used. The table is
formatted as follows:
Input
<table border="1" width="100%" summary="Science and Mathematic Class
Schedules">
<caption><b>Science and Mathematic Class Schedules</b></caption>
<colgroup width="20%" align="center" valign="top">
<colgroup span="2" width="40%" valign="top">
<thead style="color: red">
<tr>
<th>Class</th>
<th>Room</th>
<th>Time</th>
file:///G|/1/0672328860/ch08lev1sec7.html (4 von 8) [19.12.2006 13:49:05]
More Advanced Table Enhancements
</tr>
</thead>
The <tfoot> </tfoot> element defines the footer of the table. The starting <tfoot> tag is always
required when defining the footer of a table. The closing
<tfoot> tag was optional in HTML 4.01, but it's
required for XHTML 1.0 compliance. The footer of the table appears immediately after the table heading
if one is present, or after the
<table> element if a table heading isn't present. It must contain at least
one row group, defined by the
<tr> element. A good example of information that you could place in a
table footer is a row that totals columns of numbers in a table.
You must define the footer of the table before the table body because the browser has to render the
footer before it receives all the data in the table body. For the purposes of this example, we'll include
the same information in the table head and the table footer. The code looks like this:
Input
<tfoot style="color: blue">
<tr>
<th>Class</th>
<th>Room</th>
<th>Time</th>
</tr>
</tfoot>
After you define the heading and footer for the table, you define the rows in the table body. A table can
contain more than one body element, and each body can contain one or more rows of data. This might
not seem to make sense, but using multiple body sections enables you to divide up your table into
logical sections. I'll show you one example of why this is rather cool in a little bit.
The
<tbody> </tbody> element defines a body section within your table. The <tbody> start tag is
required if at least one of the following is true:
● The table contains head or foot sections
● The table contains more than one table body
The following example contains two table bodies, each consisting of three rows of three cells each. The
body appears after the table footer, as follows:
Input
<tbody style="color: yellow">
<tr>
<td>Biology</td>
<td>Science Wing, Room 102</td>
<td>8:00 AM to 9:45 AM</td>
</tr>
<tr>
<td>Science</td>
<td>Science Wing, Room 110</td>
<td>9:50 AM to 11:30 AM</td>
</tr>
<tr>
file:///G|/1/0672328860/ch08lev1sec7.html (5 von 8) [19.12.2006 13:49:05]
More Advanced Table Enhancements
<td>Physics</td>
<td>Science Wing, Room 107</td>
<td>1:00 PM to 2:45 PM</td>
</tr>
</tbody>
<tbody style="color: grey">
<tr>
<td>Geometry</td>
<td>Mathematics Wing, Room 236</td>
<td>8:00 AM to 9:45 AM</td>
</tr>
<tr>
<td>Algebra</td>
<td>Mathematics Wing, Room 239</td>
<td>9:50 AM to 11:30 AM</td>
</tr>
<tr>
<td>Trigonometry</td>
<td>Mathematics Wing, Room 245</td>
<td>1:00 PM to 2:45 PM</td>
</tr>
</tbody>
</table>
Put all the preceding together and you get a table that looks like that shown in Figure 8.29.
Output
Figure 8.29. The class schedule with a head, two bodies, and a foot.
[View full size image]
file:///G|/1/0672328860/ch08lev1sec7.html (6 von 8) [19.12.2006 13:49:05]
More Advanced Table Enhancements
The
frame and rules Attributes
In the preceding example, it's not really clear where the column groups and row groups begin and end.
You can use the
frame and rules attributes of the <table> element to selectively control table borders.
The
frame attribute affects how the external border of the table is rendered. You can specify one of
several different values to define which sides of the external border are visible:
void
The default value. No sides of the external border are visible.
above
Renders only the top side of the border.
below
Renders only the bottom side of the border.
hsides
Renders the top and bottom sides of the border.
lhs
Renders the left side of the border.
rhs
Renders the right side of the border.
vsides
Renders the right and left sides of the border.
box
Renders all four sides of the border.
border
Renders all four sides of the border.
The rules attribute is somewhat similar to the frame attribute, except that it defines the rules that
appear between the cells within a table. The following values apply to the
rules attribute:
none
The default value. No rules are drawn around any of the cells.
groups
Rules appear between row groups as defined by <thead>, <tfoot>, and <tbody>, and between
column groups as defined by
<colgroup> and <col>.
rows
Rules appear only between rows.
cols
Rules appear only between columns.
all
Rules appear between all rows and columns.
Now let's alter the borders in the table so that your column groups and row groups stand out better.
You'll draw a border around the Class Schedule table, but you'll place the border only along the top and
bottom of the table by applying
frame="hsides" to the <table> tag.
Inside the table, you'll separate the heading and footer from the two body sections (one table body for
the Science subjects and one table body for the Math subjects). You'll also separate the Subject column
group and the Room/Time column group. All this is accomplished by using
rules="groups" with the
<table> element.
You need to modify only one line in your code to accomplish all of this now. The revised table element
appears as follows, and
Figure 8.30 shows the results:
file:///G|/1/0672328860/ch08lev1sec7.html (7 von 8) [19.12.2006 13:49:05]
More Advanced Table Enhancements
<table border="1" width="100%" frame="hsides" rules="groups">
Figure 8.30. The class schedule with rules added.
[View full size image]
file:///G|/1/0672328860/ch08lev1sec7.html (8 von 8) [19.12.2006 13:49:05]
Other Table Elements and Attributes
Other Table Elements and Attributes
Table 8.1 presents some of the additional elements and attributes that pertain to tables.
Table 8.1. Other Table Elements and Attributes
Attribute Applied to Element Use
char
See "Use" column Specifies a character to be used as an axis to align the contents of a
cell. For example, you can use it to align a decimal point in
numerical values. Can be applied to
colgroup, col, tbody, thead,
tfoot, tr, td, and th elements.
charoff
See "Use" column Specifies the amount of offset applied to the first occurrence of the
alignment character that is specified in the char attribute. Applies to
colgroup, col, tbody, thead, tfoot, tr, td, and th elements.
summary <table>
Provides a more detailed description of the contents of the table
and is primarily used with nonvisual browsers.
file:///G|/1/0672328860/ch08lev1sec8.html [19.12.2006 13:49:06]
How Tables Are Used
How Tables Are Used
Today, I explained the usage of tables in publishing tabular data. That was the original purpose for
HTML tables. However, Netscape 2.0 introduced the option of turning off table borders, and this, along
with other limitations in HTML, changed the way tables were used.
Before style sheets were invented and implemented in most browsers, there was only one way to lay out
elements on a page other than straight down the middletables. Every time you see a page that has
navigational links running down one side or elements enclosed in boxes with a background of a different
color, someone has laid things out using CSS or tables, and usually it's tables that have been used. In
fact, tables were once such a huge part of web publishing that it was rare to see a page that didn't
contain any.
Even though all current browsers provide solid support for Cascading Style Sheets, you'll still find that
most pages are laid out using tables. Because, as you'll see tomorrow, CSS fundamentally changes the
way pages are laid out, many people haven't bothered to get current and abandon tables. Furthermore,
there's still some concern about making pages look the same in old browsers as they do in new
browsers. Old habits die hard, so tables are still a common approach for creating complex layouts. Let's
look at a page that uses tables for layoutfreshmeat.net (a site that keeps track of new releases of open
source software). It's a good example because it uses several clearly marked tables with nice bold
borders. The page appears in
Figure 8.31.
Figure 8.31. The freshmeat.net home page.
[View full size image]
file:///G|/1/0672328860/ch08lev1sec9.html (1 von 3) [19.12.2006 13:49:06]
How Tables Are Used
The first four rows of the page are all tables, the first containling links to related sites, then one
containing an ad, one containing navigational elements, and one containing the search fields and even
more navigational links.
The main content of the page is presented in a table that appears to be two columns but is actually
seven columns wide. Two of the columns contain contentthe list of software packages on the left and the
navigation on the rightand the rest of them are used for spacing and formatting. The listings for
individual software packages in the left column are also tables, and the tabular data at the bottom of
each listing is yet another table.
This page illustrates the problems with laying out your page using tables. As you'll see later, using
tables means including lots of tags on your pages that wouldn't be necessary if you used a CSS-based
approach. You also lose the meaning of what a table is, as most of the tables aren't used to present
tabular data, but rather just to make things appear on the page where you want them.
This type of layout was typical, but most new websites are being created using CSS for page layout. As
you can see from the freshmeat.net page, tables can be used for a very precise layout of the elements
on a page. The best way to learn how to create your own pages using these techniques is to view the
source code of pages you like. It's unethical to copy someone else's code directly, but there's nothing
wrong with using other people's HTML as a source of inspiration or instruction.
Tip
Before you start venturing into using nested tables to create solid borders and resorting to
file:///G|/1/0672328860/ch08lev1sec9.html (2 von 3) [19.12.2006 13:49:06]
