Tables are not only great for displaying groups of information, but are also excellent for page formatting. Tables work similar to lists - one tag designates the beginning of the table and other tags designate different parts of that table.

The tag to start a table is, you guessed it, <TABLE>. Once the browser reads the <TABLE> tag, it looks for information to display within the table in rows and columns. Browsers display items row by row, starting at the top and left of the table.
The <TR> tag designates the beginning of a row, or table row. Once the browser knows to begin a row, it looks for what to display within individual cells of that row. The <TD>, or Table Data tag tells the browser to insert an individual cell within the row that was created with the <TR> tag. Everything that will be displayed within a cell will be contained within the <TD> and </TD> tags. If you have two <TD> tags in a <TR> tag, then that row will contain two cells. If you have three <TR> tags within a <TABLE> tag, the table will have three rows. The browser creates rows and cells from the upper left of the table to the lower right.

<TABLE>
  <TR>
    <TD>This is cell one.</TD>
    <TD>This is cell two.</TD>
  </TR>
</TABLE>

    would display

Doesn't really look like a table, but it is one - a very simple one. The <TR> and <TD> tags do not have to be closed, however newer browsers sometimes do not display tables correctly if they are not. I STRONGLY recommend closing all of the tags within tables. The only place that text is located is within a <TD> tag set. Also notice how I spaced the HTML code, indenting various elements. This is not required, but editing the table will be much easier if you can quickly tell where rows and cells begin and end. Besides, the browser will ignore the extra space in the HTML document.

You can also add header cells to your table by replacing the <TD> with the <TH> tag. These usually go in the first row and header cells are bolder and centered within the cell.

<TABLE>
<TR>
  <TH>Header one</TH>
  <TH>Header two</TH></TR>
<TR> 
  <TD>This is cell one.</TD>
  <TD>This is cell two.</TD></TR>
</TABLE> 

would display

Beginning to look a little more like a table, eh? Wonder what determines the width of each cell? Well, it is determined by the longest line of text within that column. Notice how each element is closed. <TH> and <TD> act exactly the same except for the way they are displayed. Table headers are bold and centered within the cell. You can also add table headers down the left (the first cell or <TD> in each row) or practically anywhere, but the top and/or left makes the most sense.

You can also add a caption to your table that becomes basically the 'title' of your table. The <CAPTION> tag should be the first tag after the opening <TABLE> tag. The caption can be aligned with the ALIGN attribute. ALIGN must equal one of the following values:
top - centered above the table. This is the default value.
bottom - centered below the table
left - aligned left at the top of the table. Not recognized by Netscape.
right - aligned right at the top of the table. Not recognized by Netscape.

There is no way to align either left or right at the bottom of a table. Be sure to close the caption tag, before entering any other tags.

<TABLE>
<CAPTION>I am the table's caption</CAPTION>
<TR>
  <TD><BR></TD>
  <TH>Column header one</TH>
  <TH>Column header two</TH></TR>
<TR> 
  <TH>Row header.
  <TD>This is cell one.</TD>
  <TD>This is cell two.</TD></TR>
</TABLE>

would display

Notice that I inserted an empty cell in the top left cell of the table by adding a <BR> tag within the first <TD> tag. It contains only a blank line. The number of cells in a row is determined by the number of either <TD> or <TH> tags within the <TR> and </TR> tags. All rows must have the same number of cells or you will get messed up tables. I inserted a <TH> tag in the second row to make a header along the left.

I am sure you are probably thinking that tables aren't supposed to look like that, they're supposed to have borders, right? Well, by default, tables don't have borders, but we can sure add them with the BORDER attribute in the <TABLE> tag. It's value is in pixels, let's try that same table with borders this time. The code is the same as above except the table tag looks like this -
<TABLE BORDER="4">

Now that looks more like a table! If you are using IE or Netscape version 4.6 or above, you can specify the color of the border with the BORDERCOLOR attribute. It's value is either a color name or an RGB value. You can also use the BORDERCOLORDARK and BORDERCOLORLIGHT attributes to assign colors to the dark and light portions of the table and cell borders. BORDERCOLORDARK and BORDERCOLORLIGHT used together will override the BORDERCOLOR attribute. You can quickly develop some ugly borders using these tags. Netscape ignores these tags (except the newest versions which recognize only BORDERCOLOR) and displays the border color as one complementary to the background color.

