You also can create cells that span multiple rows or columns within the table.. Figure 10.21 shows a table with spanned columns and rows.. To create a cell that spans multiple rows or co
Trang 1Caption Alignment
The optional alignattribute of the <caption>tag determines the alignment of the
cap-tion Depending on which browser you’re using, however, you have different choices for
whatalignmeans
There are four values for the alignattribute of the <caption>tag,top,bottom,left, and
right By default, the caption is placed at the top of the table (align=“top”) You can use
thealign=“bottom”attribute to the caption if you want to put the caption at the bottom of
the table, like the following:
<table>
<caption align=“bottom”>Torque Limits for Various Fruits</caption>
Similarly, leftplaces the caption to the left of the table, and rightplaces it to the right
In Internet Explorer, however, captions are handled slightly differently The topand
Output
FIGURE 10.20
A matrix of cell
alignment settings.
<tr>
<th>Bottom</th>
<td align=”left” valign=”bottom”><img src=”star.png” alt=”” /></td>
<td align=”center” valign=”bottom”><img src=”star.png” alt=”” /></td>
<td align=”right” valign=”bottom”><img src=”star.png” alt=”” /></td>
</tr>
</table>
</body>
</html>
Trang 2nonstandardvalignattribute So, in Internet Explorer you could place a caption at the
bottom of the table, aligned with the right edge like this:
<table>
<caption valign=“bottom” align=“right”>Torque Limits for Various
Fruits</cap-tion>
To create the same effect in all current browsers, you can use a combination of HTML
and CSS To place the caption at the bottom right of the table, you would use the align
attribute and text-alignproperty as follows:
<caption align=“bottom” style=“text-align: right”>This is a caption</caption>
In general, unless you have a very short table, you should leave the caption in its default
position—centered at the top of the table That way your visitors will see the caption first
and know what they’re about to read, instead of seeing it after they’re already done
read-ing the table (at which point they’ve usually figured out what it’s about anyway)
Thealignattribute was removed from HTML5 You should use the standard alignCSS
property instead
Spanning Multiple Rows or Columns
The tables you’ve created up to this point all had one value per cell or the occasional
empty cell You also can create cells that span multiple rows or columns within the table
Those spanned cells then can hold headings that have subheadings in the next row or
col-umn, or you can create other special effects within the table layout Figure 10.21 shows a
table with spanned columns and rows
10
FIGURE 10.21
Using span
set-tings to alter table
layout.
This cell spans two rows and two columns
This cell spans two columns
This cell spans two rows
Trang 3To create a cell that spans multiple rows or columns, you add the rowspanorcolspan
attribute to the <th>or<td>elements, along with the number of rows or columns you
want the cell to span The data within that cell then fills the entire width or length of the
combined cells, as in the following example:
Input▼
<!DOCTYPE html>
<html>
<head>
<title>Row and Column Spans</title>
</head>
<body>
<table border=“1” summary=“span example”>
<tr>
<th colspan=“2”>Gender</th>
</tr>
<tr>
<th>Male</th>
<th>Female</th>
</tr>
<tr>
<td>15</td>
<td>23</td>
</tr>
</table>
</body>
</html>
Figure 10.22 shows how this table might appear when displayed
Output
FIGURE 10.22
Using span
settings to widen
a column.
Trang 4Cells always span downward and to the right To create a cell that spans several columns,
you add the colspanattribute to the leftmost cell in the span For cells that span rows,
you add rowspanto 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 10.23 shows the result.
Input▼
<!DOCTYPE html>
<html>
<head>
<title>Ring Clearance</title>
</head>
<body>
<table border=“1” summary=“ring clearance”>
<tr>
<th colspan=“2”> </th>
<th>Ring<br />
Clearance</th>
</tr>
<tr align=“center”>
<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>
10
Output
FIGURE 10.23
Cells that span
multiple rows and
columns.
Trang 5▼ Task: Exercise 10.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
col-umn and row spans This is a complex table, so we’ll go step by step, row by row, to
build it
Figure 10.24 shows the table, which indicates service and adjustment specifications from
the service manual for a car
There are actually five rows and columns in this table Do you see them? Some of them
span columns and rows Figure 10.25 shows the same table with a grid drawn over it so
that you can see where the rows and columns are
With tables such as this one that use many spans, it’s helpful to draw this sort of grid to
figure out where the spans are and in which row they belong Remember, spans start at
the topmost row and the leftmost column
FIGURE 10.24
The complex
service
specifica-tion table.
FIGURE 10.25
Five columns, five
rows.
Column 1
Column 2
Column 3
Column 4
Column 5
Trang 6Ready? Start with the framework, just as you have for the other tables in this lesson:
<!DOCTYPE html>
<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, make all the cells light yellow (#ffffcc) by
using the background-colorproperty The border will be increased in size to 5 pixels,
and you’ll color it deep gold (#cc9900) by using the borderproperty You’ll make the
rules between cells appear solid by using a cellspacingsetting of 0and increase the
white space between the cell contents and the borders of the cells by specifying a
cell-paddingsetting of 5 The new table definition now looks like the following:
<table summary=“drive belt deflection”
style=“background-color: #ffffcc; border: 5px solid #cc9900”
cellspacing=”0”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 10.26) Therefore, the HTML
for that cell would be as follows:
<tr>
<th rowspan=“2” colspan=“2”></th>
10
FIGURE 10.26
The first cell.
Trang 7The 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 rowspanand a colspanof two,
meaning that it bleeds down to this row and takes up two cells You don’t need to
rede-fine 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>
<th>Limit</th>
<th>Adjust Deflection</th>
</tr>
What about the last cell? Just like the first cell, the cell in the row above this one had a
rowspanof2, which takes up the space in this row The only values you need for this
row are the ones you already defined
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
any-thing on the left side of the table yet, but it’s worth a try Figure 10.27 shows what
you’ve got so far
FIGURE 10.27
The table so far.
Next row! Check your grid if you need to Here, the first cell is the heading for
Trang 8Are 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>
</tr>
10
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 row—this 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 10.28)
NOTE
Trang 9Now that you have all the rows and cells laid out, adjust the alignments within the cells
The numbers should be centered, at least Because they make up the majority of the
table, center the default alignment for each row:
<tr style=”text-align: center”>
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” style=”text-align: left”>Alternator</th>
<td style=”text-align: left”>Models without AC</td>
<td style=”text-align: left”>Models with AC</td>
<th colspan=“2” style=”text-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 10.29 shows
the final result
FIGURE 10.28
The table with
the data rows
included.
Trang 1010
FIGURE 10.29
The final Drive Belt
Deflection table.
If 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:
<!DOCTYPE html>
<html>
<head>
<title>Service Data</title>
<style type=”text/css”>
td, th { border: 1px solid #cc9900; }
table { background-color: #ffffcc; border: 4px solid #cc9900; }
</style>
</head>
<body>
<table summary=”drive belt deflection”
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 style=”text-align: center”>
<th rowspan=”2” style=”text-align: left”>Alternator</th>
<td style=”text-align: left”>Models without AC</td>
TIP