|
|
Tutorial #8:
|
Tables - They are a little bit complicated to learn, but it is well worth the time. Tables can help you to position images and other stuff on a page, or they can be used how I am using them in this tutorial. However you use them, they are very cool.What is an example of a table?You're looking at one. I set the table so that the border would show. Tables can be used like I did on this page, or you can use them like this:
Here's the exact code that I used:
<th colspan=3>Stock Market Update</th> <tr> <td bgcolor="#0000F9">Dow Jones</td> <td>4-17-00: Down 301.26</td> <td>4-18-00: Up 156.35</td></tr> <tr> <td bgcolor="#0000F9">Nasdaq</td> <td>4-17-00: Down 123.45</td> <td>4-18-00: Up 45.43</td> </tr> </table>
Are you confused?If you are, that's perfectly OK. I was when I learned this. But if you read the explanation, then it will all make sense.The first thing that is shown is <table border=3>. This obviously sets the size of the border of the table. I believe that the default size is two, but don't quote me on that. The border is measured in pixels. The next things that I am going to show you are the three basic tags of tables. If you know these, then the going will be a lot easier.
<th colspan=3>Stock Market Update</th> There's that th again. I told you it would be easier now that you know what it is. Now, what's this colspan thing? That states how many columns the header will be over. I wanted it to go over all three, so I put colspan=3. Keep in mind that all text in the <th> tags are in boldface; you can't change that. The next thing that is placed in the code is <tr>. Remember what that stands for? You do not need to put this in if you only have one row. The next thing says <td bgcolor="#0000F9">. I have told you about what <td> is and does. But now, I added something. That bgcolor looks exactly like the text that you would use to make a background color of a page, doesn't it? It is the same thing, and it serves the same purpose. If you look in the table, the colors I put seem out of place. I know that; I just wanted to show that effect to you. That cell is finished out with a </td> tag. From there on, everything is pretty much repetitive. When you are finished with your table, MAKE SURE YOU USE </table>!!!!! Otherwise, it won't show on your page. What else can I do with tables?There are many neat effects that you can do with tables. I will continue to use my stock market example.
All that I did there was increase the table border to 25.
What I just did was introduce you to cell spacing. In the table tag, all you need to add is this: <table cellspacing=10>
Here comes another table term: cellpadding. This too goes in the table tag. <table cellpadding=10> Now, I'll combine the last three things I showed you:
You can resize a table, just like you can with an image. Here is what I originally got when I constructed this table.
And here's what I got when I resized it.
The method of doing this is quite simple, because it is done just like you would with an image. All you have to do is put either width, length, height, or a combination of those three in the <table> tag. It looks something like this:
<td bgcolor="yellow"> <font face="arial">LETS GO PENS!</font> </td> </table> Another important attribute of tables is alignment. There are two types, the normal align, and the vertical align, or valign. The default is left-center, so you usually don't need to put those words in. Here is a table with a right align and a top vertical align.
<table border=2 width=200 height=100>
The code:
<td bgcolor="yellow" align=right valign=top> <font face="arial">LETS GO PENS!</font> </td> <caption>This is an example of a one-celled table.</caption> </table> This is all that I am going to show you with tables. The next tutorial teaches you the basics of CSS. Go there now! |