HTML Tables

What the original designers of HTML had in mind for tables was just that: tables, those boring things you see in the back of your math and science textbooks. But there is more that you can do with them to make your pages look better, so even if you never make a conventional table of tabulated data in your entire career as a web page maker, you should still learn the ins and outs of making tables.

<table> . . . </table>

What's inside is a table.

<tr> . . . </tr>

What's inside is one row of a table. Every table has at least one.

<td> . . . </td>

What's inside is most often called a cell. I think it probably stood for "Table Datum"--datum is the seldom used singular of "data." (At last, three years of Latin pays off . . . ) By default, text starts at the left, but is centered vertically.

<th> . . . </th>

This is just like <td> except that text is automatically boldface and centered. Nice for actual tables, but I haven't really seen it used much.

<caption> . . . </caption>

This new tag will put a centered caption just over the top of the table it's inside. It is officially part of HTML 4.0, and it works in Internet Explorer 5.

<tbody> . . . </tbody>

This is a Microsoftism you can usually ignore. FrontPage Express automatically puts these in the tables it creates. Useless unless used with the <thead> and <tfoot> tags. It is part of the HTML 4.0 standard, though.

<thead> . . . </thead>
<tfoot> . . . </tfoot>

Invented by Microsoft, these tags are useful for big tables. You use them to mark off a row (or more than one, if you wish) that will stay in place while the rest of the rows scroll within the table. This way you can better keep track of what the items in each column mean.

colspan=#, rowspan=#

These attributes are used in cells that you want to extend over more than one column or row.

background=[link to some picture],
bgcolor=[name or hex-triplet for a color]

<table>, <tr>, and <td> can all take these attributes, making them sort of like little HTML pages inside your big one. Background colors are used to make table art; if you want to see far more spectacular examples of this than you've seen at my site, look at the Marsh Angel's site, From the Earth to the Moon. Marsh Angel has Frontpage 4.0 and it apparently has some spectacular abilities to make decorative tables.

Arachnophilia has a "Table Wizard" which you can call up from the menu or from the "Table" button. Using all the bells and whistles, it output code like this:


<table  border="5" cellspacing="2" cellpadding="3" bgcolor="#000000" bordercolor="#0000ff">
	<tr>
		<!-- Row 1 Column 1 -->
		<td bgcolor="#ff0000">
			<b>
				R1C1
			</b>
		</td>
		<!-- Row 1 Column 2 -->
		<td bgcolor="#ff0000">
			<b>
				R1C2
			</b>
		</td>
		<!-- Row 1 Column 3 -->
		<td bgcolor="#ff0000">
			<b>
				R1C3
			</b>
		</td>
		<!-- Row 1 Column 4 -->
		<td bgcolor="#ff0000">
			<b>
				R1C4
			</b>
		</td>
	</tr>
	<tr>
		<!-- Row 2 Column 1 -->
		<td bgcolor="#ff0000">
			<b>
				R2C1
			</b>
		</td>
		<!-- Row 2 Column 2 -->
		<td >
			R2C2
		</td>
		<!-- Row 2 Column 3 -->
		<td >
			R2C3
		</td>
		<!-- Row 2 Column 4 -->
		<td >
			R2C4
		</td>
	</tr>
	<tr>
		<!-- Row 3 Column 1 -->
		<td bgcolor="#ff0000">
			<b>
				R3C1
			</b>
		</td>
		<!-- Row 3 Column 2 -->
		<td >
			R3C2
		</td>
		<!-- Row 3 Column 3 -->
		<td >
			R3C3
		</td>
		<!-- Row 3 Column 4 -->
		<td >
			R3C4
		</td>
	</tr>
	<tr>
		<!-- Row 4 Column 1 -->
		<td bgcolor="#ff0000">
			<b>
				R4C1
			</b>
		</td>
		<!-- Row 4 Column 2 -->
		<td >
			R4C2
		</td>
		<!-- Row 4 Column 3 -->
		<td >
			R4C3
		</td>
		<!-- Row 4 Column 4 -->
		<td >
			R4C4
		</td>
	</tr>
</table>

Sorry about using <pre> to put up this code that the table wizard cranked out,but it takes forever to do all the indenting without it. Anyway, this is how it looks in Internet Explorer 5:

A table rendered by Internet Explorer 5

And this is how it looks in Netscape 4.5:

A table rendered by Netscape Communicator 4.5

As we have come to expect, the appearance in Netscape is quite different. One thing that is the same, though, is that you can't read any text in the black cells because the text is also black. The only ways to change this using pure HTML are (1) set the text attribute in the <body> tag to white (#ffffff) or (2) Use <font color=> tags inside each cell to change the color individually. I think there's a way to do it more easily with style sheets but I haven't learned that trick yet, and style sheet tricks won't work on all browsers.

