Lesson 6

Tables are a good way of organizing lists or other information on a web page. A table is basically a method of laying out data in a series of rows and columns, like this:

Row 1
Column 1		 Row 1
Column 2		 Row 1
Column 3
Row 2
Column 1		 Row 2
Column 2		 Row 2
Column 3
Row 3
Column 1		 Row 3
Column 2		 Row 3
Column 3

<TABLE></TABLE>

Of course, it all starts with the table tag. This defines the table, and everything between the tags is considered to be table data. If you put stuff between the tags that isn't formatted for tables, you may get some strange output. Okay, now let's look at some of the options for the table tag.

BORDER=#

This attribute sets the thickness of the border around the table. The border is a semi-beveled look that I guess is supossed to give you a 3D look. The default value is zero, so if you don't want a border, this tag isn't necessary. If you do want a border, the number you specify is the thickness of the border used. Ex:
This is a table with a border of 5.
This is a table with a border of 1.
This is a table with a border of 0.
CELLPADDING=#

The cellpadding is the amount of space between the data in the cells and the cell borders, in pixels. If you set this to zero, there will be just a tiny bit of space between the cells and the border. The default is 1. Ex:
This is CELLPADDING=10
This is CELLPADDING=0
This is CELLPADDING=1
CELLSPACING=#

This is the width of the cell borders. You won't be able to see the effects unless you have a border defined. The default is 1. Ex:
This is CELLSPACING=5
This is CELLSPACING=0
This is CELLSPACING=1
BGCOLOR=color

This will set the background color for the entire table. Whatever you choose will override the default document background in the table. This color is applied to the cells, and the border. The default value is transparent.
BACKGROUND="some image"

This will use an image as a background for the table.
NOWRAP

This prevents the text in the cells from wrapping-i.e. continuing on to the next line.
WIDTH=# or WIDTH=#%

This sets the width of the table. You can use pixel width, or a percentage of the browser window, such as 50%.
SUMMARY="text"

This basically just displays the text for people who are using text based browsers.
ALIGN=alignment

This will align the table on the page, either left, center, or right.

Okay, now that we have defined a table, it's time to put some data in it. Below is a list of elements you use to create a table. Don't panic yet. I know this is confusing at first, but the upcoming examples will demonstrate the basics of making tables.

<CAPTION></CAPTION>
This defines a caption (i.e. title) for the table. The only real option is ALIGN=left/right/top/bottom which determines where the caption will be placed (on top of the table, below the table, or to the left or right of the table. If this tag is used, it MUST be the first tag following the TABLE tag.

<TR></TR>
This tag defines the beginning of a row (horizontal section) of data. There are several options you can use. It get's confusing to begin with, just hang in there.

BGCOLOR=color

Sets the background color for the row of cells.
ALIGN=alignment

Sets the alignment of the text in that row. Valid values are left, right, or center.
VALIGN=alignment

Sets the vertical alignment of text in that row. Valid values are top, middle, or bottom.

<TD></TD>
This tag defines a new column of data (vertical section). There are several more options available here than for a row.

BGCOLOR=color

Sets the background color for the row of cells.
ALIGN=alignment

Sets the alignment of the text in that row. Valid values are left, right, or center.
VALIGN=alignment

Sets the vertical alignment of text in that row. Valid values are top, middle, or bottom.
NOWRAP

Prevents text from wrapping in the column cells.
ROWSPAN=#

This will set the number of rows for the column to span. Example below.
COLSPAN=#

This sets the number of columns for the cell to span. Here's an example. Don't panic, I'll explain more clearly how to set up tables in a minute.
Column 1 Column 2 Column 3
This column has the attribute COLSPAN=3
This row has the attribute ROWSPAN=2 This column has the attribute COLSPAN=2
Row 3, Column 2 Row 3, Column 3
WIDTH=# or WIDTH=#%

Sets the width for cells in the column, in pixels or %. Whatever you set for one cell of a column will apply to all other cells in that column. If you don't specify a width, it will automatically fit itself to the width needed to hold the data.
HEIGHT=#

Set's the height for cells in the column, in pixels. Values will be applied to all cells of the row. If you don't specify a height, it will automatically fit itself to the height needed to hold the data.

Okay, now let's check out how to put this all to use.

Tables can get very confusing. Don't worry, it just takes a bit to catch on. Tables can be very important to web pages, so it's good to know how to used them. For instance, my main page is layed out with one table and four sub tables inside that. We'll cover that in the next section.

First, let's look at a simple table.

Output HTML Coding
Name Age Occupation
Joe Bob 23 Dust Collector
Billy Bob 41 Professional Killer
Just Bob 135 yes

<TABLE BORDER=1>
<TR>
<TD>Name
<TD>Age
<TD>Occupation
<TR>
<TD>Joe Bob
<TD>23
<TD>Dust Collector
<TR>
<TD>Billy Bob
<TD>41
<TD>Professional Killer
<TR>
<TD>Just Bob
<TD>135
<TD>yes
</TABLE>

Let's look at this table a minute. The first step in making a table is of course to use the TABLE tag. After that, we start by declaring a row. The basic way you'll want to do tables is always the same. First, define a row. Next, define columns in that row. Simple, eh? You'll notice I haven't used any closing tags here. Some die hard HTML people may criticize you for this, but I find it helps to keep the table simple. Whatever floats your boat. A few points...Make sure you have the same number of rows in your columns, or columns in your rows (in other words, make sure your tables are rectangular) or wierd things could happen. Also, it's better to start with rows and put columns in them than to start with columns and put rows in them. I find the latter rarely formats correctly, though I don't see any reason why it shouldn't. Okay, here another example.

Output HTML Coding
Ugly Table
Joe Bob Big Bob Little Bob John Bob
Billy Bob Really Big Bob Bob Bob
Rob Bob Bobby Bob

<TABLE BORDER=0 BGCOLOR=black>
<TR BGCOLOR=white>
<TD COLSPAN=4 ALIGN=center>Ugly Table
<TR BGCOLOR=white>
<TD>Joe Bob
<TD>Big Bob
<TD>Little Bob
<TD>John Bob
<TR BGCOLOR=red>
<TD><FONT COLOR=white>Billy Bob</FONT>
<TD ROWSPAN=2 COLSPAN=2 BGCOLOR=green>Really Big Bob
<TD>Bob Bob
<TR BGCOLOR=red>
<TD>Rob Bob
<TD>Bobby Bob
</TABLE>

This table demonstrates a few important aspects of tables. The first is how to get a colored border. I know it's a pain, but you have to make the table background the color you want the border to be, and then change the individual rows or columns to a different color, and you can't make them transparent. You'll also notice the use of the ROWSPAN and COLSPAN options. Notice that even thought the table is four columns wide, I only had to declare one column for the first row because I said it spanned four columns. Had it spanned only three columns, I would have had to declare another column to make a total of four columns.

Back: Lesson 5-Pictures and Linking

Next: More resources

[Introduction] [Lesson 1] [Lesson 2] [Lesson 3] [Lesson 4] [Lesson 5] [Lesson 6] [More Resources]

Send questions or comments about this site to website@socrates.math.ohio-state.edu Copyright © 1998, Calculus&Mathematica