For this lesson you can add tables to your previous sample pages (from other lessons), or use tables to design a new web page using your own content.

---

 

Code for tables was originally created to display tabular data on web pages. Before that time, web designers did not have very many options when it came to designing interesting web sites.

When tables came along, designers quickly began using them for much more than what they were intended to be used for. Instead of limiting table use for data, tables are used to layout entire web pages. Layouts with tables can get to be very complicated, so many designers have now switched to CCS for layout. Still, the all powerful table is great for simple web sites.

A table is nothing more than rows of cells (square and rectangular areas) full of information (text and images). Think of a table as a grid-like structure. Tables can be very simple like the example at the top of this page, or they can actually be the entire web page, like this one. Tables can be nested within other tables for endless design possibilities.

Like all your other page content, Tables are located between the opening and closing BODY tags, wherever you want them to appear.

The table at the top of this page shows you text in table cells. This white area in which you are reading this text, is a table.

The lesson is designed to be followed in order but it is very long. There are many variables to Tables. You may not want to study the page all at once. Instead of breaking this lesson into separate mini lessons on Tables, I have created the following Section List. You may click on any section number on the list to go directly to that topic. Follow the lesson in order at your own pace, and use this list as a reference tool. At the end of each section is a link back to this list.

Section List

Section 1 Attribute Chart
Section 2 Basic Table Code
Section 3 BORDER
Section 4 Adding Cells (<TD>)
Section 5 Adding Rows (<TR>)
Section 6 Adding a Heading (<TH>) / COLSPAN
Section 7 COLSPAN and ROWSPAN
Section 8 CELLPADDING
Section 9 CELLSPACING
Section 10 Adding color / BGCOLOR
Section 11 Variations / BGCOLOR, CELLPADDING, CELLSPACING
Section 12 Dimensions / WIDTH and HEIGHT
Section 13 Alignment
Section 14 BACKGROUND
Section 15 Nesting Tables
Section 16 IMAGE Table
 

 

Section 1 - ATTRIBUTE CHART

Tables, and the rows and cells within them, can be designed with a variety of tags and their attributes (and associated values). The chart below is my outline of these as they relate to one another. This lesson will explain their use, with some examples. How you choose to design with them is up to your imagination.

Anatomy of a Table Tags - in bold Possible Attributes and their Values <TABLE WIDTH="#" HEIGHT="#" CELLSPACING="#" CELLPADDING="#" BORDER="#" ALIGN="left, right, center" BGCOLOR="#color" BACKGROUND="image"> <TH WIDTH="#" HEIGHT="#" COLSPAN="#" ROWSPAN="#" ALIGN="center, left, right" VALIGN="top, middle, bottom" BGCOLOR="#color" BACKGROUND="image"> </TH> <TR ALIGN="center, left, right" VALIGN="top, middle, bottom" BGCOLOR="#color"> <TD WIDTH="#" HEIGHT="#" COLSPAN="#" ROWSPAN="#" ALIGN="center, left, right" VALIGN="top, middle, bottom" BGCOLOR="#color" BACKGROUND="image"> </TD> </TR> </TABLE> All of the above, supported by Navigator (version 4.0+ 1997) and Explorer (version 3.0+ 1996).

Back to Section List

 

Section 2 - BASIC CODE

To begin the code for a table, you start with the TABLE tags. As with many tags, one opens it and one closes it.

<TABLE>  Opens the table.

</TABLE>  Closes the table.

Now you need to define the first Table Row, using the Table Row tags.
Note: indents only used to help you see the various tag pairs.

<TABLE>
<TR>  Opens a Row.
</TR>  Closes a Row.
</TABLE>

In the row, add a Table Data cell. Do this with the Table Data tags.

<TABLE>
<TR>
<TD>  Opens a Table Data cell.
</TD>  Closes a Table Data cell.
</TR>
</TABLE>

Now add your data (cell content) to the Table Data cell.

<TABLE>
<TR>
<TD>
Text or Image Here
</TD>
</TR>
</TABLE>

That is the code for a basic Table. This is what that Table looks like:

Text or Image Here

The basic code above does not create very much, but at least it shows you how a table is built. As you can see, it just looks like plain text at this point, that is why you need to add attributes.

Back to Section List

 

Section 3 - BORDER ATTRIBUTE

The Table: Table Three The Code: <TABLE BORDER="1"> <TR> <TD>Table Three</TD> </TR> </TABLE>

