View and vote on the article here: HTML Tables
HTML Tables| Category | | | Summary | | OK, now that you have learned about frames in HTML (that is if you have read my last tutorial) , I'm going to teach you something more about HTML-tables. |
| | Body | To do this, you have to learn a few new tags. This is a rather easy example:
working with tables
if you want something that you don't want to be put in the tables just put it here
Sam
As you can see, we need 3 new tags. The TABLE-tags let the browser know that you are working with tables. The TR-tag defines a table row, from which you need at least one. The TD-tag defines a cell in the table row. You also need at least one of these. Now If you load this page into your browser, it won't seem to you that this is a table. But it is, and i can show that to you by putting a border around the table. I'm going to leave the HTML-,HEAD- and BODY-tags but you know you still have to write them:
Sam,Frank,Rod
You see that we are working with tables. You can also see that when we put more things in a table cell, the table cell automaticly changes its size. But you can also change the width and height of the tables yourself.
Sam
Now I'm going to show you how to put the content of the table cell 'somewhere else' in the table cell. To do that i'm going to use the ALIGN and VLIGN-tags.
Sam
The others options you can use are LEFT and CENTER (with ALIGN) and TOP and MIDDLE (with VLIGN). But what is a table with only ont row and one cell? Let's do something about that.
Sam
Rod
Jim
Frank
Tom
View the page. As you can see, although there is more space in the first row then in the second,the space will not be taken. And as you can also see, the cells can have different sizes. We are going to do something about that:
Sam
Rod
Jim WIDTH=75
Frank WIDTH=75
Tom WIDTH=100
Much better right? Now, I'm going to switch back to the 'not-defined' and try to make some of the cells longer then others. Try this:
Sam
Rod
Frank ROWSPAN=2
Jim COLSPAN=2
Now you can also change the color of the cells too. Let's try it and at the same time try to see what happens which color the browser accept when you give different colors for an intire table, a table row, and a table cell:
Sam BGCOLOR="00FF00"
Rod
Jim
Frank
Tom
OK, I think it's clear which color the browser prefers table cell color over table rows color over table color. There are two tags I want to talk about. The CELSPACING and CELPADDING-tags. The CELPADDING-tag adjusts the distance between the contents of the table and the border of the table. The CELSPACING-tag adjusts the distance between the table cells. Try it:
Sam
Rod
Jim
Frank
Tom
I hope you enjoy your tables!
-dzjnse |
|
This article was imported from zZine. (original author: dzjnse)
There are no replies to this post yet.
|