Tables and Colors

Colors and Tables

In the last lesson, we got the basics of working with tables down. This lesson focuses on the advanced use of tables both from a table formatting standpoint as well as from a document layout standpoint. To begin, it will help you a great deal if you begin to think of each table cell as its own "mini-window" that has separate properties from anything else on the page. You've already seen how to create cells that are different sizes with different alignments. Now let's push the envelope a bit further and explore using tables in a wider variety of ways.

Changing Colors Inside a Table

Once we begin to think of the table and its cells as separate windows, it makes sense that each of these things should be able to specify a different color scheme. Let's do table color attributes first, then we'll explore cell properties. Here's the table we'll manipulate for this exercise:

<table border="1">
<tr>
<td>Menu</td>
<td>Description</td>
</tr>
<tr>
<td>News</td>
<td> </td>
</tr>
<tr>
<td>MSNBC</td>
<td>Microsoft/NBC News Effort</td>
</tr>
<tr>
<td>CNN</td>
<td>Cable News Network</td>
</tr>
<tr>
<td>Sports</td>
<td> </td>
</tr>
<tr>
<td>ESPN</td>
<td>All sports, all the time</td>
</tr>
<tr>
<td>CNN/SI</td>
<td>CNN and Sports Illustrated</td>
</tr>
</table>

Here's how it looks:

Menu	Description
News
MSNBC	Microsoft/NBC News Effort
CNN	Cable News Network
Sports
ESPN	All sports, all the time
CNN/SI	CNN and Sports Illustrated

Notice, the only attribute we used was the border attribute of the <table> element (we set it equal to "1"). Also, notice that we made   the content of our empty cells. You'll have to do that if you want true blank cells to appear in your tables. Without the non-breaking spaces, some browsers will not paint the border around cells with no content.

Let's take care of some formatting first by making the first row contain header cells as well as our sub-headings of News and Sports:

<table border="1">
<tr>
<th>Menu</th>
<th>Description</th>
</tr>
<tr>
<th>News</th>
<th> </th>
</tr>
<tr>
<td>MSNBC</td>
<td>Microsoft/NBC News Effort</td>
</tr>
<tr>
<td>CNN</td>
<td>Cable News Network</td>
</tr>
<tr>
<th>Sports</th>
<th> </th>
</tr>
<tr>
<td>ESPN</td>
<td>All sports, all the time</td>
</tr>
<tr>
<td>CNN/SI</td>
<td>CNN and Sports Illustrated</td>
</tr>
</table>

Menu	Description
News
MSNBC	Microsoft/NBC News Effort
CNN	Cable News Network
Sports
ESPN	All sports, all the time
CNN/SI	CNN and Sports Illustrated

That's marginally better, but we should take care of some alignment and sizing issues. Let's assign 75% to the table's width. Then we'll assign 25% to column one's width and set the second column's width to 75%. Also, set the align attribute for the first column to left by setting it for the first cell in each row (this makes our headers align on the left rather than centered):

<table border="1" width="75%">
<tr>
<th width="25%" align="left">Menu</th>
<th width="75%">Description</th>
</tr>
<tr>
<th width="25%" align="left">News</th>
<th width="75%"> </th>
</tr>
<tr>
<td width="25%" align="left">MSNBC</td>
<td width="75%">Microsoft/NBC News Effort</td>
</tr>
<tr>
<td width="25%" align="left">CNN</td>
<td width="75%">Cable News Network</td>
</tr>
<tr>
<th width="25%" align="left">Sports</th>
<th width="75%"> </th>
</tr>
<tr>
<td width="25%" align="left">ESPN</td>
<td width="75%">All sports, all the time</td>
</tr>
<tr>
<td width="25%" align="left">CNN/SI</td>
<td width="75%">CNN and Sports Illustrated</td>
</tr>
</table>

Menu	Description
News
MSNBC	Microsoft/NBC News Effort
CNN	Cable News Network
Sports
ESPN	All sports, all the time
CNN/SI	CNN and Sports Illustrated

Since table cells can contain any HTML, you can create as many hyperlinks as you'd like inside a table. Let's make the names of each entry hyperlinks and target a new window:

