Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P30 doc

Table and Cell Color and Alignment With this code, the return between the <td> tag and the <img> tag is significantyour image won't be placed properly within the cell (this shows up in centered cells particularly). To correct the problem, just put the </td> and the <img> on the same line like this: <td><img src="check.gif"></td> I've applied the rule mentioned in the "White Space and Tables" sidebar in the following example: Input <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.gif" /></td> <td width="33%"><img src="redcircle.gif" alt="" /></td> <td bgcolor="#000000" width="33%"><img src="redcircle.gif" /></td> </tr> <tr align="center"> <td><img src="blackcircle.gif" alt="" /></td> <td style="background-color: #000000"><br /></td> <td><img src="blackcircle.gif" alt="" /></td> </tr> <tr align="center"> <td bgcolor="#000000"><br /></td> <td><img src="blackcircle.gif" alt="" /></td> <td bgcolor="#000000"><br /></td> </tr> </table> </body> </html> The result is shown in Figure 8.14. Output Figure 8.14. Table cell colors. file:///G|/1/0672328860/ch08lev1sec4.html (2 von 4) [19.12.2006 13:49:02] Table and Cell Color and Alignment Changing Border Colors Internet Explorer also enables you to change the colors of the table's border elements by using the bordercolor, bordercolorlight, and bordercolordark attributes. Each of these attributes takes either a color number or name and can be used in <table>, <td>, or <th>. Like background colors, the border colors each override the colors of the enclosing element. All three require the enclosing <table> tag to have the border attribute set. Currently, these extensions are only supported in Internet Explorer, with the exception of bordercolor, which is supported in Netscape. All of these have been deprecated in favor of style sheets. ● bordercolor sets the color of the border, overriding the 3D look of the default border. ● bordercolordark sets the dark component of 3D-look borders and places the dark color on the right and bottom sides of the table border. ● bordercolorlight sets the light component of 3D-look borders and places the light color on the left and top sides of the table border. Figure 8.15 shows an example of the table with a border of 10 pixels. To demonstrate the Internet Explorer attributes, bordercolordark and bordercolorlight have been added to give the thicker border a 3D look. The first line of the code has been changed as follows: <table border="10" bordercolorlight="Red" bordercolordark="Black" bgcolor="#ffffff" width="50%"> This line of code is getting a little long, isn't it? You might find it easier to read if you put each attribute on a separate line, as the following example shows. It still works the same. Just remember that the closing bracket ( >) must appear only after the final attribute: Input <table border="10" bordercolorlight="Red" bordercolordark="Black" bgcolor="#ffffff" file:///G|/1/0672328860/ch08lev1sec4.html (3 von 4) [19.12.2006 13:49:02] Table and Cell Color and Alignment width="50%"> Note I've included these attributes in the book for completenessyou might see them in other people's code that you happen across sometime. I strongly urge you to avoid these vendor- specific browser extensions yourself and go down the CSS road instead. In Lesson 9, I'm going to discuss the plethora of borders you can create using CSS. After seeing them, you'll never want to use these attributes again. Output Figure 8.15. Table border colors. file:///G|/1/0672328860/ch08lev1sec4.html (4 von 4) [19.12.2006 13:49:02] Aligning Your Table Content 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. The following sections describe how to use these attributes in tables. DO DON'T DO test your tables with various sizes of browser windows to make sure they look OK. DON'T use tables just to put borders around elements on a page; use CSS. DO increase the cellpadding in your tables to make them more readable. DON'T use tables just to apply a background color to an element; use CSS instead. DON'T use tables format non-tabular data if you can help it. 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 8.16, 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%"> Figure 8.16. A table with text alongside it. [View full size image] file:///G|/1/0672328860/ch08lev1sec5.html (1 von 6) [19.12.2006 13:49:03] Aligning Your Table Content 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. When I discuss CSS in more detail in the next lesson, you'll see that there's a way around these problems. As with images, you can use the line break element with the clear attribute to stop wrapping text alongside an image. Centering tables is slightly more difficult. Recent browsers support the align="center" attribute in table tags. To ensure backward-compatibility with older browsers, you can use the <center> or <div align="center"> elements (both of which you learned about in Lesson 6, "Formatting Text with HTML and CSS") to center tables on the page. As with other formatting attributes, however, the align attribute (in the <table> tag as well as in <div> and <p>) has been deprecated in HTML 4.01 in favor of style sheets. 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 both horizontally and vertically. Figure 8.17 shows a table (a real HTML one!) of the various alignment options. Figure 8.17. Aligned content within cells. file:///G|/1/0672328860/ch08lev1sec5.html (2 von 6) [19.12.2006 13:49:03] Aligning Your Table Content [View full size image] 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 hasn't been deprecated for XHTML 1.0 is the <td> and <th> tags. It's perfectly okay to use it within your tables. 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 align="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"> You can override the row alignment for individual cells by adding align to the <td> or <th> elements: file:///G|/1/0672328860/ch08lev1sec5.html (3 von 6) [19.12.2006 13:49:03] Aligning Your Table Content <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 8.18): Input <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Cell Alignments</title> </head> <body> <table border="1" cellpadding="8"> <tr> <th> </th> <th>Left</th> <th>Centered</th> <th>Right</th> </tr> <tr> <th>Top</th> <td align="left" valign="top"><img src="button.gif" alt="" /></td> <td align="center" valign="top"><img src="button.gif" alt="" /></td> <td align="top" valign="top"><img src="button.gif" alt="" /></td> </tr> <tr> <th>Centered</th> <td align="left" valign="middle"><img src="button.gif" alt="" /></td> <td align="center" valign="middle"><img src="button.gif" alt="" /></td> <td align="right" valign="middle"><img src="button.gif" alt="" /></td> </tr> <tr> <th>Bottom</th> <td align="left" valign="bottom"><img src="button.gif" alt="" /></td> <td align="center" valign="bottom"><img src="button.gif" alt="" /></td> <td align="right" valign="bottom"><img src="button.gif" alt="" /></td> </tr> </table> </body> </html> file:///G|/1/0672328860/ch08lev1sec5.html (4 von 6) [19.12.2006 13:49:03] Aligning Your Table Content Output Figure 8.18. A matrix of cell alignment settings. [View full size image] Caption Alignment The optional align attribute of the <caption> tag determines the alignment of the caption. Depending on which browser you're using, however, you have different choices for what align means. The HTML 4 specification names 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. file:///G|/1/0672328860/ch08lev1sec5.html (5 von 6) [19.12.2006 13:49:03] Aligning Your Table Content 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 handled differently. Rather than placing the caption to the side of the table specified, they align the caption horizontally on the top or bottom of the table, and the placement of the caption is then left to the non-standard 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</caption> 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 positioncentered 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 reading the table (at which point they've usually figured out what it's about anyway). Tip If your table contains an image, you might prefer putting the caption at the bottom. This will be more familiar to people who are used to print media. file:///G|/1/0672328860/ch08lev1sec5.html (6 von 6) [19.12.2006 13:49:03] Spanning Multiple Rows or Columns 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. [View full size image] 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 <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> file:///G|/1/0672328860/ch08lev1sec6.html (1 von 10) [19.12.2006 13:49:04] . "Formatting Text with HTML and CSS& quot;) to center tables on the page. As with other formatting attributes, however, the align attribute (in the <table> tag as well as in <div> and. 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 reading the table (at which point they've. 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 both horizontally and vertically.