The BORDER attribute does exactly what it says, it adds a border to the TABLE elements. The number you assign to the value is the size of the border in pixels. In this example there is only one row and one cell, so what you have is text in a box.

Back to Section List

 

Section 4 - ADDING CELLS

The Table: Table Four Two Cells Now The Code: <TABLE BORDER="1"> <TR> <TD>Table Four</TD> <TD>Two Cells Now</TD> </TR> </TABLE>

Before we go on with any more attributes, lets add more cells. You do that by adding more <TD> tags. You can keep adding cells this way but they will all appear next to one another until you add another row.

Back to Section List

 

Section 5 - ADDING ROWS

The Table: Table Five Cell One Cell Two Cell Three Cell Four The Code: <TABLE BORDER="1"> <TR> <TD>Table Five<BR> Cell One</TD> <TD>Cell Two</TD> </TR> <TR> <TD>Cell Three</TD> <TD>Cell Four</TD> </TR> </TABLE>

To add another Row, you add another set of <TR> tags and two more cells between them. If I only added one Cell in the second Row, the Table would look like this: Cell One Cell Two Cell Three If I added three Cells to the second Row, the Table would have looked like this: Cell One Cell Two Cell Three Cell Four Cell Five Note: I used the line break tag (<BR>) in Cell One of Table Five to prevent the Table from getting wider.

Back to Section List

 

Section 6 - ADD A HEADING / COLSPAN

The Table: Table Six Cell One Cell Two Cell Three Cell Four The Code: <TABLE BORDER="1"> <TR><TH COLSPAN="2"> Table Six</TH></TR> <TR> <TD>Cell One</TD> <TD>Cell Two</TD> </TR> <TR> <TD>Cell Three</TD> <TD>Cell Four</TD> </TR> </TABLE>	To add a HEADING, you use the Table Heading tags (<TH>). Notice the words Table Six in the Table appear bold, but I did not have to use the BOLD tags (<B>). I also did not have to use any alignment attributes to make it centered. When you use the HEADING tags, the default is bold and centered. That is all this tag is good for. In order to make the Heading Row go across the Table, I had to add the Column Span attribute (COLSPAN="#") with a value of two since that is how many Cells (or columns of cells) it had to span. You can use COLSPAN in Cell tags as well, as you will see in the next section.
Note: You may have a Heading above each column by using the <TH> tags just as you can use the <TD> tags in Rows, and they can also be used as the first Cell in a Row for side headings. See Examples below.
Head1 Item 1 Item 2 Item 3 Head2 Item 4 Item 5 Item 6 Head3 Item 7 Item 8 Item 9	Head1 Head2 Head 3 Head 4 Head 5 Head 6 A B C D E F G H

Back to Section List

 

Section 7 - ADD COLSPAN / ROWSPAN

The Table: Table Seven Cell One Cell Two Cell Three Cell Four Cell Five Cell Six

The Code: <TABLE BORDER="1"> <TR><TH COLSPAN="3"> Table Seven</TH></TR> <TR> <TD ROWSPAN="2"> Cell One</TD> <TD>Cell Two</TD> <TD>Cell Three</TD> </TR> <TR> <TD>Cell Four</TD> <TD>Cell Five</TD> </TR> <TR> <TD COLSPAN="3"> Cell Six</TD> </TR> </TABLE>

In this example you see I have added a COLSPAN and a ROWSPAN attribute to two new Cells and edited the <TH> tag. A COLSPAN="3" means that Cell will expand to cover three Cell widths (columns) and a ROWSPAN="2" means that Cell will expand to cover the height of two Rows. The reason Cell Five has a little space after the text, and all the other text appears crammed in each Cell, is because Cell Five has to be the same width as Cell Three which is the wider of the two - the widest Cell in a column defines the width of all of the other Cells in that column.

Back to Section List

 

Section 8 - ADD CELLPADDING

The Table: Table Eight Cell One Cell Two Cell Three Cell Four Cell Five Cell Six

The Code: <TABLE BORDER="1" CELLPADDING="5"> <TR><TH COLSPAN="3"> Table Eight</TH></TR> <TR><TD ROWSPAN="2"> Cell One</TD> <TD>Cell Two</TD> <TD>Cell Three</TD> </TR><TR> <TD>Cell Four</TD> <TD>Cell Five</TD> </TR><TR> <TD COLSPAN="3"> Cell Six</TD> </TR></TABLE>