<table border="1" width="75%">
<tr>
<th width="25%" align="left">Menu</th>
<th width="75%">Description</th>
</tr>
<tr>
<th width="25%" align="left">News</th>
<th width="75%"> </th>
</tr>
<tr>
<td width="25%" align="left"><a href="http://www.msnbc.com" target="_blank">MSNBC</a></td>
<td width="75%">Microsoft/NBC News Effort</td>
</tr>
<tr>
<td width="25%" align="left"><a href="http://www.cnn.com" target="_blank">CNN</a></td>
<td width="75%">Cable News Network</td>
</tr>
<tr>
<th width="25%" align="left">Sports</th>
<th width="75%"> </th>
</tr>
<tr>
<td width="25%" align="left"><a href="http://www.espn.com" target="_blank">ESPN</a></td>
<td width="75%">All sports, all the time</td>
</tr>
<tr>
<td width="25%" align="left"><a href="http://www.cnnsi.com" target="_blank">CNN/SI</a></td>
<td width="75%">CNN and Sports Illustrated</td>
</tr>
</table>

Menu	Description
News
MSNBC	Microsoft/NBC News Effort
CNN	Cable News Network
Sports
ESPN	All sports, all the time
CNN/SI	CNN and Sports Illustrated

Now we're ready to play with the colors. Let's set of our header rows by using the bgcolor attribute:

<table border="1" width="75%">
<tr>
<th width="25%" align="left" bgcolor="#FFCCCC">Menu</th>
<th width="75%" bgcolor="#FFCCCC">Description</th>
</tr>
<tr>
<th width="25%" align="left" bgcolor="#FFCCCC">News</th>
<th width="75%"> </th>
</tr>
<tr>
<td width="25%" align="left"><a href="http://www.msnbc.com" target="_blank">MSNBC</a></td>
<td width="75%">Microsoft/NBC News Effort</td>
</tr>
<tr>
<td width="25%" align="left"><a href="http://www.cnn.com" target="_blank">CNN</a></td>
<td width="75%">Cable News Network</td>
</tr>
<tr>
<th width="25%" align="left" bgcolor="#FFCCCC">Sports</th>
<th width="75%"> </th>
</tr>
<tr>
<td width="25%" align="left"><a href="http://www.espn.com" target="_blank">ESPN</a></td>
<td width="75%">All sports, all the time</td>
</tr>
<tr>
<td width="25%" align="left"><a href="http://www.cnnsi.com" target="_blank">CNN/SI</a></td>
<td width="75%">CNN and Sports Illustrated</td>
</tr>
</table>

Menu	Description
News
MSNBC	Microsoft/NBC News Effort
CNN	Cable News Network
Sports
ESPN	All sports, all the time
CNN/SI	CNN and Sports Illustrated

Now, let's choose a different color for the background of the data cells, including the empty cells:

<table border="1" width="75%">
<tr>
<th width="25%" align="left" bgcolor="#FFCCCC">Menu</th>
<th width="75%" bgcolor="#FFCCCC">Description</th>
</tr>
<tr>
<th width="25%" align="left" bgcolor="#FFCCCC">News</th>
<th width="75%" bgcolor="#FFFFCC"> </th>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#FFFFCC"><a href="http://www.msnbc.com" target="_blank">MSNBC</a></td>
<td width="75%" bgcolor="#FFFFCC">Microsoft/NBC News Effort</td>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#FFFFCC"><a href="http://www.cnn.com" target="_blank">CNN</a></td>
<td width="75%" bgcolor="#FFFFCC">Cable News Network</td>
</tr>
<tr>
<th width="25%" align="left" bgcolor="#FFCCCC">Sports</th>
<th width="75%" bgcolor="#FFFFCC"> </th>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#FFFFCC"><a href="http://www.espn.com" target="_blank">ESPN</a></td>
<td width="75%" bgcolor="#FFFFCC">All sports, all the time</td>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#FFFFCC"><a href="http://www.cnnsi.com" target="_blank">CNN/SI</a></td>
<td width="75%" bgcolor="#FFFFCC">CNN and Sports Illustrated</td>
</tr>
</table>

Menu	Description
News
MSNBC	Microsoft/NBC News Effort
CNN	Cable News Network
Sports
ESPN	All sports, all the time
CNN/SI	CNN and Sports Illustrated

We're getting there! Let's see if we can make the table look better by adjusting the cellspacing and cellpadding attributes for the table:

<table border="1" width="75%" cellspacing="0" cellpadding="5">
<tr>
<th width="25%" align="left" bgcolor="#FFCCCC">Menu</th>
<th width="75%" bgcolor="#FFCCCC">Description</th>
</tr>
<tr>
<th width="25%" align="left" bgcolor="#FFCCCC">News</th>
<th width="75%" bgcolor="#FFFFCC"> </th>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#FFFFCC"><a href="http://www.msnbc.com" target="_blank">MSNBC</a></td>
<td width="75%" bgcolor="#FFFFCC">Microsoft/NBC News Effort</td>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#FFFFCC"><a href="http://www.cnn.com" target="_blank">CNN</a></td>
<td width="75%" bgcolor="#FFFFCC">Cable News Network</td>
</tr>
<tr>
<th width="25%" align="left" bgcolor="#FFCCCC">Sports</th>
<th width="75%" bgcolor="#FFFFCC"> </th>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#FFFFCC"><a href="http://www.espn.com" target="_blank">ESPN</a></td>
<td width="75%" bgcolor="#FFFFCC">All sports, all the time</td>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#FFFFCC"><a href="http://www.cnnsi.com" target="_blank">CNN/SI</a></td>
<td width="75%" bgcolor="#FFFFCC">CNN and Sports Illustrated</td>
</tr>
</table>