If you are using Internet Explorer, you can also choose which of the outside table borders you want to have displayed with the FRAME attribute of the <TABLE> tag. FRAME's value must be one of the following:
void - no external borders. This is the same as if no BORDER attribute is entered.
above - single border on top
below - single border on bottom
hsides - borders on both top and bottom
vsides - borders on both left and right
rhs - single border on right hand side
lhs - single border on left hand side
box - borders on all sides. This is the default
border - same as box

The FRAME attribute only affects the outside borders. To control which borders appear on individual cells within the table, use the RULES attribute. The value of RULES must be one of these:
none - no internal rules
rows - horizontal rules between each row
cols - vertical rules between each column
all - rules between each row and column (the default)

FRAME and RULES do not need to be specified if you want all of the borders displayed. Be sure to use the BORDER attribute or no borders will be displayed. Remember that Netscape will ignore the FRAME and RULES attributes.

<TABLE BORDER="4" BORDERCOLOR="red" FRAME="vsides" RULES="rows">
<CAPTION>I am the table's caption</CAPTION>
<TR>
  <TD><BR></TD>
  <TH>Column header one</TH>
  <TH>Column header two</TH></TR>
<TR> 
  <TH>Row header.
  <TD>This is cell one.</TD>
  <TD>This is cell two.</TD></TR>
</TABLE>

would display

You may want to have a cell that spans what would normally be two or more columns. When you get to the cell that you want to span extra columns enter the <TD> or <TH> tag normally but then enter the COLSPAN attribute to it. The value COLSPAN should be set equal to the number of columns you want that cell to span. Remember that the number of columns spanned by each row should be equal - if you have a <TD COLSPAN="2"> tag, then that cell will span two columns instead of one.

<TABLE BORDER="4">
<CAPTION>I am the table's caption</CAPTION>
<TR>
  <TD><BR></TD>
  <TH COLSPAN="2">Column header spanning two columns</TH>
  </TR>
<TR> 
  <TH>Row header.
  <TD>This is cell one.</TD>
  <TD>This is cell two.</TD></TR>
</TABLE>

would display

In the previous example, there are typically three cells (indicated by a <TD> or <TH>) in each row (the row spans three columns). The <TH COLSPAN="2"> tag makes that cell span two columns. So, the first row still spans a total of three columns. Each row covers the same number of columns, even though the number of cells (<TD> or <TH> tags) may not be equal.

You can also span cells across rows, meaning that a cell will be two rows deep. This is done similarly to spanning columns, but use the ROWSPAN attribute to the <TD> or <TH> tag instead. Keeping track of the number of columns in each row can become quite confusing when spanning columns and rows. It is sometimes helpful to sketch the table on scratch paper first. Here is an example of spanning rows.

<TABLE BORDER="4">
<CAPTION>I am the table's caption</CAPTION>
<TR>
  <TD><BR></TD>
  <TD ROWSPAN="2">Column spanning two rows</TD>
  <TH>Column header two</TH></TR>
<TR> 
  <TH>Row header.</TH>
  <TD>This is cell two.</TD></TR>
</TABLE>

It is easy to insert the cell that spans the extra rows, however, ensuring that the following rows span the correct number of columns can be difficult. Notice that the second <TR> tag above only contains two tags. Because the second cell in the first row spans the second cell in the second row, that cell does not need to be specified. When spanning multiple rows, you must remember how many cells need to be specified or you will get erratic results. In the table above, notice that the spanning cell's contents are centered vertically.

Earlier, I said that a column's width is determined by the length of the text in the longest cell. This is true until the table is as wide as the browser window, at which point the text within the widest cells begin to wrap. You can, however, manually control the width and the height of both the entire table and individual cells. To do this, add the WIDTH and/or HEIGHT attributes to the <TABLE> tag or any <TD> or <TH> tag, depending on what element you want to adjust. The values of width and height are either pixels or percentages. If you are adjusting the table width, the percentage would be the percentage of the entire browser window. If you are adjusting individual cells, the percentage is the percentage of the table size that you want that cell to take. If you try to make the table too big to fit within the browser window, or cells too big to fit within the table, then the browser will ignore the HEIGHT and WIDTH attributes. When adjusting individual table cells, the adjustment will affect all of the other cells within that row if height is adjusted and within the column if width is adjusted. This can actually help you in formatting, because you only have to specify height and width one time per row or column.

