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

Aligning Your Table ContentAligning Your Table Content Another enhancement that you can make to your tables is to adjust the alignment of their content.. Table Alignment By default, tabl

Trang 1

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:

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>

<td><img src="blackcircle.gif" alt="" /></td>

<td style="background-color: #000000"><br /></td>

</tr>

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

Trang 2

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"

Trang 3

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.

Trang 4

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 test your tables with various sizes of browser

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]

Trang 5

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.

Trang 6

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:

Trang 7

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

Trang 8

Output

Figure 8.18 A matrix of cell alignment settings.

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

Trang 9

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

Trang 10

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.

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>

Tiêu đề	Table and Cell Color and Alignment
Trường học	Standard University
Chuyên ngành	Web Publishing
Thể loại	Bài viết
Năm xuất bản	2006
Thành phố	City Name

Định dạng
Số trang	10
Dung lượng	303,77 KB