Thông tin tài liệu
Spanning Multiple Rows or Columns <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> </head> <body> <table border="1" summary="ring clearance"> <tr> <th colspan="2"> </th> <th>Ring<br /> Clearance</th> </tr> <tr align="center"> file:///G|/1/0672328860/ch08lev1sec6.html (2 von 10) [19.12.2006 13:49:04] Spanning 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. file:///G|/1/0672328860/ch08lev1sec6.html (3 von 10) [19.12.2006 13:49:04] Spanning Multiple Rows or Columns 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. [View full size image] 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: file:///G|/1/0672328860/ch08lev1sec6.html (4 von 10) [19.12.2006 13:49:04] Spanning 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. file:///G|/1/0672328860/ch08lev1sec6.html (5 von 10) [19.12.2006 13:49:04] Spanning Multiple Rows or Columns 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. file:///G|/1/0672328860/ch08lev1sec6.html (6 von 10) [19.12.2006 13:49:04] Spanning 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> file:///G|/1/0672328860/ch08lev1sec6.html (7 von 10) [19.12.2006 13:49:04] Spanning Multiple Rows or Columns </tr> Note 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] 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"> file:///G|/1/0672328860/ch08lev1sec6.html (8 von 10) [19.12.2006 13:49:04] Spanning 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 file:///G|/1/0672328860/ch08lev1sec6.html (9 von 10) [19.12.2006 13:49:04] Spanning Multiple Rows or Columns 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> file:///G|/1/0672328860/ch08lev1sec6.html (10 von 10) [19.12.2006 13:49:04] More 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: ● span defines the number of columns in the column group. Its value must be an integer greater 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. ● width specifies the width of each column in the column group. Widths can be defined in pixels, 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 file:///G|/1/0672328860/ch08lev1sec7.html (1 von 8) [19.12.2006 13:49:05] . <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. (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. 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
Ngày đăng: 07/07/2014, 09:20
Xem thêm: Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P31 pot, Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P31 pot
