Tell a Friend About Our Cool Software
Chapter 4: Working With Table Cells and Columns
Each row in an HTML table contains one or more cells, with each cell defined by a <td> tag. This is important--each row has its own cells defined separately from other rows, which means that there is no such thing as a "column" in an HTML table. In most tables the cells do in fact fall into nice neat vertical columns, but they do not have to. There is no "column" tag that you can use to affect the appearance of an entire column in a table. Rather, you must work with the <td> tags within each row.
Within a row tag <tr>, you will place one or more <td> tags to define the row's cells in left-to-right order. The cell's content is placed within the <td> tag. For now I will limit discussion to tables in which each row has the same number of cells. The <td> tag supports a variety of attributes that control how it and its contents are displayed. These are described in Table 4-3.
The height, width, and bgcolor attributes of
the <td> tag are not supported in XHTML and are deprecated in HTML
4.01. You should use styles to control cell size and background color in
tables when you are authoring to these standards.
Table 4-3. Attributes of the <td> tag.
| Attribute | Values | Description |
| align | right, left, center,
justify |
Determines the horizontal
alignment of text or images with the cell. The default is left. |
| bgcolor | a color name, and
rgb() value, or a hex value (#xxxxxx) |
Specifies the background color of
the row |
| Attribute | Values | Description |
| height | A number | The height of the cell in pixels |
| valign | top, middle, bottom | Determines the vertical alignment
of content in cells of the row. The default is middle. |
| width | A number | The width of the cell in pixels or
as a percent of the table width. |
You'll note that the <td> tag shares the align, bgcolor, and valign attributes with the <tr> tag. Settings for an individual cell override settings for the row it's in, just like settings for an individual row override settings for the table as a whole.
Can you use the height attribute to create a table that has cells with
different heights in the same row? No--the row's height will be set to the
largest height value that is specified for any of the cells in the row. This
means that you can set the height attribute for only one cell in the row to
change the entire row's height. Thus, the following two <tr> tags result in
the same row height, 50 pixels (I have omitted the cell content for this
example):
<tr><td height="50"></td><td
height="25"></td><td height="15"></td></tr>
<tr><td height="50"></td><td></td><td></td></tr>
You should note that the height setting specifies the minimum height of a cell. If the cell's contents require more space to display, the cell's height (and also the entire row's height) will increase to fit it.
CoffeeCup Software started in a real Coffee House 1996. Our first program was the HTML Editor. Over the last 10 years we have created a lot more Web Design & Flash Software. Our philosophy has always been to create software and services so you can make better Websites. We are dedicated to helping you by offering extraordinary support so we can succeed together. Consider us a partner and a friend, because we really are about Fresh Software and Warm People.
