Cell Alignment and Sizing

In the last lesson we learned how to align and size the whole table. This lesson will show you how to align and size individual cells. First, let's get the table we finished with from the last lesson.

<table border="1" bordercolor="red" width="300px" height="300px">
<tr>
<td>Cell 1
</td>
<td>Cell 2
</td>
</tr>
<tr>
<td>Cell 3
</td>
<td>Cell 4
</td>
</tr>
</table>

Notice how the cells are automatically divided equally among the table width. You can change this by adding a simple width to a cell. You can use percentages or pixels just the same as when sizing the whole table. I will use pixels this time, and set aside 200 pixels for Cell 1.

<table border="1" bordercolor="red" width="300px" height="300px">
<tr>
<td width="200px">Cell 1
</td>
<td>Cell 2
</td>
</tr>
<tr>
<td>Cell 3
</td>
<td>Cell 4
</td>
</tr>
</table>

See how the whole first column falls in line with Cell 1? Every cell in a column always has the same width, and every cell in a row always has the same height. Let's put a height to one column as well.

<table border="1" bordercolor="red" width="300px" height="300px">
<tr>
<td width="200px">Cell 1
</td>
<td>Cell 2
</td>
</tr>
<tr>
<td>Cell 3
</td>
<td height="100px">Cell 4
</td>
</tr>
</table>

The second row is 100 pixels tall, and now the first row is 200 pixels tall, to add up to 300 pixels. You only have to change one cell to change the whole table, so be careful when adding height and width.

Aligning a cell is less complicated, as it only affects the cell where the code is added. This works much the same way as aligning a table or picture, except aligning a cell aligns everything inside of the cell, not the cell itself. You can align the cell left, right, and center like everything else. I have done all three in the following example, but I left Cell 1 with no alignment to show that the default alignment is "left".

<table border="1" bordercolor="red" width="300px" height="300px">
<tr>
<td width="200px">Cell 1
</td>
<td align="left">Cell 2
</td>
</tr>
<tr>
<td align="center">Cell 3
</td>
<td height="100px" align="right">Cell 4
</td>
</tr>
</table>

Finally the last attribute of cells I will discuss in this tutorial is a new one, "valign", or "vertical alignment". This is mainly used for tables with a lot of content in one cell, but not very much in another. The easiest way to demonstrate this is just to look at an example.

To make the text "Cell 2" go to the top of the page, we would use the valign attribute. There are three values for this attribute: top, bottom, and center. We will use the "top" value for this example.

Much better isn't it? Here's the code:

<table width="300px" border="1">
<tr>
<td width="60px">This is way too much to fit into this cell with such a tiny width. This makes the whole table really tall. The default vertical alignment is "center", so that makes the text in the cell to the right seem to float in the center of the cell.</td>
<td align="center" valign="top">Cell 2</td>
</tr>
</table>

That's all for this lesson. The next lesson will concentrate on making your table look more colorful, such as adding background colors, background images, and making individual cells have different colored borders.