Now the text does not look so crammed into each cell. By using CELLPADDING="#" in the opening Table tag, each Cell has a buffer or padding of extra space all around the inside of it. In my example, I have added 5 pixels to each side of all the Cells. This attribute can only be used in the opening TABLE tag and it effects all the Cells in the Table - you can not apply the padding only to specific Cells. The default value is 1 so if you do not want any cell padding, you must assign the value as 0. Note: In the code, I have now put some tags on the same line as others since the code for the Table is growing, and I want to show you spacing is flexible like this.

Back to Section List

 

Section 9 - ADD CELLSPACING

The Table: Table Nine Cell One Cell Two Cell Three Cell Four Cell Five Cell Six
The Code: <TABLE BORDER="1" CELLPADDING="5" CELLSPACING="10"> <TR><TH COLSPAN="2"> Table Nine</TH></TR> <TR><TD ROWSPAN="2"> Cell One</TD> <TD>Cell Two</TD> <TD>Cell Three</TD> </TR><TR> <TD>Cell Four</TD> <TD>Cell Five</TD> </TR><TR> <TD COLSPAN="3"> Cell Six</TD> </TR></TABLE>	CELLPADDING added space within each Cell, CELLSPACING adds space between all the cells - in pixels. This attribute can only be used in the opening Table tag and it effects all the Cells - you can not specify individual Cells. The default value is 2 so if you do not want any cell spacing, you must assign the value as 0.

Back to Section List

 

Section 10 - ADD COLOR

The Table: Table Ten Cell One Cell Two Cell Three Cell Four The Code: <TABLE BORDER="1" BGCOLOR="#FFCCFF" CELLPADDING="5" CELLSPACING="10"> <TR><TH COLSPAN="2" BGCOLOR="#FFFF00"> Table Ten</TH></TR> <TR> <TD>Cell One</TD> <TD> Cell Two</TD> </TR><TR> <TD>Cell Three</TD> <TD>Cell Four</TD> </TR></TABLE>

Note - To make the Table and the code smaller, I have removed two cells from the code. Lets add color to the Table. To do this you use the BGCOLOR attribute. The color is specified as a hexadecimal value. You were shown this in Lesson Two. I have added BGCOLOR="#FFCCFF" to the opening Table tag which makes the entire Table pink, except for the Heading because I added BGCOLOR="#FFFF00" to the <TH> tag (making it yellow). If you want to make your Table different colors, see Resources on the Menu where you will find links to help you create colors. You may add BGCOLOR to any individual Cell or an entire Row.

Back to Section List

 

Section 11 - Variations

BGCOLOR / CELLPADDING, CELLSPACING

Below are code/tag changes to Table Ten.
<TABLE CELLPADDING="5" BGCOLOR="#FFCCFF" BORDER="0">	Example 1 Cell One Cell Two Cell Three Cell Four
<TABLE CELLPADDING="5" BGCOLOR="#FFCCFF" BORDER="0"> <TR BGCOLOR="#CCFFFF"> <TR BGCOLOR="#CCFFFF">	Example 2 Cell One Cell Two Cell Three Cell Four
<TABLE CELLPADDING="5" BGCOLOR="#FFCCFF" BORDER="4"> <TR BGCOLOR="#CCFFFF"> <TR BGCOLOR="#CCFFFF">	Example 3 Cell One Cell Two Cell Three Cell Four
<TABLE CELLSPACING="0" CELLPADDING="5" BORDER="0"> <TR BGCOLOR="#CCFFFF"> <TR BGCOLOR="#CCFFFF">	Example 4 Cell One Cell Two Cell Three Cell Four
<TABLE CELLSPACING="10" CELLPADDING="5" BGCOLOR="#FFCCFF" BORDER="0"> <TR BGCOLOR="#CCFFFF"> <TR BGCOLOR="#CCFFFF">	Example 5 Cell One Cell Two Cell Three Cell Four
<TABLE CELLSPACING="10" CELLPADDING="5" BGCOLOR="#FFCCFF" BORDER="2"> <TR BGCOLOR="#CCFFFF"> <TR BGCOLOR="#CCFFFF">	Example 6 Cell One Cell Two Cell Three Cell Four
<TABLE CELLSPACING="10" CELLPADDING="5" BGCOLOR="#FFFFFF" BORDER="0"> <TR BGCOLOR="#CCFFFF"> <TR BGCOLOR="#CCFFFF">	Example 7 Cell One Cell Two Cell Three Cell Four

