|
|
Now we are moving into the more complicated part of HTML. You know how to make a page, and that is great...but you may want to make that page look even better...and now we are getting to that part. It's more difficult..but not impossible! The next thing we are going to learn is how to make a table. This page was made using a table. This text is being written into the table. You notice how the title and banner are at the top, then the actual lesson is in a big box...like a piece of paper? The big box is a table. Tables can also be used to make menu bars on the side of the page, or at the bottom or top of a page. Tables can be used anywhere you want...and you can configure them to have a different background color or image, different font face, different font color and size, etc. You can even put a table inside of a table:
Now, how did we do that. Well, here is the code we used: <table align="center" width="80%" cellspacing="2" cellpadding="2" border="2">
So what does all this gibberish mean? Well, let's break it down, line by line: <table align="center" width="80%" cellspacing="2" cellpadding="2" border="2"> In the tag above, we are telling the browser that this is a table, that you are changing the way the page is laid out. So, of course, a table starts with the tag <table>. But then, we needed to configure the table. We wanted it to be centered, so we had to "align" it...we get: <table align="center">. Next, we needed to tell the browser how much of the width of the page this table should cover...<table align="center" width="80%">. We needed to determine who much space we wanted between the two columns and rows in the table: <table align="center" width="80%" cellspacing="2">. The higher the number you put for cellspacing, the more space there will be between your rows and columns. If you don't want any space, use "0". Cellpadding determines how much padding we want inside each row and column from the edge of the rows and columns. This works the same as cellspacing...the higher the number, the more padding you will have. The last thing we configured in the table tag was border size, which also works like cellspacing...The higher the number, the thicker the border will be. If you don't want a border, put "0" here. Still with me? The next tag we used for our table was: <tr> This tag tells the browser that this is the table row. We only have one row that runs horizontally...it's the whole table...so we only need one table row tag. Next we needed to set up our table data (<td>) for the first column of our table. <td width="20%" bgcolor="aqua">This is a table within a table, Here, you can list items, like a menu for your page.</td> Here, we determined what width of the table we wanted this column to cover and the background color that we wanted this column to be. Of course, we added what we actually wanted written into the column, and closed the column with the </td> tag. Then, we configured the other column of our table: <td width="60%" bgcolor="fuchsia">This would be the main body of your page...this is the second column of the same table. Aren't these colors awful?</td> This works the same way as the first table data...except for three things. First, the information we wanted written in this column was obviously different. The width was different. If you remember from earlier..our table takes up 80% of the page...the first column takes up 20% of the table, so the second column would naturally take up 60% of the table...for a total of 80%. The third thing we changed was the background color. Then of course we closed that tag. The last part was easy...we just closed tags. The table row tag had to be closed </tr> and the table tag had to be closed </table>. That is all that is required to make a table. If your table needs more than one horizontal row, you would start the next row, right after closing the first one, before the closing table tag...and of course, it would have it's own table data tags for the information you wanted in that row of columns. That was a little tougher..but not too tough!Contents |