Lesson 3 - Lists & tables

Tables can be used for many things, not just for laying out columns of data etc. Take a look at the bottom of each of these lessons and you will see a set of 'buttons' for the previous lesson, next lesson & back to the home page. This is a simple table but I am using it as a button bar - because I can !

Simple tables

Lets get straight in and create a simple table, like the one I use for navigation around these lessons. Fire up your trusty editor and put the following code into the BODY area. (OK, I said I wouldn't say that again, but ......)

<TABLE>
</TABLE>

These are the required tags for creating a table. As with most tags, there are attributes that can be applied, but we will work those out as we go on.

Defining rows

To define a row in a table, use the Table Row tag which looks like this <TR> and has a closing tag which is this </TR>. Every row in the table must be surrounded by a pair of these tags. Let us add a single row to our skeleton table. The code needs to be changed to that shown below :

<TABLE>
<TR>
</TR>
</TABLE>

Some people like to use indentation to make tables stand out better. This is fine and I agree that it makes things more readable. However, all that blank space has to be downloaded, scanned and acted upon (ie ignored) by the HTML parser in the browser. Bear this in mind. I'm all in favour of readable code when defining my pages, and I will probably get around to running a filter to remove the whitespace before uploading the page. Alternatively, keep your pages short to reduce the overhead.

So far we have nothing in our actual table, so we need to define a column (or two) in the row. Read on....

Defining columns

A column is defined using a tag - no surprises there then, but not a <TC> tag as one might expect, but a <TD> and its closing tag </TD>. I suspect that TD stands for Table Down ? - who knows. Lets add a column to our row.

<TABLE>
<TR>
<TD>
</TD>
</TR>
</TABLE>

And finally, add something into the column, I shall put my name in mine, you can put your name, cue the obvious jokes from the back !

<TABLE>
<TR>
<TD>
My Name (Sorry !)
</TD>
</TR>
</TABLE>

And so our table looks like this :

My Name (Sorry !)

It doesn't look like a table does it ? In fact, it looks just like some text on a page. We shall remedy that later, but for now we shall add a column header

Column headers

Column headers require a row of their own. This is because they take up a single row in the table. So we need to add a row to the table, I won't show that step now as we know how to do it ! A header is also a column in the row, so do we need to add a column tag ? The answer is no, we add a new tag called a table header tag and this is what it looks like <TH> and its closing tag looks like this </TH>. Lets add these to our table and put some text into the header as well. Our table's code should look like this :

<TABLE>
<TR>
<TH>
Column Header
</TH>
</TR>
<TR>
<TD>
My Name (Sorry !)
</TD>
</TR>
</TABLE>

And so our table looks like this :

Column Header
My Name (Sorry !)

As you can see, the header has been defined in bold text and is centre justified within the cell width. (We can't really see that here as we don't have any borders showing the cell widths !). We could use TD attributes to do the same thing, but using TH saves typing and is less effort - get the browser to do it for you !

Another thing, our simple table is starting to spread out a bit (see above) at least the HTML source is. As I mentions in the previous lesson, the format of the source code is mostly ignored when rendered by the browser, we can save some room in our source file and reduce the time to download by re-organising as follows :

<TABLE>
<TR>
<TH>Column Header</TH>
</TR>
<TR>
<TD>My Name (Sorry !)</TD>
</TR>
</TABLE>

And our table still looks like this :

Column Header
My Name (Sorry !)

In fact, as this is a simple one row, one column (not including headers) table, we can refine it thus :

<TABLE>
<TR><TH>Column Header</TH></TR>
<TR><TD>My Name (Sorry !)</TD></TR>
</TABLE>

And our table still looks like this :

Column Header
My Name (Sorry !)

Never forget, the browser throws away most of your formatting

Table attributes

So, our simple table now has headings and a single column. It still looks like text on the page, so lets tart it up. We shall use TABLE level attributes to affect how the entire table looks. Table attributes are added to the TABLE tag.

To add a border around the table, add the BORDER attribute and give it a size :

<TABLE BORDER="2">
<TR><TH>Column Header</TH></TR>
<TR><TD>My Name (Sorry !)</TD></TR>
</TABLE>

Our table is now starting to look like one !

Column Header
My Name (Sorry !)

We can alter the background colour of the table to make it stand out from the rest of the page. We use the BGCOLOR attribute to do this - we must also specify a colour :

<TABLE BORDER="2" BGCOLOR="#FFC0CB">
<TR><TH>Column Header</TH></TR>
<TR><TD>My Name (Sorry !)</TD></TR>
</TABLE>

Our table is now starting to stand out from the crowd !

Column Header
My Name (Sorry !)

The following table is a list of commonly used table attributes which should be viewable on most browsers :

Here is the code to extend our small table to be 40% of the browser width :

<TABLE BORDER="2" BGCOLOR="#FFC0CB" WIDTH="40%">
<TR><TH>Column Header</TH></TR>
<TR><TD>My Name (Sorry !)</TD></TR>
</TABLE>

And this is the result :

Column Header
My Name (Sorry !)

Row attributes

As you might have guessed by now, row attributes are applied to the TR tag to alter how an individual row looks in the browser. You can change the colour, size, width etc

The following table is a list of commonly used table attributes which should be viewable on most browsers :

Lets change our table so that the non-header row has a different coloured background, here is the code to do it :

<TABLE BORDER="2" BGCOLOR="#FFC0CB" WIDTH="40%">
<TR><TH>Column Header</TH></TR>
<TR BGCOLOR="#CCFFCC"><TD>My Name (Sorry !)</TD></TR>
</TABLE>

And this is the result :

Column Header
My Name (Sorry !)

Column attributes

First I think we better extend the simple table so that it has a few more columns. Take your code and change it to the following :

<TABLE BORDER="2" BGCOLOR="#FFC0CB" WIDTH="80%">
<TR>
<TH>Column One</TH>
<TH>Column Two</TH>
<TH>Column Three</TH>
</TR>
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
<TD>Cell 3</TD>
</TR>
<TR>
<TD>Cell 4</TD>
<TD>Cell 5</TD>
<TD>Cell 6</TD>
</TR>
</TABLE>

Which gives the following table

Column One	Column Two	Column Three
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

So the whole table is a nice (?) pinky colour, lets change some of the columns to a different colour, first change column one to be a nice (?) light blue, as follows, you change the bits in red :

<TABLE BORDER="2" BGCOLOR="#FFC0CB" WIDTH="80%">
<TR>
<TH>Column One</TH>
<TH>Column Two</TH>
<TH>Column Three</TH>
</TR>
<TR>
<TD BGCOLOR="#99FFFF">Cell 1</TD>
<TD>Cell 2</TD>
<TD>Cell 3</TD>
</TR>
<TR>
<TD>Cell 4</TD>
<TD>Cell 5</TD>
<TD>Cell 6</TD>
</TR>
</TABLE>

Column One	Column Two	Column Three
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

But that's not right, it has only changed the first cell, not cell 1 and cell 4 which are both in the first column - what's going on ?

When we set a whole row to a different colour, we set all cells in that row, however, when we do the cells, we have to do them individually - because there isn't a tag that encompasses the whole column - shame :o(. We have to specify the cell colour for each cell in the first column, as follows. Again, you add the bits in red :

<TABLE BORDER="2" BGCOLOR="#FFC0CB" WIDTH="80%">
<TR>
<TH>Column One</TH>
<TH>Column Two</TH>
<TH>Column Three</TH>
</TR>
<TR>
<TD BGCOLOR="#99FFFF">Cell 1</TD>
<TD>Cell 2</TD>
<TD>Cell 3</TD>
</TR>
<TR>
<TD BGCOLOR="#99FFFF">Cell 4</TD>
<TD>Cell 5</TD>
<TD>Cell 6</TD>
</TR>
</TABLE>

Column One	Column Two	Column Three
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

So far I have only discussed the colouring of cells, there are other attributes that can be applied to TD tags, these are defined in the following table :

Nested tables

Tables can be nested inside each other. I have saved this for a later exercise. Click here to go to it

Spanning rows & columns

A row can span more than one column. This is useful when you have a table is not a regular grid where each and every column has the same number of rows. Take a look at this table which is part of the lists lesson (click the back button on your browser to return here)

Did you notice how some columns are more than a single row deep ? This is called ROW SPANNING and occurs when you tell the browser, via your HTML, that this cell will span more than a single row. Lets do it to our example table which needs to be changed to look like the following. I have removed the BGCOLOR settings for the first column as well.

<TABLE BORDER="2" BGCOLOR="#FFC0CB" WIDTH="80%">
<TR>
<TH>Column One</TH>
<TH>Column Two</TH>
<TH>Column Three</TH>
</TR>
<TR>
<TD ROWSPAN=2>Cell 1</TD>
<TD>Cell 2</TD>
<TD>Cell 3</TD>
</TR>
<TR>
<TD>Cell 4</TD>
<TD>Cell 5</TD>
<TD>Cell 6</TD>
</TR>
</TABLE>

Column One	Column Two	Column Three
Cell 1	Cell 2	Cell 3
	Cell 4	Cell 5	Cell 6

Notice how that has seriously screwed up our nice neat layout ? When you specify that a cell spans more than a single row, you have to make sure that there are still the same amount of rows & columns in the table. As I said that our cell will span 2 columns, I need to remove a cell from that (or a following) row to keep things even, as follows :

<TABLE BORDER="2" BGCOLOR="#FFC0CB" WIDTH="80%">
<TR>
<TH>Column One</TH>
<TH>Column Two</TH>
<TH>Column Three</TH>
</TR>
<TR>
<TD ROWSPAN=2>Cell 1</TD>
<TD>Cell 2</TD>
<TD>Cell 3</TD>
</TR>
<TR>
<TD>Cell 5</TD>
<TD>Cell 6</TD>
</TR>
</TABLE>

Column One	Column Two	Column Three
Cell 1	Cell 2	Cell 3
	Cell 5	Cell 6

You can see now that cell 4 (the first cell in the following row) has been removed and the table is once more looking normal.

COLUMN SPANNING is also allowed. This specifies that a single cell spans more than one column. Lets pick on cell 2 and make it bigger to take up the room allocated for cell 3. This means that cell 3 has to be evicted from the table. Here's the code :

<TABLE BORDER="2" BGCOLOR="#FFC0CB" WIDTH="80%">
<TR>
<TH>Column One</TH>
<TH>Column Two</TH>
<TH>Column Three</TH>
</TR>
<TR>
<TD ROWSPAN=2>Cell 1</TD>
<TD COLSPAN=2>Cell 2</TD>
</TR>
<TR>
<TD>Cell 5</TD>
<TD>Cell 6</TD>
</TR>
</TABLE>

Column One	Column Two	Column Three
Cell 1	Cell 2
	Cell 5	Cell 6

Had enough yet ? Why not try combining BGCOLOR and spanning to get really fancy tables. As they say, I shall leave this as an exercise for the reader. Me, I'm off to do some lists. Read on.

Lists

There are a few list types allowed in HTML, they are :

• Unordered lists
• Ordered lists
• Definition Lists

Interestingly enough, the above is an example of an unordered list. To show the same data as an ordered list would look like this :

1. Unordered lists
2. Ordered lists
3. Definition Lists

As you can see, we have numbering on this list - and that is the only difference. As with many things, the lists can be configured to suit all tastes and each individual item can have its appearance changed to differ from the list as a whole. Lets now, see a definition list in action. Actually, the very first page of this tutorial has a good example, but here is another :

Unordered lists

Simple bulleted lists. The bullets can be solid circles (discs), 'empty' circles (circles) or squares.

Ordered lists

Lists where each item is in order. The 'bullets' are replaced by a numbering scheme.

Definition lists

A list where there is a 'heading' and a definition. You are looking at one now !

The tags used to define these three list types are as follows :

Defining lists

To define a list you first decide which list type you want, then for each type you choose a bullet type. The following tables outlines each list type and the allowed bullet types and shows an example of each. I have discovered that the TYPE parameter must be specified in lower case or you always get disc bullets - beware.