HTML and CSS Reference
In-Depth Information
<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 dis-
play 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 horizon-
tally. 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 use the
style
attribute and
background-color
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
10.30:
Input
▼
<!DOCTYPE html>
<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>
