Aligning a Table on a Web Page

Aligning Cell Content Horizontally and Vertically
If a cell is wider than its contents, the Web browser will, by default, align the content in the cell flush with the cell’s left side.To change the default horizontal (that is, left-to-right) alignment of a cell’s content, add an align attribute to the cell’s <td> tag. The align attribute has three possible settings:

• left Align the content flush against the left side of the cell

• right Align the content flush against the right side of the cell

• center Center the content between the left and right sides of the cell

When a cell is taller than then height of its content, the Web browser will by default, center the content vertically between the top and bottom of the cell. To change the default vertical (that is, top-to-bottom) alignment of a cell’s content, add a valign attribute to the cell’s <td> tag. The valign attribute has four possible settings:

• top Display the content such that it starts flush with the top of the cell.

• middle Center the content vertically between the top and bottom of the cell.

• baseline In Netscape Navigator, display the content such that it ends flush with the bottom of the cell. In Internet Explorer, the “baseline” setting changes only the vertical position of text in a cell if the cell includes both a text and an image. The “baseline” setting causes Internet Explorer to position text such that it ends flush with the bottom edge of a picture. If the cell has no picture, Internet Explorer will ignore the valign attribute’s “baseline” setting and start text content flush with the top of the cell.

• bottom Display content such that it ends flush with the bottom of the cell.

Aligning a Table on a Web Page
In a previous Tip in this chapter, you learned how to align content in a cell along the cell’s left side, right side, or centered within the cell. As long as the cell’s content is narrower than the width of the cell itself, you can use the value of the align attribute in the cell’s <td> tag to position the cell’s content horizontally within the cell. Similarly, if you create a table that is narrower than the width of the Web page on which it is displayed, you can use the align attribute to position the entire table horizontally on the page.

By default, a Web browser will render a table flush with the left side of a Web page. To change a table’s alignment, enclose the table definition between a set of start and end division tags (<div></div>). Then, set the align attribute within the <div> tag to “left”, “right”, or “center”— depending on how you want the table aligned relative to the left and right sides of the Web page.

For example, to have the Web browser display a table flush with the right side of a Web page (instead of the default, which is the left side), enclose the table’s definition within start and end division tags (<div></div>). Then set the align attribute in the <div> tag to “right”, such as that shown in the first line of the following Web page HTML:

<div align="right">

<table border="1" width="50%" height="50%">

<tr><th width="50%">Heading 1</th>

<th width="50%">Heading 2</th></tr>

<tr><td width="50%">Row 1 - Column 1</td>

<td width="50%">Row 1 - Column 2</td></tr>

<tr><td width="50%">Row 2 - Column 1</td>

<td width="50%">Row 2 - Column 2</td></tr>

</table>

</div>

If you write a <table> tag that includes a width attribute set to “100%” or with a pixel value greater than the pixel width of the browser’s application window, the Web browser will ignore the setting of the align attribute within the <div> tag in the enclosing start and end division tags (<div></div>).

Copyright © 2013 Webhostingart.com. All rights reserved unless otherwise stated.