6 : Cell Alignment & Spacing

In the "Growth Table" on the previous page I mentioned that the <th> tag centered the text in the cell. But all the cell elements appeared centered, didn't they? Let's make the table wider and taller and look again:

Growth Table (Table 8)
GROWTH PROJECTIONS
/	June	July	Aug.
U.S.A.	0.20%	0.45%	0.80%
Mexico	1.20%	1.80%	2.01%

Provided your browser window is set wide enough, you should be able to see that all the cells containing numbers have text that is aligned to the left.
-- LEFT is the default horizontal alignment for <td> cells.
-- CENTER is the default horizontal alignment for <th> cells.
Table 8 also shows the default vertical alignment of MIDDLE for the <td> and <th> cells.

The align attribute is used in the opening <td> and <th> tags to set the horizontal alignment of the data(text, images, etc.) in the cell.
The values for the align attribute are "LEFT", "CENTER", and "RIGHT".
The valign ("Vertical Alignment") attribute is used in the opening <td> and <th> tags to set the vertical alignment of the data in the cell.
The values for the valign attribute are "TOP", "MIDDLE", or "BOTTOM".

Here's an example:

Table 9
TOP	BOTTOM	MIDDLE
Left	Right	Center
left/bottom	right/top	center/middle

Table 9 Code

<table border=2 bgcolor=gray 

	width="100%" height=190>

<caption>Table 9</caption>

  <tr>

    <td align=LEFT>

	Left</td>

    <td align=RIGHT>

	Right</td>

    <td align=CENTER>

	Center</td>

  </tr>

  <tr>

    <th valign=TOP>TOP</th>

    <th valign=BOTTOM>BOTTOM</th>

    <th valign=MIDDLE>MIDDLE</th>

  </tr>

  <tr>

    <td align=LEFT valign=BOTTOM>

	left/bottom</td>

    <td align=RIGHT valign=TOP>

	right/top</td>

    <td align=CENTER valign=MIDDLE>

	center/middle</td>

  </tr>

  </table>

I didn't show the code for Table 8 ("Growth Table" above): it is exactly the same as the Table 7 (previous page), except for the opening <table> tag. In that tag I took out the cellpadding attribute and added two new attributes: {width="98%"} and {height=250}.
Here are the excerpts of code:

Table 7:

<table border=2 bgcolor=gray cellpadding=5> . . . </table>
Table 8:

<table border=2 bgcolor=gray width="98%" height=250> . . . </table>

The width and height attributes can be used in the <table> , <tr> <td> , & <th> tags.
Width and height can be specified in pixels {height=35} or in a percentage of the space available {height="80%"}.
Particularly useful is setting a table width to "100%" (as the table which forms the layout of this page.)
If a width is not specified, the cells will be only the size necessary to contain the cell data.
Column and row width and height will by default be determined by the largest cell in a column or row. This is shown in the following table.

Table 10
small	BIGGER	small	small
BIG BIG	small	small	small
small	BIGBIGGEST	small	small

Table 10 Code

<table border=2 bgcolor=gray width=30>

<caption>Table 10</caption>

  <tr>

    <th>small</th>

    <th>BIGGER</th>

    <th>small</th>

    <th>small</th>

  </tr>

  <tr>

    <th>BIG<br> BIG</th>

    <td>small</td>

    <td>small</td>

    <td>small</td>

  </tr>

  <tr>

    <td>small</td>

    <th>BIGBIGGEST</th>

    <td>small</td>

    <td>small</td>

  </tr>

  </table>

Table 9 shows how the largest element of a row or column determines the size for the other elements in a table with no width or height attributes.
For example, cell 1 of row 2 ("BIG<br>BIG") sets the height for the rest of the row.
Note that even though the width of the table is set to 30 pixels, the table is obviously larger than that, since the size of the elements will override size limitations set in the width or height attributes.

You may have noticed that I used another table attribute for Table 7 (previous page): cellpadding. In fact, I could have used the cellpadding attribute to achieve the same effect with the "Growth Projections" table ("Table 8") as setting the width and height. Cellpadding creates a "padding" around each of the table elements (like text), horzontally and vertically.

Here's the "Growth Table" with no cell padding: Here's the "Growth Table" with a cell padding of '5' :

Default Cell Padding
GROWTH PROJECTIONS

/ June July Aug.

U.S.A. 0.20% 0.45% 0.80%

Mexico 1.20% 1.80% 2.01%

Cell Padding ='5'
GROWTH PROJECTIONS

/ June July Aug.

U.S.A. 0.20% 0.45% 0.80%

Mexico 1.20% 1.80% 2.01%

Code:

<table border=2 bgcolor=gray> . . . </table>
Code:

<table border=2 bgcolor=gray cellpadding=5> . . . </table>

See how the cellpadding attribute makes the table feel less crowded and claustrophobic?
In this case you may want a compressed table, but trust me, in general a little padding helps make a table more appealing.

cellpadding is a <table> tag attribute.
The number used indicates "number of pixels."
Keep in mind that the padding will be around all four edges, even if your cell object is aligned TOP, BOTTOM, RIGHT, or LEFT...


Copyright© 1998. Liberty Miller . All rights reserved. This material may not be reproduced without the written permission of the author.
Last Modified 12/04/98		Page 5-6

6 : Cell Alignment & Spacing

Page 5-6