border, bordercolor

The border is the outside of the table. The border attribute is in pixels; the bordercolor attribute uses either color names or hexadecimal triplets. The "#" sign might be needed by some browsers to indicate that it is hexadecimal. When you use hexadecimal numbers to set colors in style sheets, you always need the "#" sign. If you don't use a border attribute, or use border=0, no border will appear.

cellspacing

How much space between cells, in pixels. Default is zero; then no divisions will appear between cells.

cellpadding

How much space between the top, sides, and bottom of the cells and their contents, in pixels. If you aren't using any cellspacing and you are putting in text, you should make this a couple of pixels or so; otherwise your text may run together.

R1C1 R1C2 R1C3 R1C4
R2C1 The FrontPage Table Button You can put pictures in cells, of course . . . . . . and use them as background pictures. R2C4
R3C1 R3C2 R3C3 R3C4
R4C1 R4C2 R4C3 R4C4

This is the code that was changed to produce the example above:

<!-- Row 2 Column 2 -->
<td><font color=#ffffff>
<img src="fptablebtn.gif" width="24" height="20" alt="The FrontPage Table Button">
You can put pictures in cells, of course . . .
</font></td>
<!-- Row 2 Column 3 -->
<td background=fptablebtn.gif>
<b>. . . and use them as background pictures.</b></td>

Notice that the table column widths, which were not specified, were equal when there was plenty of room but that now they are unequal as the table tries to fit the content. We'll change that first by giving the top four cells width=25% attributes:
R1C1 R1C2 R1C3 R1C4
R2C1 The FrontPage Table Button You can put pictures in cells, of course . . . . . . and use them as background pictures. R2C4
R3C1 R3C2 R3C3 R3C4
R4C1 R4C2 R4C3 R4C4

You can also set width in pixels, and height, which I did in the last section to produce that red-stripe cludge. However, if you put something in that is too big to fit your given dimensions, the browser will probably stretch the cell out to fit.

R1C1 R1C2 R1C3 R1C4
R2C1 The FrontPage Table Button You can put pictures in cells, of course . . . . . . and use them as background pictures. <td rowspan=3 align=right valign=top bgcolor=#ffff00>
<tr bgcolor=#00ffff><td> <td colspan=2 rowspan=2 align=center valign=bottom>
R4C1

valign

Vertical alignment: "Middle" is the default alignment, so you will never put it in yourself. "Top" is usually what you want. You can do "bottom" but I've never seen it done outside of examples.

You can put anything inside a <td> . . . </td> cell that would go between <body> and </body>, even another table. You can use nested tables to divide up your pages in very elaborate ways, if you wish.

On the home page for American Dream, I use a table with one row and three cells to make the table of contents into three columns. I used fixed widths because I want the columns to look one way no matter what resolution or how big the window. They are narrow enough so that a user who likes to work with more than one window on the screen can make about a half-width window and still read them. The middle cell is just a blank space to put a margin between the columns. By now you should know how to look at the code with your browser, so look at it, please. I'll wait . . .

You can fix the width and height of a table or a cell (and I guess the height of a row) but Netscape won't render it that way unless there is something in there. That's where our little friend "transparent.gif" comes in. He's known by many other names (blank.gif is quite popular.) By whatever name, our friend is made for cludges, and he is simply a one-pixel GIF file with the single pixel set to "transparent." You can perform this marvel with Paintbrush, or you can just steal "transparent.gif" from me.

In the "Works in Progress" section I only let my club members into, there are a lot of pages I work on with FrontPage Express. I always start them by making a copy of this blank, though:

<html><head><title>

</title></head><body>

<!-- This little table's purpose is to give the ad square space to
    expand without covering up anything important. -->
<p><table border=0 width=400><tr>
<td><IMG SRC="../images/transparent.gif" width="1" height="150" border=0
ALT="Just one transparent pixel to stretch out." align=right>
<p><b><i>Title</i></b></p>
<p><i>Notes and stuff</i></p>
</td></tr></table></p>

<hr>

<p>Actual fanfic goes here.</p>

</body>
</html>

On Geocities unless you put in an ad banner yourself (which I did on the seldom-seen home page) the service automatically tacks on a little javascript code that brings up the ad square inside your document, at the upper right corner. The square is about 200x200 pixels, so I try not to put anything important under it.

Our trusty friend, "transparent.gif," makes sure that the table I put up in the top left part of the screen extends down at least 200 pixels so that the ad square doesn't cover part of the story.

Tables and transparent gifs are also used to make those many pages you've seen with left border art. Go to the SM Toolbox for many examples, for a tutorial on how to do it, and for free backgrounds to do it with.

Back to More HTML Tags On to Space: The Final Frontier
HTML Index Main Index
Hosting by WebRing.