Tables 2: Alignment, Color, and More

Note: Many of these effects can now be achieved using Cascading Style Sheets.

Before we get to the other stuff, let's take a look at how to define the width of your table to help you get the table the size you would like it to be. To do this, add the width=" " command to your <table> tag. Place the number of pixels wide you would like the table to be or the percentage of the horizontal width you'd like the table to be between the quote marks (i.e. type 600 for 600 pixels and 60% for 60 percent). So, if you wanted a table 600 pixels long, you would do this:

<table width="600" border="2">
<tr>
<td>
This table really long!
</td>
</tr>
</table>

This table has just a little text, but stretches all the way to 600 pixels, because we told it to!

This table really long!

In the last section we left off wondering how to align the contents of your table cells. What if you wanted your contents to be aligned to the center or to the right? To do this, you add the align=" " command to your <td> tag. You can use the command three ways:

1. align="left"
   Aligns your cell contents to the left.
2. align="center"
   Aligns your contents to the center.
3. align="right"
   Aligns your cell contents to the right.

Let's take a look at a table using these commands:

<table width="450" border="2" cellspacing="7" cellpadding="7">
<tr>
<td align="center">
I'm in the center!
</td>
<td align="right">
I'm aligned to the right!
</td>
</tr>
</table>

The first cell will have the text in the center, while the second cell has text aligned to the right.

I'm in the center!

I'm aligned to the right!

You can also use another alignment command for your cells, the vertical alignment command. It looks like this: valign=" ". Here's what it can do:

1. valign="top"
   Aligns contents to the top of the cell.
2. valign="middle"
   Aligns contents halfway between the top and bottom of the cell.
3. valign="bottom"
   Aligns contents to the bottom of the cell.

Here is a sample table using the vertical alignment commands:

<table width="550" border="2" cellspacing="7" cellpadding="0">
<tr>
<td align="center" valign="top">
I'm on top! <br />
So i start on top!
</td>
<td align="center" valign="middle">
I'm in the middle
</td>
<td align="center" valign="bottom">
I start at the bottom.
</td>
</tr>
</table>

The table looks like this:

I'm aligned to the top! So I start on top!

I'm in the middle.

I start at the bottom.

The vertical alignment commands come in useful if your table cells don't have the same number of lines inside each cell. Since I had 2 lines of text in the first cell while the others had one line, the vertical alignment made a difference in how the table looked.

So, how about stretching out the rows and columns? Well, now you get two more commands for the <td> tag, rowspan and colspan.

1. rowspan=" "
   Defines the number of vertical table rows the cell should take up. Place your number inside the quote marks.
2. colspan=" "
   Defines the number of horizontal columns the cell should take up.

Suppose you wanted your table to do this:

Nice guy, isn't he?
Met him at the store.

To make it happen, you use the rowspan command in your table cell containing the image. You set rowpan="2" and the cell with the picture takes up 2 table rows. Here is the code:

<table border="2">
<tr>
<td align="center">
Nice guy, isn't he?
</td>
<td rowspan="2" align="center">
<img src="../images/scare.jpg" />
</td>
</tr>
<tr>
<td align="center">
Met him at the store.
</td>
</tr>
</table>

Now, suppose you want a table like this:

Star Wars Folks
Luke Skywalker	Princess Leia	Han Solo

This time you use the colspan command and set colspan="3". You get the first cell to stretch across the other three on the second row below it. Here is the table code for this:

<table border="2" cellpadding="5">
<tr>
<td colspan="3" align="center">
<b>Star Wars Folks</b>
</tr>
</td>
<tr>
<td align="center">
Luke Skywalker
</td>
<td align="center">
Princess Leia
</td>
<td align="center">
Han Solo
</td>
</tr>
</table>

Well, now here's the part everyone has been waiting for... changing the background color of a table cell! You can change the background color of the entire table, each row, or each cell. To change the background color of the table, add the bgcolor=" " command, just like in the body tag:

<table border="5" bgcolor="red">
<tr>
<td>
Red Rules!
</td>
</tr>
</table>

Now the whole table has a red background:

Red Rules!

To change the color of each cell, add the bgcolor command to each <td> tag you want to change:

<table width="75" border="2">
<tr>
<td bgcolor="red">
red
</td>
<td bgcolor="blue">
blue
</td>
</tr>
</table>

Now we have two different colored cells:

red

blue

And finally, to change the color of a table row, add the bgcolor command to the <tr> tag:

<table width="200" border="2">
<tr bgcolor="red">
<td> red </td>
<td> red again... </td>
</tr>
<tr bgcolor="blue">
<td> blue </td>
<td> blue again! </td>
</tr>
</table>

And now the rows are different colors:

red	red again...
blue	blue again!

Pretty neat stuff, isn't it? You can design calendars, price lists, or whatever comes to mind using tables.

So, let's move on to the next section, Tables Within a Table.