Lesson 7
More Tables
Now that you know the basics, let's see if we can't fine tune your TABLE a little. It's fairly easy to change the way your table looks on the page.
You can change the size and color of your table, specify a border size, and add space between the table cells.
More Attributes Still...
You determine all of these things by using several different attributes in your TABLE tag
WIDTH | BGCOLOR |
CELLPADDING | CELLSPACING |
BORDER |
Laying It Out
Just a Reminder to Remove this ! after you copy this code or the code will not work
<!TABLE WIDTH=33%> Use the WIDTH attribute inside the table tag to specify how much of the screen you want your table to span.
You can use a percentage, like I just did, or you can use pixels for the value.
<!TABLE BGCOLOR=yellow> BGCOLOR in a table works just like the BGCOLOR attribute in a body tag.
Use the color's name or it's Hexadecimal code.
I Need My Space!
CELLPADDING and CELLSPACING will let a little air into your table and make it easier to view.
<!TABLE CELLPADDING=5 CELLSPACING=5> CELLSPACING
is the amount of space you want between your table cells.In the example
above, I specified that I want five pixels of space between my cells.
CELLPADDING is how many pixels of space you want on the inside of your cell between your text and the border.
Here's a table with cellspacing and cellpadding
Notice how there's plenty of space between the individual cells | Also notice that the text inside of the cells doesn't touch the border |
Now here's the exact same table without cellspacing or cellpadding
The cells in this table have absolutely no space between them | And the text runs right up against the border |
Quite a difference, huh?
Speaking Of Borders
You can control the thickness of your table border by using the BORDER attribute.
<!TABLE BORDER=4> You can even lose the border altogether by indicating a value of 0 for the BORDER attribute.
If
you scroll back up this page to where I list the Table attributes in
large black text, you'll see an example of a table with a zero border.
Main Forum
Main Thread
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7