Making HTML Tables!
HTML Tables are by far one of the best HTML statements ever created. The ability to format a web page with table statements is amazing! Learn 'em, use 'em, and love 'em!
Basic Tables:
Let us take our grocery list that we used in the list tutorial and make it into a table this time. We'll place the items in the first column and the prices in the second column.
| Eggs | $0.79 |
| Milk | $2.59 |
| Bread | $1.29 |
| Soda | $1.19 |
This is the code that made it happen. The actually code is on the left and the English description is on the right. The description is indented in order to show the "structure" of the table statement.
|
Confused? Ok, lets take a look at the table above. This table is actually pretty simple. You build tables very much the same way you read a book; from left to right and from top to bottom. The table begins with a <table> tag and ends with a </table> tag. Each row begins with a <tr> tag and ends with a </tr> tag. Each piece of table data begins with a <td> tag and ends with a </td> tag.
But, that's not a table, you say! It doesn't have a border! Actually, it is a table. It's a table with no border or a BORDER="0". This concept is very important when you want to use TABLE statements to format your web pages. You don't always want a thick border. Ok, so lets make a table with a BORDER this time.
| Eggs | $0.79 |
| Milk | $2.59 |
| Bread | $1.29 |
| Soda | $1.19 |
The only difference between this table and the previous is the <table> statement which looks like the following.
<table border="7">
Pretty easy, hu? The size of the border is represented in pixels. Ok, now lets get a little more CELLSPACING. That is the spacing between our table cells. You can also think of this as the wall thickness between table cells.
| Eggs | $0.79 |
| Milk | $2.59 |
| Bread | $1.29 |
| Soda | $1.19 |
That looks much better. Can you see the difference? Again the only change is in the <table> statement which looks like the following.
<table border="7" cellspacing="7">
The CELLSPACING, like the BORDER, is also measured in pixels. But, the text looks too close to the table walls, you say! Ok, ok, we can fix that too. It's called CELLPADDING. It's the space between the cell contents and the edges of the cell walls.
| Eggs | $0.79 |
| Milk | $2.59 |
| Bread | $1.29 |
| Soda | $1.19 |
Ah, now is that the way you wanted? No? Well, I had to exaggerate the numbers a bit, but that was only to try and make a point. I hope you can see the differences. The previous table was created with the <table> statement shown below.
<table border="7" cellspacing="7" cellpadding="7">
Framing Images:
Now we want to get into the more fun stuff. Framing images is a great way of enhancing your pictures. It makes them seem to jump right out of the page. Here is my 5 second masterpiece.
 |
Pretty cool , it even makes my picture look good. Here's the code that made it.
<table border="7" alt="">
<tr>
<td><img src="image.gif"></td>
</tr>
</table>
The <tr> tag and the </tr> tags can be left out if you wish. It will still work just fine. HTML purists will probably argue that these tags need to be in there. If you feel that way, as I usually do, then use them.
Or you can also frame your pictures with text as shown below.
 |
What a Masterpiece! |
Netto, hu! The code is shown below.
<table border="7" cellpadding="10">
<tr>
<td><img src="image.gif" alt=""></td>
<td>What a<br>Masterpiece!</td>
</tr>
</table>
I have one more note on framing images. If your having problems centering your image try the following.
<td align="center"><img src="image.gif"></td>
Framing Links:
You can also put links inside a table. In fact you can put your whole page inside a bunch of table commands if you want to and by using BORDER="0" no one could really tell. Why would you want to do that, you ask? For formatting images and text together on your page; think about it. Ok, back to the link framing.
| Google.com | Yahoo! |
| JJW Design | IP Roundup |
Here's the code that did it.
<table border="7" cellpadding="10">
<tr>
<td><a href="http://www.google.com/">Google.com</a></td>
<td><a href="http://www.yahoo.com/">Yahoo!</a></td>
</tr>
<tr>
<td><a href="http://www.jjwdesign.com/">JJW Design</a></td>
<td><a href="http://www.iproundup.com/">IP Roundup</a></td>
</tr>
</table>
Well, I hope you have enjoyed this little section on the <table> statement. There's a whole lot more you can do with the <table> statement than what is possible in this tutorial. Still, I hope this has helped.