As mentioned before, the <td> and <th> tags (for table data and table headers, respectively), are equivalent except that table headers are automatically emphasized or boldface in most browsers. The discussion that follows lists only the <td> tag, but everything said also applies to <th>.

<td width=size align=alignment valign=vertical_alignment nowrap bgcolor=color>

width indicates to the browser how much of the available display area should be taken up by this cell. The size can either be a number, which is interpreted as a fixed number of screen dots (pixels) or as a percentage, which is calculated depending on the width of the entire row of the table (and recalculated if that changes). As with the width setting on <table> tags, you will probably want to use a percentage rather than an absolute pixel number, unless the cell contains only an image of known width.

If you do not specify width, the browser will make the cell as narrow as possible while still fitting in all of the cell's contents.

align has nothing to do with aligning the cell within the table, but rather controls how the contents of the cell are arranged within the cell's boundaries. If you say align="left" then whatever is within this cell will butt up against the cell's left edge. Perhaps the cell is just barely big enough to display its contents, but if there is any extra space left over, that space would all go on the right. Using align="right" has the opposite effect, of course. align="center" divides any extra space evenly between the right and left sides of the cell.

valign works just like align except that the choices are "top", "middle", and "bottom". This attribute is very useful when you have columns where the cells are of different heights, but you want the top or center of each cell to line up with its left and right neighbors. To make that happen, try using valign="top" or valign="middle" for both cells.

nowrap is an attribute that has no associated number or other parameter. If it is specified, you are requesting the browser to make every reasonable effort not to introduce line breaks in the cell, even if that means it has to add a horizontal scrollbar at the bottom of the browser window because the page will be too wide. This option is extremely useful for things that just should never be wrapped, such as a date (as in "1999/07/15") or a long URL. Use it with caution, though, because if you force the page to be wide, this affects the entire page and not just the area around the table. That can be very annoying to the user, because he or she has to constantly scroll left and right to read regular text elsewhere on the page.

bgcolor specifies the background color of the cell. This only works in newer browsers, so use with care.

You can also use the align and valign attributes on the table row <tr> tag. This sets the alignment of all of the cells in that row. If you set these for both the row and the cell, the cell wins. If you have a table with many columns that are all the same alignment and one or two that are different, set the most common alignment in the <tr> tag and override it as needed in the <td> or <th> tags.

Here is an advanced version of our first table, adding more content and taking advantage of these new attributes:

The HTML code to create this table looks like this:

<table width="50%" cellspacing=2 cellpadding=1 border=5 align="center">
  <tr align="center" valign="top">
    <td width="25%">one
    <br>another one</td>
    <td width="25%" bgcolor="yellow">two</td>
    <td width="50%" align="left">item<br>number<br>three</td>
  </tr>
  <tr align="center" valign="middle">
    <td align="right">four<br>more<br>years</td>
    <td valign="bottom">five</td>
    <td nowrap align="center">six ways from Sunday</td>
    </tr>
</table>

Notice how I did not specify the width of the cells in the second row. By definition, since it's a table, they are the same width as the ones above.