Tự học HTML và CSS trong 1 giờ - part 31 potx

ptg percentage of the full table width). As with table widths, using percentages rather than specific pixel widths is a better idea because it allows your table to be displayed regard- less of the window size. Column widths are useful when you want to have multiple columns of identical widths, regardless of their contents (for example, for some forms of page layout). Figure 10.13 shows your original table from Figure 10.1. This time, however, the table spans 100% of the screen’s width. The first column is 40% of the table width, and the remaining three columns are 20% each. To accomplish this, the column widths are applied to the heading cells as follows: Input ▼ <table border=“1” width=“100%”> <caption>Vital Statistics</caption> <tr> <th width=“40%”>Name</th> <th width=“20%”>Height</th> <th width=“20%”>Weight</th> <th width=“20%”>Eye Color</th> </tr> </table> 276 LESSON 10: Building Tables Output . FIGURE 10.13 A table with manu- ally set column widths. What happens if you have a table that spans 80% of the screen, and it includes the same header cells (40%, 20%, 20%, and 20%) as in the preceding example? Revise the code slightly, changing the width of the entire table to 80%, as shown in Figure 10.14. When you open the new table in your browser, you’ll see that the table now spans 80% of the width of your screen. The four columns still span 40%, 20%, 20%, and 20% of the table. To be more specific, the columns span 32%, 16%, 16%, and 16% of the entire screen width: Download from www.wowebook.com ptg Input ▼ <table border=“1” width=“80%”> <caption>Vital Statistics</caption> <tr> <th width=“40%”>Name</th> <th width=“20%”>Height</th> <th width=“20%”>Weight</th> <th width=“20%”>Eye Color</th> </tr> </table> Sizing Tables, Borders, and Cells 277 10 Output . FIGURE 10.14 A modified table with manually set column widths. If you are going to specify cell widths, make sure to either specify the widths for cells only on one row or to the same values for every row. If you specify more than one value for the width of a column (by specifying different values on multiple rows of a table), there’s no good way to predict which one the browser will use. You can also specify widths using CSS, using the width property. Here’s how you create the preceding table using CSS for the cell widths: <table border=“1” style=”width: 80%”> <caption>Vital Statistics</caption> <tr> <th style=”width: 40%”>Name</th> <th style=”width: 20%”>Height</th> <th style=”width: 20%”>Weight</th> <th style=”width: 20%”>Eye Color</th> </tr> </table> One advantage of using CSS approach is that you can use any units you like to specify the width, rather than just pixels or percentages. Download from www.wowebook.com ptg Setting Breaks in Text Often, the easiest way to make small changes to how a table is laid out is by using line breaks ( <br /> elements). Line breaks are particularly useful if you have a table in which most of the cells are small and only one or two cells have longer data. As long as the screen width can handle it, generally the browser just creates really long rows. This looks rather funny in some tables. For example, the last row in the table shown in Fig- ure 10.15 is coded as follows: Input ▼ <tr> <td>TC</td> <td>7</td> <td>Suspicious except when hungry, then friendly</td> </tr> 278 LESSON 10: Building Tables Output . FIGURE 10.15 A table with one long row. By putting in line breaks, you can wrap that row in a shorter column so that it looks more like the table shown in Figure 10.16. The following shows how the revised code looks for the last row: Input ▼ <tr> <td>TC</td> <td>7</td> <td>Suspicious except<br /> when hungry, <br /> then friendly</td> </tr> Download from www.wowebook.com ptg On the other hand, you might have a table in which a cell is being wrapped and you want all the data on one line. (This can be particularly important for things such as form ele- ments within table cells, where you want the label and the input field to stay together.) In this instance, you can add the nowrap attribute to the <th> or <td> elements, and the browser keeps all the data in that cell on one line. Note that you can always add <br /> elements to that same cell by hand and get line breaks exactly where you want them. Let’s suppose you have a table where the column headings are wider than the data in the columns. If you want to keep them all online, use nowrap as follows: <table width=“50%” summary=“Best Hitters of All Time”> <tr> <th>Player Name</th> <th nowrap=“nowrap”>Batting Average</th> <th nowrap=“nowrap”>Home Runs</th> <th>RBI</th> </tr> <tr> <td>Babe Ruth</td> <td>.342</td> <td>714</td> <td>2217</td> </tr> <tr> <td>Ted Williams</td> <td>.344</td> <td>521</td> <td>1839</td> </tr> </table> Regardless of the width of the table, the Batting Average and the Home Runs column headings will not wrap. Sizing Tables, Borders, and Cells 279 10 Output . FIGURE 10.16 The long row fixed with <br/>. Download from www.wowebook.com ptg 280 LESSON 10: Building Tables The nowrap attribute has been deprecated in HTML 4.01 in favor of using style sheet properties. To achieve the same results in CSS, use the white-space property. The default value is “normal”. To disable word wrapping, use the value “nowrap”. Here’s how one of the headings in the previous example would be written using CSS: <th style=”white-space: normal”>Batting Average</th> Be careful when you hard-code table cells with line breaks and nowrap attributes. Remember, your table might be viewed by users with many different screen widths. Try resizing the browser window to make sure your table still looks correct. For the most part, try to let the browser format your table and make minor adjustments only when necessary. Table and Cell Color After you have your basic table layout with rows, headings, and data, you can start refin- ing how that table looks. You can refine tables in a couple of ways. One way is to add color to borders and cells. There are two ways to change the background color of a table, a row, or a cell inside a row. In the pre-CSS world, you would use the bgcolor attribute of the <table>, <tr>, <th>, or <td> elements. Just as in the <body> tag, the value of bgcolor is a color speci- fied as a hexadecimal triplet or one of the 16 color names: Black, White, Green, Maroon, Olive, Navy, Purple, Gray, Red, Yellow, Blue, Teal, Lime, Aqua, Fuchsia, or Silver. In the style sheet world, you use the background-color property or the background prop- erty. You can use the style attribute in the <table>, <tr>, <th>, and <td> elements, just as you can in most other elements. Each background color overrides the background color of its enclosing element. For example, a table background overrides the page back- ground, a row background overrides the table’s, and any cell colors override all other col- ors. If you nest tables inside cells, that nested table has the background color of the cell that encloses it. Also, if you change the color of a cell, don’t forget to change the color of the text inside it so that you can still read it. NOTE Download from www.wowebook.com ptg Table and Cell Color 281 10 For table cells to show up with background colors, they must not be empty. Simply putting a <br /> element in empty cells works fine. Here’s an example of changing the background and cell colors in a table. I’ve created a checkerboard using an HTML table. The table itself is white, with alternating cells in black. The checkers (here, red and black circles) are images. In the source code, I’ve used both bgcolor and the background-color property to set background colors for some of the cells. As you’ll see in the screenshot, the appearance of both is the same when ren- dered in the browser: Input ▼ <!DOCTYPE html> <html> <head> <title>Checkerboard</title> </head> <body> <table bgcolor=“#FFFFFF” width=“50%” summary=“checkerboard”> <tr align=“center”> <td bgcolor=“#000000” width=“33%”><img src=“redcircle.png” /></td> <td width=“33%”><img src=“redcircle.png” alt=““ /></td> <td bgcolor=“#000000” width=“33%”><img src=“redcircle.png” /></td> </tr> <tr align=“center”> <td><img src=“blackcircle.png” alt=““ /></td> <td style=“background-color: #000000”><br /></td> <td><img src=“blackcircle.png” alt=““ /></td> </tr> <tr align=“center”> <td bgcolor=“#000000”><br /></td> <td><img src=“blackcircle.png” alt=““ /></td> <td bgcolor=“#000000”><br /></td> </tr> </table> </body> </html> Figure 10.17 shows the result. NOTE Download from www.wowebook.com ptg Aligning Your Table Content Another enhancement that you can make to your tables is to adjust the alignment of their content. The align attribute aligns content horizontally, whereas the valign attribute aligns content vertically, and of course, you can use CSS properties to accomplish the same things, too. The following sections describe how to use these attributes in tables. Table Alignment By default, tables are displayed on a line by themselves along the left side of the page, with any text above or below the table. However, you can use the align attribute to align tables along the left or right margins and wrap text alongside them the same way you can with images. align=“left” aligns the table along the left margin, and all text following that table is wrapped in the space between that table and the right side of the page. align=“right” does the same thing, with the table aligned to the right side of the page. In the example shown in Figure 10.18, a table that spans 70% of the width of the page is aligned to the left with the following code: <table border=“1” align=“left” width=“70%”> 282 LESSON 10: Building Tables Output . FIGURE 10.17 Table cell colors. DO test your tables with various sizes of browser windows to make sure they look okay. DO increase the cellpadding in your tables to make them more readable. DON’T use tables just to put borders around elements on a page; use CSS. DON’T use tables just to apply a back- ground color to an element; use CSS instead. DON’T use tables format nontabular data if you can help it. DO DON’T Download from www.wowebook.com ptg As you can see from the screenshot, one problem with wrapping text around tables is that HTML has no provision for creating margins that keep the text and the image from jamming right up next to each other. That problem can be addressed by applying a mar- gin to the table using CSS. As with images, you can use the line break element with the clear attribute to stop wrapping text alongside a table. Centering tables is slightly more difficult. Most browsers support the align=“center” attribute in table tags. Aligning Your Table Content 283 10 FIGURE 10.18 A table with text alongside it. The CSS approach to flowing content around a table is to use the float property, as described in Lesson 7, “Formatting Text with HTML and CSS.” So to align a table to the right and float content around it, you could use a style declaration like this: .sidetable { width: 300xp; float: right; margin: 15px; } That makes the table 300 pixels wide, aligns it to the right, and applies a 15 pixel margin to all four sides. To center a table on the page, you can use a margin value of auto, as follows: .centered { margin-left: auto; margin-right: auto; } Cell Alignment After you have your rows and cells in place inside your table and the table is properly aligned on the page, you can align the data within each cell for the best effect, based on what your table contains. Several options enable you to align the data within your cells TIP Download from www.wowebook.com ptg Horizontal alignment (the align attribute) defines whether the data within a cell is aligned with the left cell margin (left), the right cell margin (right), or centered within the two (center). The one place where the align attribute wasn’t deprecated in XHTML 1.0 is the <td> and <th> tags. It’s perfectly okay to use it within your tables. That said, it is more efficient to align the contents of cells using CSS if you want to apply the align- ment to many cells at once. Vertical alignment (the valign attribute) defines the vertical alignment of the data within the cell: flush with the top of the cell (top), flush with the bottom of the cell (bottom), or vertically centered within the cell (middle). Newer browsers also implement valign=“baseline”, which is similar to valign=“top” except that it aligns the baseline of the first line of text in each cell. (Depending on the contents of the cell, this might or might not produce a different result than valign=“top”.) By default, heading cells are centered both horizontally and vertically, and data cells are centered vertically but aligned flush left. You can override the defaults for an entire row by adding the align or valign attributes to the <tr> element, as in the following: <tr align=“center” valign=“top”> 284 LESSON 10: Building Tables FIGURE 10.19 Aligned content within cells. both horizontally and vertically. Figure 10.19 shows a table (a real HTML one!) of the various alignment options. Download from www.wowebook.com ptg You can override the row alignment for individual cells by adding align to the <td> or <th> elements: <tr align=“center” valign=“top”> <td>14</td> <td>16</td> <td align=left>No Data</td> <td>15</td> </tr> The following input and output example shows the various cell alignments and how they look (see Figure 10.20). I’ve added a style sheet that sets the cell heights to 100 pixels to make the vertical alignments easier to see: Input ▼ <!DOCTYPE html> <html> <head> <title>Cell Alignments</title> <style type=”text/css”> td { height: 100px; } </style> </head> <body> <table border=”1” cellpadding=”8” width=”100%”> <tr> <th><br /></th> <th>Left</th> <th>Centered</th> <th>Right</th> </tr> <tr> <th>Top</th> <td align=”left” valign=”top”><img src=”star.png” alt=”” /></td> <td align=”center” valign=”top”><img src=”star.png” alt=”” /></td> <td align=”top” valign=”top”><img src=”star.png” alt=”” /></td> </tr> <tr> <th>Centered</th> <td align=”left” valign=”middle”><img src=”star.png” alt=”” /></td> <td align=”center” valign=”middle”><img src=”star.png” alt=”” /></td> <td align=”right” valign=”middle”><img src=”star.png” alt=”” /></td> </tr> Aligning Your Table Content 285 10 Download from www.wowebook.com . Cells 279 10 Output . FIGURE 10 .16 The long row fixed with <br/>. Download from www.wowebook.com ptg 280 LESSON 10 : Building Tables The nowrap attribute has been deprecated in HTML 4. 01 in. Content 283 10 FIGURE 10 .18 A table with text alongside it. The CSS approach to flowing content around a table is to use the float property, as described in Lesson 7, “Formatting Text with HTML and CSS. ”. align=“center” valign=“top”> 284 LESSON 10 : Building Tables FIGURE 10 .19 Aligned content within cells. both horizontally and vertically. Figure 10 .19 shows a table (a real HTML one!) of the various alignment