Back to Section List

Section 12 - DIMENSIONS

Note: There is a HEIGHT tag designed to work the same as the WIDTH tag but it is not well supported so I do not recommend using it.

The width of a Table or Cell can be set using the WIDTH attribute. The value can be a number (pixels) or a percentage (of the available space). You can not make a browser force the size of a Table or Cell smaller than its contents. If you try to do that, the browser will stretch the Table or Cell to make the contents fit.

Here is a Basic Table with a WIDTH attribute. The extra space inside the Cell is obvious.

The Table: Example 2

The Code: <TABLE BORDER="1" WIDTH="125"> <TR> <TD>Example 2</TD> </TR> </TABLE>

 

Here the WIDTH is set too small, but your browser overrides this, wraps the text, and stretches the Cell to fit.

The Table: Example 3

The Code: <TABLE BORDER="1" WIDTH="1"> <TR> <TD>Example 3</TD> </TR> </TABLE>

When sizing with percents, the browser will adjust the Width when a window is resized. It will not do this when you set the Width in pixels. If you assign a Width in pixels too large to fit in your visitor's window, their browser will create a horizontal scroll bar. That is usually very annoying to most people so it is not a good idea to make a Table wider than 600 pixels.

Below is the Basic Table with the Table Widths set as percentages

Example 5 - WIDTH="50%"

Example 6 - WIDTH="25%"

In Example 6 (above), the browser wraps the text to make the Table stay 25% of the available Width since the line is too big to fit otherwise.

In Example 7 (above), the Table has WIDTH="100%" and the first cell WIDTH="25%" so the second Cell automatically has a width of 75% by default. Notice the Height of the second cell is the same as the first (since it is larger).

When sizing Cells, remember the widest Cell in a column dictates the size of all the other Cells in that same column. Because of this, it is not necessary to size every Cell in a Table. However, some Navigator browsers don't always follow this principle so if it is necessary to have a specific Cell width in your web page design (larger than the contents) - specify it in each Cell.

In Example 8 the Table Width is 100%. The only Cell with a WIDTH attribute is Cell 1 so the Width of Cell 3 is the same by default. The Width of Cell 2 is of course 75% by default since Cell 1 is set at 25% - so Cell 4 is 75% by default as well. Cell 2 is the same Height as Cell 1 since Cell 1 is the highest of the two Cells. If you are viewing this with a version of Navigator, which may have guessed the widths since only one Cell has a WIDTH attribute, you may see something different than I do using Explorer, or the version of Navigator I use.

If you specify the Width of every Cell in a Row, make sure they add up (including cell spacing and borders) to the Table Width if you specified that as well. Otherwise your visitor's browser will guess at what your intent is, and that may not be what you had in mind.

Back to Section List

Section 13 - ALIGNMENT

Until now, I have let the text in the examples fall where they may. The default is horizontally left and vertically in the middle. However, using the ALIGN and VALIGN attributes, you may tell browsers how you want elements to be aligned. Below are the possible values for each of these attributes:

These attributes may be used within the opening tags of Cells and Rows. You may use them separately or together. In the Table below, I show you the results for both attributes using a different combination in each of the nine cells. As an example, the opening tag of the first cell would be:

Back to Section List

Section 14 - BACKGROUND

In Section 10 you learned how to add background colors to Tables - with the BGCOLOR attribute. You may also add background texture to Tables and individual Cells using images with the BACKGROUND="image" attribute.

The code for Cells 2 and 4 are simply:

Because there isn't a BACKGROUND or BGCOLOR attribute specified in them, Cells 2 and 4 take on the properties specified in the opening Table tag (if any) which in this case is BACKGROUND="images/backs/7b.jpg"

Cells 3 and 5 each have their own background as specified in their opening tags, which overrides any background image or color specified in the opening Table tag. The Cell background overrides any Row background which overrides any Table background.

Back to Section List

Section 15 - NESTING TABLES

Tables can be nested in Cells of a parent Table. The example below shows a small Table (ABCD) within Cell 2 of a larger parent Table.

Back to Section List

Section 16 - IMAGE TABLES

	Tables + Images = Web Design

This design - the blue box, red inner border, light grey area for text - is created with Images in Cells. This is where Tables become "fun" (in quotes because although the results are nice, you really have to pay attention to details). The really nice thing about this type of Table is no matter how much text I put here or what size your browser window is, this Table and the Images will adjust to fit - within the white area of this web page - and you can easily change the light grey background to any color you want.

	To get these 9 images, click here.

