Beginners' HTML - Part 3

Welcome to Part 3 of the tutorial! At the end of Part 2, I left you with a challenge. So let's first explore the solution.

Challenge Solution

The challenge I set last week was for you to add some links to the pages we'd created, so that users could navigate easily between our 3 pages. We had three pages - the main page, the links page and the pictures page.

On the main page, you should have added some code that looks something like this:

 <a href="links.html">Favorite Links</a>
 <br>
 <a href="pictures.html">Pictures</a>

On the links page, you should have something similar to:

 <a href="index.html">Main Page</a>
 <br>
 <a href="pictures.html>Pictures</a>

And finally, on the pictures page you should have added code resembling this:

 <a href="index.html">Main Page</a>
 <br>
 <a href="links.html">Favorite Links</a>

So now, if you load any one of these pages into your browser, you'll see that you (and your visitors!) can easily move between the pages.

Tables

Everything you read has structure to it, from that boring shopping list in your pocket, to the latest magazine on your desk. Just like these items, HTML pages should have a structure. I'm sure you could manage to construct a shopping list without too much trouble, but how about a magazine? If we use HTML in the way its original creators intended, the amazing, graphics-intensive sites we see today wouldn't be possible - all we'd be able to produce would be plain, dull pages.

Tables make up the basic layout of almost every Web page in existence today. On the main page of SitePoint.com, I counted 34 separate tables, all embedded within each other. This shows just how important tables are to both the design and the content elements of a Web page.

To create a table, you will need to use the <table> tag, along with its corresponding </table> tag. There are a number of optional attributes you can specify in the <table> tag but these are not necessary (yet!).

Once you have the <table> tag in place, the next tag you need is the <tr> tag. The <tr> tag creates a table row, which can contain one or more cells (or columns) of information. To create these individual cells, which can contain almost any other HTML element, you can use the <td> tag. You can make as many cells as you want, but each row of the table should have the same number of cells as all the others. So let's take a look at a basic table:

<table>
 <tr>
   <td>
     <b>Name</b>
   </td>
   <td>
     <b>E-Mail Address</b>
   </td>
   <td>      
     <b>Phone Number</b>
   </td>
 </tr>
 <tr>
   <td>
     Joe Bloggs
   </td>
   <td>  
     <a href="mailto:joe.bloggs@hotmail.com">joe.bloggs@hotmail.com</a>
   </td>
   <td>
     555 1234
   </td>
 </tr>
 <tr>
   <td>
     John Smith
   </td>
   <td>
     <a href="mailto:john.smith@yahoo.com">john.smith@yahoo.com</a>
   </td>
   <td>
     555 4321
   </td>
 </tr>
</table>

Now, I know that looks confusing, so let's go through it section by section. First, we have the <table> tag, which is followed by 3 seperate table rows. Let's take a closer look at one of these rows:

 <tr>
   <td>
     <b>Name</b>
   </td>
   <td>
     <b>E-Mail Address</b>
   </td>
   <td>
     <b>Phone Number</b>
   </td>
 </tr>

First we have the <tr> tag, which starts the new row. We then have a <td> tag, which starts a new cell within that row. In this cell can be anything at all, but in this case it contains a bolded title, "Name". This is followed by the closing </td> tag, which ends the table cell, ready for another one. Then there are two more cells, followed by the end of the row.

That example will produce a table like this:

As you can see, it has 3 rows and 3 columns (or cells) in each row.

Table Size

By default, a table will be just large enough for the elements it contains to fit within it, but no bigger or smaller. You can change this default using various 'height' and 'width' attributes. You can specify a height or width either in pixels, or in percentage of the browser window. For example:

• <table height="500" width="247"> will create a table of height 500 and width 247
• <table width="100%"> will create a table that's as wide as the screen, but only as high as it needs to be to contain the elements it holds

Now here's a challenge for you. Add another row to the example table we looked at above, listing another made-up person's contact details. The answer is on the next page.