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:
| Name | E-Mail Address | Phone Number |
| Joe Bloggs | joe.bloggs@hotmail.com | 555 1234 |
| John Smith | john.smith@yahoo.com | 555 4321 |
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.
Tables Challenge Solution
Your new table (with one more row) should look something like this:
<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>
<tr>
<td>
James Bond
</td>
<td>
<a href="mailto:jamesbond@yahoo.com">jamesbond@yahoo.com</a>
</td>
<td>
857 4630
</tr>
</table>If it doesn’t look like that, then go back to the previous page and look at the example of a single row again, then try to add another row. If you got it right, then well done!
Tables can include practically any other HTML tag or element, for example, images or links. Let’s take a look at another example – a price list of a shop that sells chairs.
<html>
<head>
<title>Chairs</title>
</head>
<body>
<table width="50%" align="center">
<tr>
<td>
<b>Title</b>
</td>
<td>
<b>Picture</b>
</td>
<td>
<b>Price</b>
</td>
</tr>
<tr>
<td>
Small Chair
</td>
<td>
<img src="small.jpg" alt="small chair">
</td>
<td>
$39.99
</td>
</tr>
<tr>
<td>
Large Chair
</td>
<td>
<img src="large.jpg" alt="large chair">
</td>
<td>
$99.99
</td>
</tr>
</table>
</body>
</html>For some practice, take a look at that code and see if you can work out how many rows it has, and how many cells there are within each row. Once you’ve done that, read on…
Again, there are 3 rows (the header row, then one for the small chair and one for the large chair), and 3 cells (name, picture and price) in each. For one last practice, try to add an extra cell in each row into that table for the size of the chair. Remember, you need to add the right tags in each row, otherwise it won’t work.
The completed table should look something like this:
<html>
<head>
<title>Chairs</title>
</head>
<body>
<table width="50%" align="center">
<tr>
<td>
<b>Title</b>
</td>
<td>
<b>Picture</b>
</td>
<td>
<b>Price</b>
</td>
<td>
<b>Size</b>
</td>
</tr>
<tr>
<td>
Small Chair
</td>
<td>
<img src="small.jpg" alt="small chair">
</td>
<td>
$39.99
</td>
<td>
2 feet
</td>
</tr>
<tr>
<td>
Large Chair
</td>
<td>
<img src="large.jpg" alt="large chair">
</td>
<td>
$99.99
</td>
<td>
4 feet
</td>
</tr>
</table>
</body>
</html>Reader Feedback
Just as I was getting ready to finish the tutorial, I got an email from Marie, who had read the earlier parts of the tutorial and had a question regarding the <font> tag. She wanted to know where she could find a chart or list of commonly used hexadecimal color codes. To clarify that, you might remember that font colors usually use a sequence of numbers and letters, eg: <font color=”#00000″> would represent black.
While you can use names like “red” or “blue” for common colors, for different colors or shades you need to use these color codes. I’ve had a look around for a chart or diagram, and the best I could find was this one. I hope that helps to answer your question Marie!
Where to now?
Now that you have a basic understanding of HTML and the concepts that surround it, it’s time to expand on that knowledge a little. There are plenty of aspects you can learn about – to do that, I recommend you take a look at Sams Teach Yourself Web Publishing with HTML and XHTML in 21 Days, by Laura Lemay.
Or you could learn about some other languages that help make the Web what it is. Try some tutorials on server-side languages, which give you more power and flexibility than HTML could ever give, and probably more than you imagine possible:
- Getting Started with ASP
- Building a Database-Driven Web Site Using PHP and MySQL
- Programming PERL 101
You could also take a look at a client-side language, which allows you to create various clever and useful effects in the visitor’s browser:
This section now concludes the series – I hope it has been beneficial to you and that you’ve picked up plenty of HTML along the way. As you’ve probably guessed, there’s a lot still to learn, but this tutorial should provide you with the basic knowledge and understanding required to go further. Please visit the SitePoint Community Forums with any questions, or feel free to email me with any comments or suggestions you might have.
James Ussher-SmithJames is a student and freelance Web developer, specialising in database driven Websites. He is also developing a powerful link directory script, SideLinks.
