HTML Tables

CSCI 150, Spring 2003

HTML Tables

Note: You can see the source HTML for all of the examples in these notes by choosing View...Page Source from Netscape's View menu.

Table Format
Tables are a good way to organize and position text and images on your web page. Since Web Browsers skip over "white space" (that is, extra spaces, carriage returns and tabs), sometimes it is difficult to arrange items on the page the way you would like. Tables can help with this.

The basic table format uses the TABLE tag, along with the TR (Table Row) and TD (Table Datum) tags. The table begins with a TABLE tag and ends with a /TABLE tag. Each row begins with a TR tag and ends with /TR. Within each row, each cell of the table is defined between TD and /TD tags. The format for a table with two rows and 3 columns is as follows:

<TABLE>
	<TR>
		<TD>First cell</TD>
		<TD>Second cell</TD>
		<TD>Third cell</TD>
	</TR>	
	<TR>
		<TD>Fourth cell</TD>
		<TD>Fifth cell</TD>
		<TD>Sixth cell</TD>
	</TR>	
</TABLE>

The above HTML code will give rise to the following table:

First cell	Second cell	Third cell
Fourth cell	Fifth cell	Sixth cell

Adding a border
The border width can be set using the BORDER attribute inside the TABLE tag:

<TABLE BORDER = 2> The number indicates the width of the border. Adding the BORDER attribute to the above table results in the following:

First cell	Second cell	Third cell
Fourth cell	Fifth cell	Sixth cell

Note: If you want your table to have no borders, it is wise to include BORDER = 0 in your TABLE tag, since not all browsers have the zero border as the default setting.

Specifying width and height
You can set the width and height of an individual cell, an entire row or the entire table using the WIDTH and HEIGHT attributes. For example,

will generate a table cell with a width of 100 pixels and height of 75 pixels. The following shows the above table with the width and height specified for the 1st table cell. Note that the widths and heights of the other cells are adjusted to match the first cell.

First cell	Second cell	Third cell
Fourth cell	Fifth cell	Sixth cell

You can also specify width and height in terms of percentages instead of pixels. For example,

<TABLE WIDTH = 100%> generates a table with a width that is 100% of the window width. (This is useful because you have no way of knowing the width of a user's window in pixels). Similarly the tag:

<TD WIDTH = 50%> will generate a table cell whose width is 50% of the entire table width. The the following example sets the TABLE width to be 90% of the window width and the first cell of the table to be 50% of the table width.

First cell	Second cell	Third cell
Fourth cell	Fifth cell	Sixth cell

Aligning items horizontally within a cell
Items in a table can be positioned horizontally using the ALIGN attribute in the TD or the TR tags. The three possible values of ALIGN are LEFT, CENTER, or RIGHT. The following example aligns the contents of a single cell with the center of the cell:

<TD ALIGN = CENTER> You can set the alignment for every cell in a row by putting the ALIGN attribute in the TR tag:

<TR ALIGN = RIGHT> The following example has the first cell aligned in the center and the entire second row aligned to the right:

First cell	Second cell	Third cell
Fourth cell	Fifth cell	Sixth cell

Aligning items vertically within a cell
Items in a table can be positioned vertically within a cell using the VALIGN attribute in the TD or TR tags. Possible values of VALIGN are TOP, MIDDLE or BOTTOM, as in

<TD VALIGN = TOP> The following example shows the first cell aligned in the center, top. (The second row has been reset to the default left horizontal alignment).

First cell	Second cell	Third cell
Fourth cell	Fifth cell	Sixth cell

Coloring a table cell
The background of a table cell can be colored using the BGCOLOR attribute within the TD tag:

<TD BGCOLOR = "red"> Here is an example, with the second cell of the second row colored:

First cell	Second cell	Third cell
Fourth cell	Fifth cell	Sixth cell

Images inside tables
Tables can have anything inside their cells, including formatted text, images, links and even other tables. You can include an image inside a table by putting an IMG tag between the TD and /TD tags:

<TD><IMG SRC = "lec31_moon.gif"></TD> Here is an example:

First cell	Second cell	Third cell
Fourth cell	Fifth cell

Note that the height and width of the cell are automatically adjusted to accomodate the height and width of the image.

Tables within tables (Nested tables)
To align several things within a table cell, you can use a table within the table, or a Nested table:

<TABLE BORDER = 2>
	<TR>
		<TD>
			<TABLE>
				<TR>
					<TD> 5 </TD>
					<TD> 10 </TD>
				</TR>
				<TR>
					<TD> 15 </TD>
					<TD> 20 </TD>
				</TR>
			</TABLE>
		</TD>
		<TD> Another table cell </TD>
	</TR>	
</TABLE>

The above HTML will yield the following table:

5	10
15	20

Another table cell

Coloring text
One can color text in HTML using the FONT tag, and the COLOR attribute. Thus:

<FONT COLOR = "magenta"> Magenta text example </FONT>

will print out: Magenta text example

This can be included in a table cell:

<TD><FONT COLOR = "magenta"> Magenta text example </FONT></TD>

Here is an example:

First cell	Second cell	Third cell
Magenta text	Fifth cell

Spanning multiple columns
Sometimes you would like a single table cell to span multiple columns of the table. To do this, you can use the COLSPAN attribute of the TD tag. For example, the following table cell will span 3 columns of the table:

<TD COLSPAN = 3>Favorite Colleges</TD>

Here is an example:

Favorite Table Formats
First cell	Second cell	Third cell
Magenta text	Fifth cell