Logobeben.jpg (28941 bytes)

HTML tutorials
Š2003 by Kati Petit

Now for the really fun stuff... TABLES! A table is simply a box to put whatever you want in... pictures, text, links... whatever. It can be extremely useful when designing a page. Here's what you can find here:

Tables:

The Basics
Captions
Colored Backgrounds & Basic Borders
Table Background Images
Styled Borders

NOTE: Not all of these things work with all browsers.

The Basics

Here's your basic table:

Hi.	I'm...
...a basic...	...table.

This is the code I used to make it:

<TABLE BORDER="1" CELLSPACING="1" WIDTH="100%">
<TR>
<TD WIDTH="50%">Hi.</TD>
<TD WIDTH="50%">I'm...</TD>
</TR>
<TR>
<TD WIDTH="50%">...a basic...</TD>
<TD WIDTH="50%">...table.</TD>
</TR>
</TABLE>

Obviously, TABLE lets the browser know that, whoa, this is a table! There are a few variables here. BORDER dictates the size of the border around your table. A value of 1 will get you what was shown there. A value of 5 gets you this:

Whereas a value of 0 makes the border invisible (my personal preference). Don't forget to enclose it in quotes!

The next variable is CELLSPACING. Amazingly enough, this controls the spacing between the cells. Whoa. A value of 1 gets you what I showed above, and a value of 5 would be:

And just for fun, here's a value of 0...

Mm'kay, moving right along. The next variable is WIDTH--this just tells the browser how much of the page you want the table to take up. You can write it in percentages, or in number of pixels. Those tables were all at 100% (they don't take up the whole page, because they themselves, along with all of the text on this page, are inside another, invisible table). Here's one at 50%:

You get the idea. Because different people have different screen resolutions, you may want to use pixels instead of percentages. This way, the table size will remain constant no matter what the monitor size or resolution. To do that, just write the number of pixels you want instead of the percent I showed in the example. Here's one at 100 pixels:

Got it? Good. The next tag is TR, which stands for Table Row. Put this wherever you want a new row to begin. You can add as many as you like. Lookit all the table rows!

Next is TD, which stands for Table Data. Really it should just be "TC" for Table Cells, cos that's what you're making... but hey, I didn't invent HTML. You put them inside of the TR tags whenever you want a new cell. Lookie, cells!

See, that's not so bad. But don't forget to close your tags! The next thing you'll notice is that WIDTH variable again... this simply tells the browser how much of the table you want that cell to take up. If I wrote that first table a little differently, it would look like this:

Hi.	I'm...
...a basic...	...table.

Here's the code I just used:

<TABLE BORDER="1" CELLSPACING="1" WIDTH="100%">
<TR>
<TD WIDTH="90%">Hi.</TD>
<TD WIDTH="10%">I'm...</TD>
</TR>
<TR>
<TD WIDTH="90%">...a basic...</TD>
<TD WIDTH="10%">...table.</TD>
</TR>
</TABLE>

Get it? Good.

^top

Captions

Another tag you can use (I usually don't, but you can) is CAPTION. Like so...

<TABLE BORDER="1" CELLSPACING="1" WIDTH="100%"><CAPTION>This is a caption.</CAPTION>

This is a caption.

Whew, that was a mental workout. Go have a doughnut or something.

^top

Colored Backgrounds & Basic Borders

Now here's some fun stuff:

Red	Blue
Yellow	Green

This was simple to make, and I'll bet you can figure out how I did it. Here's the code:

<TABLE BORDER="0" CELLSPACING="1" WIDTH="100%">
<TR>
<TD WIDTH="50%" BGCOLOR="red">Red</TD>
<TD WIDTH="50%" BGCOLOR="blue">Blue</TD>
</TR>
<TR>
<TD WIDTH="50%" BGCOLOR="yellow">Yellow</TD>
<TD WIDTH="50%" BGCOLOR="green">Green</TD>
</TR>
</TABLE>

Now, if ya wanna get really fancy, try this:

Merry Christmas...	Isn't this festive?
Fa, la, la, la, la...	...la, la, la, la.

This was done with one extra variable--BORDERCOLOR.

An obvious note: If you make the border size "0", no matter what border color you choose, you won't see it.

You can also do make a border that applies only to the cells, not the entire table:

Red	Blue
Yellow	Green

Here's how I did it:

(By making the border color the same color as the page, you can make it invisible. It now looks the same as if the table border size was "0".)

<TR>
<TD WIDTH="50%" BORDERCOLOR="#FF0000">Red</td>
<TD WIDTH="50%" BORDERCOLOR="#0000FF">Blue</td>
</TR>
<TR>
<TD WIDTH="50%" BORDERCOLOR="#FFFF00">Yellow</td>
<TD WIDTH="50%" BORDERCOLOR="#008000">Green</td>
</TR>
</TABLE>

See? Piece of baklava.

^top

Table Background Images

I showed you how to make the background of a table a color. You can also make it an image:

**This table has a background image.**
Don't you just love backgrounds?	I sure do.
They're so pretty.	Yes indeed.

Here's the code I just used:

<TABLE BORDER="1" CELLSPACING="1" WIDTH="100%" BACKGROUND="mypicture.gif">
<FONT COLOR="#000000"><B>
<CAPTION>This table has a background image.</CAPTION>
</B></FONT>

Or, you can do the same thing for individual cells:

**Some of these cells have background images.**
I have a background!	I don't.
I don't.	I do!

All you have to do is move the BACKGROUND variable into the TD tag of the cell you want, rather than the TABLE tag. (Remember, TD means "cell".) You can use an image of any size--it will either be tiled to fit the cell (if it's too small) or only part of it will show (if it's too big).

^top

Styled Borders

All that's great, but I'm getting bored. Let's do some funky borders, shall we?

Isn't this cool?

I don't want you getting to be as good as I am, so I'm not going to show you how I did it.

Nahhh, just kidding. Here's the code:

Here we see my friend, STYLE. Add it to the TABLE tag, and there are endless possibilities. Let's disect it:

border-left: thin dashed #cc99cc;

I imagine you've already figured out that "border-left" tells the browser that we're working with the left border. When using STYLE, each side of the table or cell is done individually, left, right, top, and bottom. "Thin" is the size of the border--you can use either thin, medium, or thick, or you can simply use pixels. Here's the same table with a styled border size of 5 pixels:

Isn't this cool?

You would write this as 5px in the code.

"Dashed" is the particular style of the border. You can use dashed, dotted, solid, groove, ridge, inset, or outset. There may be more, but I don't know them. If you do, e-mail me, I'm always up for learning new things. Here are some examples for you:

Here is a table with a thin, solid border.

Here's another with a medium, dotted border.

You get the idea. The next thing you'll see is the hex code for the color I used--#CC99CC. You may use hex codes, color names, or RGB values... but I won't go into those. Just remember, separate the "directions" for each side with a semicolon, and enclose the whole thing in quotes.

^top

Back to HTML tutorials