Working with HTML Tables

by Irene Smith

If you've been looking at other people's HTML coding (and there's no better way to learn how to create web pages than to examine existing HTML code!) you have probably notice that most web designers make heavy use of the table tag. Tables can be used for more than displaying actual tables of text. HTML tables provide the easiest way to apply some control over a page's layout. In fact, it's the only layout control HTML provides unless you want to get involved with dynamic html (DHTML) and then, of course, you have to worry about browser compatibility. It is a fairly safe bet that 90% or more of your visitors are using a browser that can properly handle tables. There are some minor differences, but for the most part, an HTML page that uses tables for layout will be seen properly by most of your visitors.

Take a look at the HTML codes for a simple table:

<table>
   <tr>
      <td>This is row one, cell one.</td>
      <td>This is row one, cell two.</td>
   </tr>
   <tr>
      <td>This is row two, cell one.</td>
      <td>This is row two, cell two.</td>
   </tr>
</table>

The HTML above produce this table:

Most browsers will display the table above without any border, making it look like four separate lines of text. Now we'll turn on the borders so you can see where the table outline falls. All we need to do is add border="1" to the table tag like this:

<table border="1">

If all the rest of the lines remain the same, we'll see something like this:

I read in someone else's table tutorial that you can treat the cells in a table as though they were HTML pages within your larger page, and this is quite true. I wish I could remember where I read it so I could give the author credit, but I can't. It might have been the Coriolis Group's book Netscape and HTML Explorer but I'm not quite sure. Anyway, anything you can place within the rest of your web page can be placed within a table. That includes paragraph tags, image tags and even other tables! You need to be a little bit careful with complexity though, because some web browsers will render the entire table before showing any text. You can help avoid this problem by making sure to use height and width parameters for all of your image tags. Another way to speed things up is to create several smaller tables one right after the other instead of a single big table. That way as each table is rendered, it will become visible and give readers something to look at while the rest of the page is rendered.

Now let's take a look at a slightly more complicated table. This time I'm going to include all of the most commonly used options for the table tag, plus a couple that are becoming more common as more and more people are using at least version 3.0 browsers.

<table width="95%" border="1" cellspacing="5" cellpadding="5" background="images/backgnd.jpg">
   <TR>
      <TD bgcolor="#B6A160">
         <font color="white">R1C1</font>
      </TD>
      <TD bgcolor="#B6A160">
         <font color="white">R1C2</font>
      </TD>
      <TD bgcolor="#B6A160">
         <font color="white">R1C3</font>
      </TD>
      <TD bgcolor="#B6A160">
         <font color="white">R1C4</font>
      </TD>
   </TR>
   <TR>
      <TD >
         <font color="#000000">R2C1</font>
      </TD>
      <TD >
         <font color="#000000">R2C2</font>
      </TD>
      <TD >
         <font color="#000000">R2C3</font>
      </TD>
      <TD >
         <font color="#000000">R2C4</font>
      </TD>
   </TR>
   <TR>
      <TD >
         <font color="#000000">R3C1</font>
      </TD>
      <TD >
         <font color="#000000">R3C2</font>
      </TD>
      <TD >
         <font color="#000000">R3C3</font>
      </TD>
      <TD >
         <font color="#000000">R3C4</font>
      </TD>
   </TR>
   <TR>
      <TD >
         <font color="#000000">R4C1</font>
      </TD>
      <TD >
         <font color="#000000">R4C2</font>
      </TD>
      <TD >
         <font color="#000000">R4C3</font>
      </TD>
      <TD >
         <font color="#000000">R4C4</font>
      </TD>
   </TR>
</TABLE>

Let's see what that table looks like before we discuss it.

What have we added to the table tag to get this effect? First of all, we have defined the width of this table to be 95% of the available width. If this table were at the page level rather than inside an existing table, it would fill 95% of the entire page width. Instead, it fills 95% of the smaller column it is inside. We could have specified a specific width in pixels if we wanted to. However, it is important to remember that an explicit pixel width will be ignore if there is a picture within the table that is wider than the width you specify!

Second, we have said that the table should have a border that is 1 pixel wide. We could have made it wider or defined it as 0 to remove the border entirely.

Notice the extra space around the outside of the cell border? That's created by the cellspacing parameter. Again, we could change the value to anything within reason, or to 0 to remove the extra cell spacing entirely. As far as I know, border and cellspacing default to 0 when there is no explicit value supplied, but to be sure, it doesn't hurt to specify values even when you want them to be 0.

The same goes for cellpadding, which supplies extra blank space around the contents of the cell. Cellpadding occurs around the contents but inside the border.

You can change the background color of an entire table, a single row or even a single cell, by adding a bgcolor parameter. You can't change the color of text this way, nor can you change link or visited link colors. It's a shame, but you'll have to keep your link and active link colors in mind when you are defining alternative background colors for your tables. You can, of course, change plain text to any color by using the font tag as I did in the sample. In addition to changing the background color, you can also use an image as the background of a table or cell. Simply add the background parameter in the same way you would add it to the BODY tag. For the example, I've used a speckled texture for the background of the table.

The final aspect of tables that I want to discuss in this tutorial is alignment. You can change the horizontal alignment or the vertical alignment and you can apply the change at one of several levels. The results are slightly different though, so let's take a look.

<TABLE  width="50%" border="1" align="right">
	<TR align="center" valign="top">
		<TD valign="bottom">
			R1C1
		</TD>
		<TD>
			R1C2<br>abc
		</TD>
		<TD>
			R1C3
		</TD>
	</TR>
	<TR>
		<TD valign="top" align="left">
			R2C1<br>abc
		</TD>
		<TD valign="middle" align="center">
			R2C2
		</TD>
		<TD valign="bottom" align="right">
			R1C3
		</TD>
	</TR>
</TABLE>

The above tags create a table that looks like this:

Notice first that I didn't add a valign parameter to the table tag. I've tried different setting for this tag, and it doesn't seem to make a difference! Did you notice that the entire table is aligned to the right side of the page? The table tag has the parameter align="right" thus moving the entire table to the right. Also notice how the text neatly wraps around the left? In other words, the alignment of the table effectively leaves room on the right for text to flow! The row tag for the first row sets horizontal alignment to centered and you will see that all of the cells are, indeed, centered. The vertical alignment for the entire row has been set to "top", but you'll notice that the first cell is aligned to the bottom of the other two by virtue of the align="bottom" parameter added to that cell's td tag. In other words, cell alignment over-rides row alignment. Finally, in the second row, I've applied no alignment to the row, but each cell has a different horizontal and vertical alignment.

You can use various combinations of alignment to create quite complex tables. Of course, as always, the best way to learn is to experiment. Look at other people's work as you surf the 'net and try copying a page or two and replacing the other person's text and graphics with your own to get a handle on how this concept works. By the way, I looked at this example page in three different browsers: Internet Explorer 4.0, Netscape Communicator 4.5 and NeoPlanet 2.0 and, with some minor differences, they all look pretty much the same. I can't guarantee how this looks in older browsers, simply because I no longer have any of them on my system. IE 3 or earlier won't work on a system that has IE 4+ and I just haven't had the time to download an older copy of Netscape. Sorry... if you have one of those older programs or perhaps Opera or some other older browser, let me know if there are differences and I'll mention them here.

If you have any suggestions for further tutorials, please send me e-mail at: computersmith@bitsmart.com and let me know what you are looking for.