Cells that span multiple rows and columns.. Figure 8.23 shows the same table with a grid drawn over it so that you can see where the rows and columns are.. Spanning Multiple Rows or Colu
Trang 1<td>15</td>
<td>23</td>
</tr>
</table>
</body>
</html>
Figure 8.20 shows how this table might appear when displayed
Output
Figure 8.20 Using span settings to widen a column.
Note that if a cell spans multiple rows, you don't have to redefine it as empty in the next row or rows Just ignore it and move to the next cell in the row The span fills in the spot for you
Cells always span downward and to the right To create a cell that spans several columns, you add the
colspan attribute to the leftmost cell in the span For cells that span rows, you add rowspan to the topmost cell
The following input and output example shows a cell that spans multiple rows (the cell with the word
"Piston" in it) Figure 8.21 shows the result
Input
<html>
<head>
<title>Ring Clearance</title>
Trang 2Spanning Multiple Rows or Columns
<th rowspan="2">Piston</th>
<th>Upper</th>
<td>3mm</td>
</tr>
<tr align="center">
<th>Lower</th>
<td>3.2mm</td>
</tr>
</table>
</body>
</html>
Output
Figure 8.21 Cells that span multiple rows and columns.
Task: Exercise 8.2 A Table of Service Specifications
Had enough of tables yet? Let's do another example that takes advantage of everything you've learned here: tables that use colors, headings, normal cells, alignments, and column and row spans This is a very complex table, so we'll go step-by-step, row by row, to build it
Figure 8.22 shows the table, which indicates service and adjustment specifications from the service manual for a car
Figure 8.22 The really complex service specification table.
Trang 3There are actually five rows and columns in this table Do you see them? Some of them span columns and rows Figure 8.23 shows the same table with a grid drawn over it so that you can see where the rows and columns are
Figure 8.23 Five columns, five rows.
[View full size image]
Trang 4Spanning Multiple Rows or Columns
<html>
<head>
<title>Service Data</title>
</head>
<body>
<table border="1" summary="drive belt deflection">
<caption>Drive Belt Deflection</caption>
</table>
</body>
</html>
To enhance the appearance of the table, you'll make all the cells light yellow (#ffffcc) by using the background-color property The border will be increased in size to 5 pixels, and you'll color it deep gold (#cc9900) by using the bordercolor attribute that's compatible with both Netscape and Internet Explorer You'll make the rules between cells appear solid by using a cellspacing setting of 0, and increase the white space between the cell contents and the borders of the cells by specifying a cellpadding setting of 5 The new table
definition now looks like the following:
<table summary="drive belt deflection">
border="5"
style="background-color: #ffffcc"
bordercolor="#cc9900"
cellpadding="5">
Now create the first row With the grid on your picture, you can see that the first cell is empty and spans two rows and two columns (see Figure 8.24) Therefore, the HTML for that cell would be as follows:
<tr>
<th rowspan="2" colspan="2"></th>
Figure 8.24 The first cell.
Trang 5The second cell in the row is the Used Belt Deflection heading cell, which spans two
columns (for the two cells beneath it) The code for that cell is as follows:
<th colspan="2">Used Belt Deflection</th>
Now that you have two cells that span two columns each, there's only one left in this row However, this one, like the first one, spans the row beneath it:
<th rowspan="2">Set deflection of new belt</th>
</tr>
Now go on to the second row This isn't the one that starts with the Alternator heading Remember that the first cell in the previous row has a rowspan and a colspan of two,
meaning that it bleeds down to this row and takes up two cells You don't need to redefine
it for this row You just move on to the next cell in the grid The first cell in this row is the Limit heading cell, and the second cell is the Adjust Deflection heading cell:
<tr>
Trang 6Spanning Multiple Rows or Columns
Are you with me so far? Now is a great time to try this out in your browser to make sure that everything is lining up It'll look kind of funny because you haven't really put anything
on the left side of the table yet, but it's worth a try Figure 8.25 shows what you've got so far
Figure 8.25 The table so far.
Next row! Check your grid if you need to Here, the first cell is the heading for Alternator, and it spans this row and the one below it:
<tr>
<th rowspan="2">Alternator</th>
Are you getting the hang of this yet?
The next three cells are pretty easy because they don't span anything Here are their definitions:
<td>Models without AC</td>
<td>10mm</td>
<td>5-7mm</td>
The last cell in this row is just like the first one:
<td rowspan="2">5-7mm</td>
</tr>
You're up to row number four In this one, because of the rowspans from the previous row, there are only three cells to define: the cell for Models with AC, and the two cells for the numbers:
<tr>
<td>Models with AC</td>
<td>12mm</td>
<td>6-8mm</td>
Trang 7Note
In this table, I've made the Alternator cell a heading cell and the AC cells plain
data This is mostly an aesthetic decision on my part I could have made all
three into headings just as easily
Now for the final rowthis one should be easy The first cell (Power Steering Oil Pump) spans two columns (the one with Alternator in it and the with/without AC column) The remaining three are just one cell each:
<tr>
<th colspan="2">Power Steering Oil Pump</th>
<td>12.5mm</td>
<td>7.9mm</td>
<td>6-8mm</td>
</tr>
That's it You're done laying out the rows and columns That was the hard part The rest is just fine-tuning Try looking at it again to make sure there are no strange errors (see
Figure 8.26)
Figure 8.26 The table with the data rows included.
[View full size image]
Trang 8Spanning Multiple Rows or Columns
The labels along the left side of the table (Alternator, Models with/without AC, and Power Steering Oil Pump) look funny if they're centered, however, so left-align them using the following code:
<th rowspan="2" align="left">Alternator</th>
<td align="left">Models without AC</td>
<td align="left">Models with AC</td>
<th colspan="2" align="left">Power Steering Oil Pump</th>
I've put some line breaks in the longer headings so that the columns are a little narrower Because the text in the headings is pretty short to start with, I don't have to worry too much about the table looking funny if it gets too narrow Here are the lines I modified:
<th rowspan="2">Set<br />deflection<br />of new belt</th>
<th>Adjust<br />Deflection</th>
For one final step, you'll align the caption to the left side of the table:
<caption style="text-align: left">Drive Belt Deflection</caption>
Voiláthe final table, with everything properly laid out and aligned! Figure 8.27 shows the final result
Figure 8.27 The final Drive Belt Deflection table.
Note
Trang 9If you got lost at any time, the best thing you can do is pull out your handy
text editor and try it yourself, following along tag by tag After you've done it
a couple of times, it becomes easier
Here's the full text for the table example:
<html>
<head>
<title>Service Data</title>
</head>
<body>
<table border="5"
style="background-color: #ffffcc"
bordercolor="#cc9900"
cellspacing="0"
cellpadding="5">
<caption style="text-align: left">Drive Belt Deflection</caption>
<tr>
<th rowspan="2" colspan="2"></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 align="center">
<th rowspan="2" align="left">Alternator</th>
<td align="left">Models without AC</td>
<td>10mm</td>
<td>5-7mm</td>
<td rowspan="2">5-7mm</td>
</tr>
<tr align="center">
<td align="left">Models with AC</td>
<td>12mm</td>
<td>6-8mm</td>
</tr>
<tr align="center">
<th colspan="2" align="left">Power Steering Oil Pump</th>
<td>12.5mm</td>
<td>7.9mm</td>
<td>6-8mm</td>
</tr>
</table>
</body>
Trang 10More Advanced Table Enhancements
More Advanced Table Enhancements
Believe it or not, after all the work you've done, you're finally getting to the table elements that were
introduced in HTML 4.01 There are many improvements in the way that you define table columns and rows, which I'll cover in the following sections
Grouping and Aligning Columns
One of the table enhancements offered in HTML 4.01 is the capability to render tables incrementally, rather than having to wait for all of the data in the table to load This is accomplished, in part, by
defining the columns of the table with the <colgroup> and <col> elements These elements enable the web page author to create structural divisions of table columns, which then can be enhanced visually through the use of style sheet properties
The <colgroup> </colgroup> element is used to enclose one or more columns in a group The closing </ colgroup> tag is optional in HTML 4.01, but it's required by the XHTML 1.0 standard This element has two attributes:
than 0 If span isn't defined, the <colgroup> element defaults to a column group that contains one column If the <colgroup> element contains one or more <col> elements (described later),
however, the span attribute is ignored
percentages, and relative values You also can specify a special width value of "0*" (zero
followed by an asterisk) This value specifies that the width of each column in the group should
be the minimum amount necessary to hold the contents of each cell in the column If you specify the "0*" value, however, browsers will be unable to render the table incrementally (meaning that all of the markup for the table will have to be downloaded before the browser can start displaying it)
Suppose that you have a table that measures 450 pixels in width and contains six columns You want each of the six columns to be 75 pixels wide The code looks something like the following:
<table border="1" width="450">
<colgroup span="6" width="75">
</colgroup>
Now you want to change the columns Using the same 450-pixel-wide table, you make the first two
columns 25 pixels wide, and the last four columns 100 pixels wide This requires two <colgroup>
elements, as follows:
<table border="1" width="450">
<colgroup span="2" width="25">
</colgroup>
<colgroup span="4" width="100">
</colgroup>
What if you don't want all the columns in a column group to be the same width or have the same