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 column or you can create other special effects within the table layout. Figure 8.19 shows a table with spanned columns and rows.

Figure 8.19. Using span settings to alter table layout.

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:


<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 8.20 shows how this table might appear when displayed.


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.


<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>


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.

There 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.

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.

Ready? Start with the framework, just as you have for the other tables today:

<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.

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 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>   <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 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> </tr>


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.

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 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" 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.


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:

<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> </html>

Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day
Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition)
ISBN: 0672328860
EAN: 2147483647
Year: 2007
Pages: 305

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: