ptg Caption Alignment The optional align attribute of the <caption> tag determines the alignment of the cap- tion. Depending on which browser you’re using, however, you have different choices for what align means. There are four values for the align attribute 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 the align=“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, left places the caption to the left of the table, and right places it to the right. In Internet Explorer, however, captions are handled slightly differently. The top and bottom values are treated in the standard fashion, but left and right are different. Rather than placing the caption to the side of the table specified, they align the caption horizon- tally on the top or bottom of the table, and the placement of the caption is then left to the 286 LESSON 10: Building Tables 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> Download from www.wowebook.com ptg nonstandard valign attribute. 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-align property 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). The align attribute was removed from HTML5. You should use the standard align CSS 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. Spanning Multiple Rows or Columns 287 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 Download from www.wowebook.com ptg To create a cell that spans multiple rows or columns, you add the rowspan or colspan 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. 288 LESSON 10: Building Tables Output . FIGURE 10.22 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. Download from www.wowebook.com ptg 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 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> Spanning Multiple Rows or Columns 289 10 Output . FIGURE 10.23 Cells that span multiple rows and columns. Download from www.wowebook.com ptg ▼ 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. 290 LESSON 10: Building Tables FIGURE 10.24 The complex service specifica- tion table. FIGURE 10.25 Five columns, five rows. Row 1 Row 2 Row 3 Row 4 Row 5 Column 1 Column 2 Column 3 Column 4 Column 5 , Download from www.wowebook.com ptg Ready? 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-color property. The border will be increased in size to 5 pixels, and you’ll color it deep gold (#cc9900) by using the border property. 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 cell- padding setting 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> Spanning Multiple Rows or Columns 291 10 , FIGURE 10.26 The first cell. , Download from www.wowebook.com ptg The 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 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 rowspan of 2, 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. 292 LESSON 10: Building Tables , FIGURE 10.27 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> , Download from www.wowebook.com ptg 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> </tr> Spanning Multiple Rows or Columns 293 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 , Download from www.wowebook.com ptg Now 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. 294 LESSON 10: Building Tables FIGURE 10.28 The table with the data rows included. , , Download from www.wowebook.com ptg Spanning Multiple Rows or Columns 295 10 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 , Download from www.wowebook.com . 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. Spanning Multiple Rows or Columns 287 10 FIGURE 10 . 21 Using. column. 290 LESSON 10 : Building Tables FIGURE 10 .24 The complex service specifica- tion table. FIGURE 10 .25 Five columns, five rows. Row 1 Row 2 Row 3 Row 4 Row 5 Column 1 Column 2 Column 3 Column. (see Figure 10 .26). Therefore, the HTML for that cell would be as follows: <tr> <th rowspan=“2” colspan=“2”></th> Spanning Multiple Rows or Columns 2 91 10 , FIGURE 10 .26 The