In section 14 you learned how to add a background image to a Cell. When you are creating web page layout designs, HEIGHT becomes a major factor so you have to do more than just add the image inside the opening Cell tag. Since the CELL HEIGHT attribute is not reliable, you should also add the image as Cell content. The IMAGE HEIGHT attribute is fully supported so by using it you can force Cell height. (See more about Height further below.) The image added as Cell content blends into the background of the Cell since it is the same image. See the code below.

That is how the four sides of the above design are created - making them fluid as the Table grows vertically with text or is resized horizontally by changing the browser window size. However, the four corner images are added only as Cell content since they do not need to be fluid. See code below.

The top, bottom, left and right side images are included in the Cell tags as BACKGROUND images. Because the Table has a WIDTH="100%" attribute, it resizes as needed to fit the white area of the lesson page - even if you resize the window. This means the BACKGROUND image in each of those four side Cells is repeated as often as necessary to fill those areas. As the Table is resized horizontally by changing the window size, or vertically from the amount of text lines in the Main Text Cell, the layout adjusts.

Below are the images of this design.

	Header Text Here

Main Text Area

	Footer Text Here

Note - I have set the border attribute for the transparent image used in the header and footer Cells to BORDER="1" so you can see it above. The border value is zero in the actual code making it completely invisible. You can change the width of this image but do not change the height.

The corner graphics are 75 pixels square - there is a transparent triangle completing each square image so you can change the background color of the Table. Otherwise the Table would have to be the color of the "missing triangle" to keep it from showing.

The top and bottom images are 23 pixels high. Unless the Header and Footer Cells are forced to be 52 pixels high (75-23=52) the top and bottom image Cells might stretch vertically and ruin the design (see below). Since the CELL HEIGHT attribute is not reliable, this transparent image with an IMAGE HEIGHT attribute of 52, maintains the height needed for those Cells. I have it on both sides of the text so the text stays centered.

Note: If I were not making the transparent Header and Footer image available for download, I would probably have made it only one pixel wide when I created it. I would have made the four side images smaller as well.

The below example shows you what might happen if the Header (and Footer) Cell was not 52 pixels high. The Top Cell stretches lower than it should and of course the background image fills all the space. Why not add a HEIGHT attribute to the Header and Footer Cells? Because it doesn't work on all browsers.

	Header

The side images do not pose that sort of problem. The dependable WIDTH attribute keeps those Cells from stretching horizontally.

This design is composed of three Tables as shown below.

	Header

This is the Main Text Cell.

	Footer

I added two small empty Cells on either side of the Main Text Cell to keep the text from going all the way to the edge. I could not use the CELLPADDING attribute because that would have ruined the design by adding space in all the Cells - the images would not touch one another.

The reason I broke up the design into three Tables is because I wanted the Main Text area to be as wide as possible - not limited to the Header and Footer width. However I could have created a Table and nested these three Tables in it - one in each row, but that is just more coding. The example below shows you the narrower Main Text Area with the layout as one Table with three Rows (no nested Tables).

		Header
		This version is one Table with three Rows, instead of three Tables on top of one another. This text area is now narrower. I had to add COLSPAN="2" to the four corner Cells containing the corner images since they now span the two cells above (or below) them in the middle row. I also had to change the width attribute of the two empty Cells on either side of this text to WIDTH="52" to keep the side images from stretching. The transparent image in the Header and Footer Cells is still there - invisible with BORDER="0".
		Footer

In case you are having a difficult time seeing the individual Cells in the Table above, here is what it looks like without the images in them...

		Header
		This is the same Table as shown above and below with all the images removed to help you see the various Cells easier. Notice how the four corner Cells each span the two Cells on either side of this text Cell.
		Footer

		Header
		This version is one Table with three Rows, instead of three Tables on top of one another. This text area is now narrower. I had to add COLSPAN="2" to the four Cells with the corner images. I also had to change the width attribute of the two empty Cells on either side of this text to WIDTH="52" to keep the side images from stretching. The transparent image in the Header and Footer Cells is still there - invisible with BORDER="0".
		Footer

To see the code for the Three Table design with the wider main text area and the single Table design with the narrower main text area, click here.

Back to Section List

Using the necessary attributes correctly, and images of your own, what you have learned here should enable you to create wonderful web pages.

To see how a white, round cornered table, for a black background would be put together click here.