<TABLE BORDER="4" HEIGHT="100" WIDTH="85%">
<CAPTION>I am the table's caption</CAPTION>
<TR>
  <TD WIDTH="150"><BR></TD>
  <TH>Column header one</TH>
  <TH>Column header two</TH></TR>
<TR> 
  <TH HEIGHT="70%">Row header.
  <TD>This is cell one.</TD>
  <TD>This is cell two.</TD></TR>
</TABLE>

would display

Several things just occurred. I specified both the HEIGHT and WIDTH of the entire table - 100 pixels and 85% of the browser window respectively. I also made the upper left corner cell's width 150 pixels. This also changed the width of the cell directly below it. I then made the 'Row header' cell's height equal to 70% of the height of the table or 70 pixels (70% of 100 pixels). This affected the height of the other two cells in the second row, leaving 30% of the table's height (30 pixels) for the first row. Pretty fancy, eh?

It is usually best to try to specify percentage values for height and width. That way the table will look about the same on any browser. However, if you do not want the browser to automatically resize or wrap the contents of your table, use pixel values instead. Just remember that if the table won't fit within the window with the specified height and width, then the browser will override your values and display in a way it decides is best, which usually makes the table look terrible. You should always try resizing your browser window or viewing with a different monitor resolution to see how your browser will rearrange the table under different conditions.

Up to this point, the contents of the cells have been pretty boring. <TH>'s are centered and bold, and <TD>'s are left aligned and default font. You can specify many things to add life to your table's contents. First of all, any text formatting tags will work within table cells. You can change the font size, color, face, and anything else you can in normal text. You can even add paragraphs, breaks, the center tag, etc. Tables also allow the alignment of text quite easily. Just add the ALIGN attribute to the <TD> or <TH> tag. The ALIGN value must be equal to left, center, or right. Left is the default for <TD>, center for <TH>

You can also add the align attribute to the <TABLE> tag, however this won't align the contents of the table, but will align the entire table itself within the browser window, that is, if the table is smaller than the width of the browser window.

To align to the top, bottom, or middle of a cell, add the VALIGN attribute (vertical align) to the <TD> or <TH> tag. Again it's values must be top, bottom, or middle, with middle being the default.

Both ALIGN and VALIGN can also be added to the <TR> tag to align the contents of all cells within that row. VALIGN, however will not work in the <TABLE> tag.

You can also change the color of the background for the table, individual rows, or individual cells. Just add the BGCOLOR attribute to the correct tag. The BGCOLOR in individual cells (<TD> or <TH>) will override a color specification in the <TR> tag, which in turn overrides BGCOLOR in the <TABLE> tag.

If you really want to, you can add a background image to cells or to the entire table. Just add the BACKGROUND="image.gif" attribute to either the <TABLE> tag or to individual cell's tags. Use this with caution, they usually do not display very beautifully. A few words of warning - Netscape will display the upper left corner of the background image in every cell (almost like tiling, but the tile size is determined by the cell size) and Internet Explorer will center the image behind the entire table. Any BGCOLOR attributes will override the background image in IE, but not in Netscape. As you can see, using background images in tables is not recommended.

Let's see some of these new attributes in action.

<TABLE BORDER="4" WIDTH="100%" BGCOLOR="blue">
<CAPTION>I am the table's caption</CAPTION>
<TR>
  <TD WIDTH="33%"><BR></TD>
  <TH WIDTH="33%">Column header one</TH>
  <TH WIDTH="*">Column header two</TH></TR>
<TR BGCOLOR="green"> 
  <TH HEIGHT="80" BGCOLOR="#FF00FF">Row header.
  <TD ALIGN="right" VALIGN="bottom">This is cell one.</TD>
  <TD ALIGN="left" VALIGN="top">This is cell two.</TD></TR>
</TABLE>

OK, here's what happened. I made the table width 100% of the browser window and it's background color blue. The first row is virtually unchanged, with the exception of the cell widths. The first two columns were made to be 33% of the browser window. For the third column, I made the width equal to *. The * equals whatever value is needed to reach the width specified in the <TABLE> tag. In this case, 34% (33+33+34=100). If I had made the third column's width equal to 20%, my browser would have become a little confused. The three cells added together would have only equaled 86% (33+33+20) of the table's width. What would go in the other 14%? That is what would confuse the browser. The * is an easy way to guarantee that the width or heights of all the cells equal the width or height of the table. You can use it with percentages or pixel values. If you use two or more * values in different cells, then the undefined values are divided equally among those cells. For instance, if I had specified WIDTH="*" in all three of the first row's cells, then each cell would take 1/3 of the table width. Confused? Don't really worry about it, just make sure that your cells fill the entire width and height as specified in the <TABLE> tag.

