HTML Tutorial 05

Ok, so we've covered most of the basics. There are a few more simple constructs that you will find yourself using as you get more adept at HTML. One of the most widespread of these is the table. Most people cringe when they hear about tables because at their most basic they are simple and boring. However, tables are essential for layout of web pages. If you view the source code of most tables you will find that there are tables on almost every page you look at. To view source code in Internet Explorer click the 'View' menu and select 'Source'. This will bring up a Notepad page with the web page's HTML source code. This is a really helpful trick and viewing the code of other people's pages is a good way to figure out how HTML works. Note, however, that complex web pages (such as mine :) will have all sorts of funky code. Half of the reason my source code looks so convoluted is that I use PHP to code my pages. See the PHP tutorial in the Tech section if you want to get a better idea of how it works. PHP is a dynamic scripting language that allows me to give instructions to the server to generate the HTML of my pages and alter their content. It is a bit more advanced than this tutorial, however, so I'll just introduce you to the concept at this point. You will find lots of tables in my code, however. Another simple thing you will notice in source code are comments. HTML comments are remarks left in the HTML code that are not displayed on the page. Comments are very simple and are delimited by the comment tag. Try adding the following code to your HTML page:

<!-- Just a comment -->

and you will notice that no matter where you place the code, it will not display. You can use comments to keep track of your work in case you have to come back and edit, or also to leave remarks for anyone viewing your source code. But I digress, back to tables.

Tables are composed of three basic elements:

1. The table
2. Rows in the table
3. Cells in the row

Think of this in the same way you would think of a section of an Excel worksheet. Lets start by creating a simple table that looks like this:

This is a very simple table. To delimit the table we're going to need to use the <table> and </table> tags. These will mark the start and the finish of each table. Once we've marked the start and finish of the table we'll need to include some rows. Each table row is delimited by the <tr> and </tr> tags. Each row will then contain one item (or piece of table data) that is listed with a <td> and </td> tag. These tags surround text, links, or images contained in the piece of table data. To make our first table we'll use the following code, note the 'border=' attribute in the code, this will allow us to display a one pixel border around the table so we can see more clearly what we're doing:

<table border="1">
<tr><td>My first table</td></tr>
<tr><td>It has two rows!</td></tr>
</table>

Very simple. You can use an unlimited number of cells in each row, but be sure they add up so you don't have empty spaces left over where you should have a piece of table data (some browsers will really screw up your table display if this is the case). For example, if your first row has two cells (or table datas) make sure that each other row also has two cells. Lets try a more complex table to make a display like this:

To do this simply use the following code:

<table border="1">
<tr><td>Price</td><td>Number</td><td>Total</td></tr>
<tr><td>$1.00</td><td>2</td><td>$2.00</td></tr>
<tr><td>$3.00</td><td>4</td><td>$12.00</td></tr>
</table>

Now, in this table, I've got headers (Price, Number, and Total) that should really be displayed in some sort of bold fashion to make them stand out. While I could use <b> and </b> tags around my code to make it bold, it is much easier to use the <th> and </th>, or table header tags, instead of table data tags (<td> and </td>) to change the cells from pieces of table data to table headers. Change the code to the following:

<table border="1">
<tr><th>Price</th><th>Number</th><th>Total</th></tr>
<tr><td>$1.00</td><td>2</td><td>$2.00</td></tr>
<tr><td>$3.00</td><td>4</td><td>$12.00</td></tr>
</table>

And take a look at the results. What you should get is:

Note that you can also use images and links in your table. We could make a table like this:

	Madirish.net
URL:	http://www.madirish.net

Using this code (make sure you still have the image from the previous lesson):

<table border="0">
<tr><td><img src="jkeane.jpg"></td><td>Madirish.net</td></tr>
<tr><td>URL:</td><td><a href="http://www.madirish.net">http://www.madirish.net</a></td></tr>
</table>

This table looks sort of cruddy though, lets say I want the image on the left and both lines of text to the right of the image. I can do this one of two ways. I can either use this code:

<table border="0">
<tr><td><img src="jkeane.jpg"></td><td>Madirish.net<BR><a href="http://www.madirish.net">http://www.madirish.net</a></td></tr>
</table>

Which ends up looking like this:

Madirish.nethttp://www.madirish.net

and shrink the table to one row with two cells, or I can change how much area my cells take up. To demonstrate this principle lets make a table that looks like this:

In order to do this I'm going to have to break my rule about equal number of cells in each row. However, to make the page look right what I'm going to have to do is use HTML to display a table with two rows, the first row has two cells, the first cell spans two rows, the second cell is only in the first row. The second row has one cell only. We use the 'rowspan=' attribute to specify that a cell will cover more than one row like this:

<table border="1">
<tr><td rowspan="2">Box 1</td><td>Box 2</td></tr>
<tr><td>Box 3</td></tr>
</table>

The other similar attribute is 'colspan=' to change the number of columns a cell will cover. So in order to make a table that looks like this:

We use the following code:

<table border="1">
<tr><td colspan="2">Box 1</td></tr>
<tr><td>Box 2</td><td>Box 3</td></tr>
</table>

And its just that simple :) There are lots of other attributes you can use in tables, such as 'height=', 'width=' and 'align=' and these can make tables far more complex. For instance, if I wanted the table above to appear to cover the entire available area on the page I could use the 'width=' attribute and specify 100%, you can also use pixels to define height and width, so if I wanted a table that was 75 pixels high and spanned the width of the entire available area on the page I could use the following code:

<table border="1" height="75" width="100%">
<tr><td colspan="2">Box 1</td></tr>
<tr><td>Box 2</td><td>Box 3</td></tr>
</table>

Which displays like this:

Play around with the table code. Notice when it breaks and when it works. You can use a lot of different combinations of code, and just like lists, you can actually nest tables within tables, but this should be enough to get you started. Enjoy.