Menu	Description
News
MSNBC	Microsoft/NBC News Effort
CNN	Cable News Network
Sports
ESPN	All sports, all the time
CNN/SI	CNN and Sports Illustrated

OK - that looks a little better! At this point, it probably makes sense to align the description cell to the left and change the bgcolor attribute of our first row to set it off from the rest of the table. Finally, let's turn the borders off for the entire table by setting the border attribute equal to "0" and see how it looks:

Menu	Description
News
MSNBC	Microsoft/NBC News Effort
CNN	Cable News Network
Sports
ESPN	All sports, all the time
CNN/SI	CNN and Sports Illustrated

Wow! The overall effect is that a table isn't even present. Rather, it looks like a menu system! Just to prove a point, let's see if we can spice this up just a little more by adding images to each of our menu selections and then fixing some alignment problems:

<table border="0" width="75%" cellspacing="0" cellpadding="5">
<tr>
<th width="25%" align="left" bgcolor="#CCFFCC">Menu</th>
<th width="75%" bgcolor="#CCFFCC" align="left">Description</th>
</tr>
<tr>
<th width="25%" align="left" bgcolor="#FFCCCC" valign="top">News</th>
<th width="75%" bgcolor="#FFFFCC" valign="top"> </th>
</tr>
<tr>
<td width="25%" align="center" bgcolor="#FFFFCC" valign="top"><img border="0" src="http://www.bright-moments.com/webdeveloper/images/msnbc.gif" width="100" height="62"><a href="http://www.msnbc.com" target="_blank"><br>
MSNBC</a></td>
<td width="75%" bgcolor="#FFFFCC" valign="top">Microsoft/NBC News Effort</td>
</tr>
<tr>
<td width="25%" align="center" bgcolor="#FFFFCC" valign="top"><img border="0" src="http://www.bright-moments.com/webdeveloper/images/cnn.gif" width="100" height="24"><a href="http://www.cnn.com" target="_blank"><br>
CNN</a></td>
<td width="75%" bgcolor="#FFFFCC" valign="top">Cable News Network</td>
</tr>
<tr>
<th width="25%" align="center" bgcolor="#FFCCCC" valign="top">Sports</th>
<th width="75%" bgcolor="#FFFFCC" valign="top"> </th>
</tr>
<tr>
<td width="25%" align="center" bgcolor="#FFFFCC" valign="top"><img border="0" src="http://www.bright-moments.com/webdeveloper/images/espn.gif" width="100" height="34"><a href="http://www.espn.com" target="_blank"><br>
ESPN</a></td>
<td width="75%" bgcolor="#FFFFCC" valign="top">All sports, all the time</td>
</tr>
<tr>
<td width="25%" align="center" bgcolor="#FFFFCC" valign="top"><img border="0" src="http://www.bright-moments.com/webdeveloper/images/cnnsi.gif" width="100" height="31"><a href="http://www.cnnsi.com" target="_blank"><br>
CNN/SI</a></td>
<td width="75%" bgcolor="#FFFFCC" valign="top">CNN and Sports Illustrated</td>
</tr>
</table>

Menu	Description
News
MSNBC	Microsoft/NBC News Effort
CNN	Cable News Network
Sports
ESPN	All sports, all the time
CNN/SI	CNN and Sports Illustrated

Let's see if we can make one more adjustment to the appearance. Let's color the blank cells the same as our first row. Then color all of the news items one color and all of the sports items another color. (This is left as an exercise for the student!)

Menu	Description
News
MSNBC	Microsoft/NBC News Effort
CNN	Cable News Network
Sports
ESPN	All sports, all the time
CNN/SI	CNN and Sports Illustrated

Almost looks like a tabbed dialog, doesn't it?

Well, we covered many coloring issues here but there are a few other. Most notably the <table> element has attributes that allow you to change the colors of the border and the <td> and <th> elements also have attributes that allow you to change the color of the border. Feel free to experiment with tables and colors and you'll be surprised just how much you can accomplish!