In the second row, I made the BGCOLOR green for the entire row. In the first cell of the second row, I made the background color FF00FF. Notice how cell colors override row colors, and row colors override table colors. I also made the HEIGHT 80 pixels. This will not effect the height of the first row, because there was no height specified for the first row, or for the table. The first row's height is whatever is required to display it's contents, and no more. REMEMBER, you can't adjust the height of a row in the <TR> tag, you must do it one of the row's cell tags. Also, try not to use percentage values in cell height or widths without first specifying a height or width for the TABLE. If you do, the browser must first figure out how high or wide the entire table is, then figure the percentage required for each of the cells, then display them. Can you say SLOW?!? For the quickest display rates, specify height and width values for the entire table (as percentages or pixels) AND for each row or column. If you tell the browser exactly what you want, it won't waste time 'thinking'.

The last two green cells, I aligned and vertically aligned. You do not need to specify both ALIGN and VALIGN, if one is not specified, the browser assumes it's defaults. Whew! Just a few more things on tables!!

Besides adding height and width attributes to cells, you can also specify the amount of space that displays between a cells contents and it's borders. Add the CELLPADDING attribute, with a value in pixels, to the <TABLE> tag to add space within a cells borders, in a sense, making it swell. CELLPADDING creates a buffer between the contents of a cell and the borders of that cell. Add the CELLSPACING attribute, also with a pixel value, to the <TABLE> tag to add space between cells, in essence, creating a larger border between cells. The default for CELLPADDING is 1 pixel, the default for CELLSPACING is two pixels.

OK, one last attribute. You can stop your browser from wrapping the contents of a cell with the NOWRAP attribute of the <TD> or <TH> tag. NOWRAP has no values. The width of that cell will then be made as wide as is needed to display the entire contents on one line. To control where the browser does wrap, use the <BR> tag in the text where you want to begin a new line.

Let's check out these, the last of our table attributes.

<TABLE BORDER="4" CELLPADDING="7" CELLSPACING="5">
<CAPTION>I am the table's caption</CAPTION>
<TR>
  <TD WIDTH="33%"><BR></TD>
  <TH WIDTH="33%">Column header one</TH>
  <TH WIDTH="*">Column header two</TH></TR>
<TR> 
  <TH>Row header.
  <TD ALIGN="center" BGCOLOR="white"><IMG SRC="duck.jpg"></TD>
  <TD NOWRAP>This cell contains a lot of text
	 that is not going to wrap because
	 I used the NOWRAP attribute.</TD></TR>
</TABLE>

I am the table's caption.

	Column header one	Column header two
Row header		This cell contains a lot of text that is not going to wrap because I used the NOWRAP attribute.

Notice that each cell seems swollen (more space between text and borders) because of extra cell padding and that there is more room between each cell - cell spacing. Even though I set widths for each column in the first row's cells, the browser ignored them because of the NOWRAP attribute in the last cell. The browser will try to display all that it can, in a somewhat orderly manner, in the browser window without creating a bottom scrollbar on the browser window. Basically, it will do all it can to display the entire table, but when it runs out of room you have to scroll to see the NOWRAP text. Also notice the use of the centered graphic in the table.

Now, you may be asking when you might use tables. As you design more and more, you will find that tables can be a valuable asset to use when trying to position elements on your page right where you want them. Because you can display no borders, your viewers don't even have to know that you used tables. It is only with tables that you can get exact positioning of graphics and text, regardless of the browser. Just place the graphic or text in a cell, then design the table with pixel height and widths to place them exactly where you want them. When using normal HTML it is impossible to wrap more than one line of text around a centered graphic, but not with tables, just place the text and the graphic in different cells. Tables are truly a powerful tool for web design. Next time you see a wonderfully designed web page, look at the source code and tables are sure to be the designer's secret.

That's all! Have fun and happy designing!!! :-)

Back to Class Homepage!