Everything you ever wanted to know about basic tables, but were afraid to ask!

What's up with this HTML tables stuff anyway? Well, it's one way to organize your data in a readable manner on your web pages. There are other ways to accomplish this, but in this forum we'll be discussing that most dreaded aspect of HTML- TABLES!

Follow along and I'll see if I can't thoroughly confuse you....

First a few basic rules to follow to make creating and troubleshooting your table a bit easier:

1. Use a border="1" value in your table tag so you can physically see the cells on the page. This tutorial uses this so you can better see what's going on as we move through the tutorial. You can remove the border attribute later if you don't want your table to have a visible border.
2. Always, and I mean ALWAYS close every table structure tag you open. Every <td>, <tr>, and <table> must have a corresponding closing tag or there's a good change that your table (and possibly the entire page) won't display. If you've ever been to a page that just displayed a blank white page chances are good that the author missed a closing tag somewhere in the table structure. Beware!

Please note that many of the table tag attributes shown here have been deprecated (that means we shouldn't use them anymore, though they still work for now) in favor of Cascading Style Sheets.

Okay, right below this paragraph is a table. His name is One. Huh? Oh, he's called One because he only has one cell and I can't spell Uh-Me-Buh. His one cell is contained in one row and one column. Say hello, One.

Fairly simple so far, right? The code for One looks like this:

<table cellpadding="2" border="3">
<tr>
<td bgcolor="#ffff00">Hi! My name is One!</td>
</tr>
</table>

So what does all that stuff mean? Going one line at a time, the first line turns the table on. It also tells the table to provide 2 pixels of space between the cell contents and the cell border (visible, or not). It also tells the table to display a 3 pixel border and to color it black. The second line starts the first (& only, in this case) table row. The third line tells the table to start a cell with a yellow background, and it contains the line "Hi! My name is One!", and then to close the cell. The fourth line closes the table row, and the last line closes the table.

NOTE: You don't have to physically write your code like the example above. I do it that way to make the code easier to read when I'm troubleshooting. I use HomeSite as my HTML editor and left to it's own devices it produces the code for One that looks like this:
<table cellpadding="2" border="3"><tr><td bgcolor="#ffff00">Hi! My name is One!</td></tr></table>  everything listed on one line.

The code examples are the same to the browser, I find it easier to read if each table element is on it's own line. You can indent the different lines if you want to. I do that when I'm nesting tables (more about that later).

Okay, now on to bigger and better things. I'd like you to meet One's sister, Two. Say hello, Two.

The only difference between One and Two (beyond gender of course) is that Two has a second cell that One doesn't have. The code for Two looks like this:

<table cellpadding="2" border="3">
<tr>
<td bgcolor="#ffff00">Hi! My name is Two!</td>
<td bgcolor="#ffff00">I'm One's Big Sister.</td>
</tr>
</table>

Two has a cousin called Tall. Like Two, Tall has two cells, but Tall's cells are stacked one over the other instead of being side-by-side on the same row. Say hello, Tall.

Here's the code for Tall:

<table cellpadding="2" border="3">
<tr>
<td bgcolor="#ffff00">Hi! My name is Tall!</td>
</tr>
<tr>
<td bgcolor="#ffff00">I'm Two's tall cousin.</td>
</tr>
</table>

Starting to see some interesting possibilities here? Let's expand our horizons somewhat and create a table with nine cells contained in three columns and three rows. It looks like this:

Here's the code for our 9 cell table:

<table cellpadding="2" border="3">
<tr>
<td bgcolor="#ffff00">Cell 1</td>
<td bgcolor="#ffff00">Cell 2</td>
<td bgcolor="#ffff00">Cell 3</td>
</tr>
<tr>
<td bgcolor="#ffff00">Cell 4</td>
<td bgcolor="#ffff00">Cell 5</td>
<td bgcolor="#ffff00">Cell 6</td>
</tr>
<tr>
<td bgcolor="#ffff00">Cell 7</td>
<td bgcolor="#ffff00">Cell 8</td>
<td bgcolor="#ffff00">Cell 9</td>
</tr>
</table>

Just to make sure we're all on the same page with columns and rows inside a table, look at the table below. Each cell tells you which column and row it resides in within the table.

Still with me? Good, let's carry on. Now suppose you have to align your data into a slightly different format? Let's say for example that you want Cell 1 and Cell 2 to be joined into one cell. How would you do that? Can you even do that? Yes you can! Here's how. Let me introduce you to two tables attributes called ROWSPAN and COLSPAN. Don't let the names and their functions confuse you. At first they seem backwards, but when you see them applied they make sense.

This seems like a good place to take a break. After you stretch your legs and drain some coffee we'll move to the next section. Like someone famous once said- "Always leave them wanting more."

<< back    continue >>

Feel the need to communicate with His Grand & Exalted Bimjoness hisself?? Well, here's where ya do it! Don't be shy. If you have something you'd like to see here, just let me know and I'll see what I can do about getting it on here.