HTML Lesson


Advanced Page Building
Great! You've been through message board html and basic page-making html. You know how to do that. I'm proud of you.

On the menu for tonight's html lesson are tables, image-mapping, and a little CSS for dessert. Shall we get started?


Tables
Tables consist of a series of tags. The tags themselves aren't too complicated, but they can quickly get confusing if you have a large table. The tags are <table></table>, <tr></tr>, and <td></td>. There is also a <th></th> tag, but it isn't necessary. First of all, you'll need a page to put the table in. You should know how to do that from the Basic Page Building lesson. We'll call our page Alejandro, since it will be more sophisticated than the practice page in the previous lesson.
<html>
<head>
<title>Alejandro</title>
</head>
<body bgcolor="#000000" text="#0000cc" link="#999966" vlink="#CC9966" alink="#90EE90">
<font face="Arial" size=4>
<center>

<center>
</font>
</body>
</html>
Okay. There's a page. It's pretty boring. Add a table tag.
<html>
<head>
<title>Alejandro</title>
</head>
<body bgcolor="#000000" text="#0000cc" link="#999966" vlink="#CC9966" alink="#90EE90">
<font face="Arial" size=4>
<center>

<table></table>

</center>
</font>
</body>
</html>
Good. Nothing will show up on the page yet because you have a table with no rows or data cells. That's what the <tr></tr> and <td></td> tags are. TR is "table row" and TD is "table data." We will add a table row with one data cell. You'll have to put something in the cell if you want it to show up, so we'll make it say "warm fuzzy."
<html>
<head>
<title>Alejandro</title>
</head>
<body bgcolor="#000000" text="#0000cc" link="#999966" vlink="#CC9966" alink="#90EE90">
<font face="Arial" size=4>
<center>

<table>
<tr>
<td>Warm Fuzzy</td>
</tr>
</table>

</center>
</font>
</body>
</html>
Alejandro is still pretty boring.

You can add as many data cells inside the table row as you like, and as many rows as you like. You have to make sure, though, that you have the same number of cells in each row. The easiest way to do that is to make the first row and to copy/paste it before you insert any text.

To expand our table, let's make it two rows of two cells, and put "warm," "fuzzy," "cold," and "prickly" each in its own cell. Let's also add a border by putting the attribute border=1 inside the first table tag.
<html>
<head>
<title>Alejandro</title>
</head>
<body bgcolor="#000000" text="#0000cc" link="#999966" vlink="#CC9966" alink="#90EE90">
<font face="Arial" size=4>
<center>

<table border=1>
<tr>
<td>Warm</td> <td>Fuzzy</td>
</tr>

<tr>
<td>Cold</td> <td>Prickly</td>
</tr>
</table>

</center>
</font>
</body>
</html>
Alejandro isn't too exciting. Let's fix that.

You can also use attributes in the initial table tag to change the width of the table. This is done the same way the border is inserted; add a width=n attribute, where n is the width in pixels or percentage of screen area. Let's make our table take up 25% of the screen.
<html>
<head>
<title>Alejandro</title>
</head>
<body bgcolor="#000000" text="#0000cc" link="#999966" vlink="#CC9966" alink="#90EE90">
<font face="Arial" size=4>
<center>

<table border=1 width=25%>
<tr>
<td>Warm</td> <td>Fuzzy</td>
</tr>

<tr>
<td>Cold</td> <td>Prickly</td>
</tr>
</table>

</center>
</font>
</body>
</html>
There you go! Play around with Alejandro until you're comfortable with tables. Ready to learn imagemapping?



Previous     Next    
HTML Home     Home