Slacker's Guide to HTML: HTML Tables

Table Intro

You can make tables in HTML easily by learning just a few simple tricks. The first hurdle in understanding HTML tables is to grasp the structure and understand the meanings of the individual tags. There are really only three different tags you can use when constructing a table. Those three tags are the table tag, the tr, and the td tag. tr stands for "table row" and td stands for "table data". In addition to those three tags you also need to know one new term, "table cell". A table cell is the equivalent of table data. The table be a set of boxes and each box will be a cell.

The table is set up with rows and columns. Rows go from left to right. Columns run from top to bottom. Therefore the first cell in a table will be the top left. The second cell will be to the right of the first.

This is a Table

Look at the stunning graphical representation I included. With that diagram you can see the relationship between rows, columns, and cells.

There are some other tags you can use with HTML tables, but we won't get to them just yet. You can make a perfectly respectable table without the other tags. We will focus on the basics for now.

Basic Table

Now I am going to show you a basic table so you can see how one looks:

Good Bad Ugly

Metallica, then Metallica, now Dee Snider

The Beatles Wings Ringo

I gave this table a border with a thickness of 1 pixel because without a border it would be real difficult to explain it to you because the borders between the cells would be invisible. You can choose to have a border with a thickness of 0 pixels if you wanted the border to be invisible.

And now let's take a good look at the HTML code that created that table:

<table border="1"> 
        <tr> 
                <td>Good</td> 
                <td>Bad</tdgt; 
                <td>Ugly</td> 
        </tr> 
        <tr> 
                <td>Metallica, then</td> 
                <td>Metallica, now</td> 
                <td>Dee Snider</td> 
        </tr> 
        <tr> 
                <td>The Beatles</td> 
                <td>Wings</td> 
                <td>Ringo</td> 
        </tr> 

</table>

The Table Tags

The opening tag is table and it has an attribute border="1". That attribute is not required. Without the border attribute, though, you will be stuck with the default setting.
The next tag we see is tr which stands for table row. Rows go from left to right so that table row tag will encompass all the table data cells in the row. The first row includes "Good", "Bad", and "Ugly". As you can see from the code there is an opening table data tag (td) and a closing table data tag (/td) around each of those three items. They are each cells inside the first row.
Then comes the closing table row tag, which is /tr. After that tag there must be another opening table row tag. Withot another opening tag there can be nothing else because what the hell else should come after the end of a row except fo another row?
In the second table row we have three more table data cells. These include the words "Metallica, then", "Metallica, now", and "Dee Snider". And then we have a closing table row tag, (/tr).
The last row is much the same as the previous row.
Finish it all up with a closing table tag, (/table).

Alright, now for the first of the "extra" tags.
You can replce td with th when coding for a table cell. While the table data tag creates a cell with no text formatting, the table header tag (th) will create a cell with bold text inside. All text inside a table header tag will be boldened automatically.
By using the table header tag you can create cells which act as headers for cells which fall below.

Rowspan and Colspan

Two other "extra" things we can do with tables is create cells and row which span multiple cells or rows. Put in simpler terms for those of you who are drinking right now: You can make table rows which span across multiple columns and we can make table data cells which span across multiple rows.
The element which forces a cell to span across multiple rows is rowspan and it has an attribute which sets the number of rows it will span. Not exactly rocket science. Rowspan = number of rows to span.
The element which forces a row to span multiple columns is colspan and it has an attribute which sets the number of columns it will span. Once again, this is not terribly complicated.

<table border> <tr> <td rowspan="2">Crap</td> <td>Tampons</td> <td>STD's</td> <td>AM Radio</td> </tr> <tr> <td>Red Lights</td> <td>Laws</td> <td>School</td> </tr> </table>

Crap Tampons STD's AM Radio

Red Lights Laws School

Above we have some HTML and we have the table that the HTML produces. Look at it. Barring some sort of developmental disorder you should realize that one column has spanned two rows. The item which spanned two rows has the word "Crap" in it.
And you can see in the HTML that the rowspan attribute was attached to the first table data cell, which makes complete sense since the first cell is the top left cell and, as you can see, the top left cell extends downward through an extra row.

Alright, let's take a look at the colspan attribute. This attribute forces the cells to span across...COLUMNS!

<table border="1"> <tr> <td COLSPAN=2>20-something</tdH> <td COLSPAN=2>40-something</td> </tr> <tr> <td>Rock</td> <td>Roll</td> <td>Eat</td> <td>Sleep</td> </tr> <tr> <td>Work</td> <td>Play</td> <td>TV</td> <td>Death</td> </tr> </table>

20-something 40-something

Rock Roll Eat Sleep

Work Play TV Death

Alright. In this example we have two examples of colspan in action. Both instances of colspan are in the first row. The first instance goes across the first two columns and the second instance goes across the third and fourth column.

Sample Tables

Now I will go through a few example tables and the code accompanying them, without explanation. Everything you need to know I have already said, so below I will just show you some sample tables to show you some of the things you can do.

<table border> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>D</td> <td>E</td> <td>F</td> </tr> </table>

A B C

D E F

<table border="1"> <tr> <td>Item 1</td> <TD ROWSPAN=2>Item 2</td> <td>Item 3</td> </tr> <tr> <td>Item 4</td> <td>Item 5</td> </tr> </table>

Item 1 Item 2 Item 3

Item 4 Item 5

<table border="1"> <tr> <TH ROWSPAN=2>Head1</TH> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> <td>Item 4</td> </tr> <tr> <td>Item 5</td> <td>Item 6</td> <td>Item 7</td> <td>Item 8</td> </tr> <tr> <TH>Head2</TH> <td>Item 9</td> <td>Item 10</td> <td>Item 69</td> <td>Item 11</td> </tr> </table>

Head1 Item 1 Item 2 Item 3 Item 4

Item 5 Item 6 Item 7 Item 8

Head2 Item 9 Item 10 Item 69 Item 11

<table border="1"> <tr> <td> <TH ROWSPAN=2> </TH> <TH COLSPAN=2>Average</TH> </td> </tr> <tr> <td> <TH>Height</TH> <TH>Weight</TH> </td> </tr> <tr> <TH ROWSPAN=2>Gender</TH> <TH>Males</TH> <td>1.9</td> <td>0.003</td> </tr> <tr> <TH>Females</TH> <td>1.7</td> <td>0.002</td> </tr> </table>

Average

Height Weight

Gender Males 1.9 0.003

Females 1.7 0.002

Those four examples above cover the spectrum. Anything I didn't specifically explain in this guide can be deduced from those samples. The possibilities limitless with tables - you can make as man rows and cells as you want. Those exmaples should give you a starting point, though.

Tables for Design & Layout

Tables have a very important function that every real HTML coder should know: with HTML tables you can design the entire layout for your site. Just as the tables above are separated into cells and rows you can also separate the sections...the sidbar, the top, the header, the footer, etc.
For example, a table cell with a rowspan which equals the number of rows could act as a header.
Let's look at an example table which would create a good layout with a left sidebar, a header, a footer, and a main section.

<table border="1"> <tr><td colspan="2">Header</td></tr> <tr><td width="20%">Sidebar</td><td width="80%">Main</td></tr> <tr><td colspan="2">Footer</td></tr></table>

Header

Sidebar Main

Footer

You should assume that the sidebar and main content section are much bigger than in the example. Otherwise your site would suck.

Good	Bad	Ugly
Metallica, then	Metallica, now	Dee Snider
The Beatles	Wings	Ringo