Going back to your 450-pixel-wide table, you now want to make the two columns in the first column group 75 pixels wide.. The second column group consists of two columns, each spanning 40
Trang 1appearance? 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>
Trang 2<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]
Trang 3Grouping 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>
Trang 4</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 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>
Trang 5<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]
Trang 6The 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:
Trang 7<table border="1" width="100%" frame="hsides" rules="groups">
Figure 8.30 The class schedule with rules added.
[View full size image]
Trang 8Other 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
and is primarily used with nonvisual browsers
Trang 9How 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]
Trang 10The 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