Article
Beginners' HTML - Part 3
Page: 1 2
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.