HTML Tutor
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
iDragstor Lab
|
|
|
Lesson 7 - Tables
More about tables
Now that you know the basic elements of tables and their attributes, we can move on to some details that will dress up the way your tables look. In this lesson you will learn how to determine the size of the tables, the background color and the space between the cells.
A few more attributes
| WIDTH | BGCOLOR |
CELLPADDING | CELLSPACING |
| BORDER |
|
Let's look at them one by one
<TABLE WIDTH=33%>
WIDTH attribute will define how wide is your table. In the example above my table is only 33% of the screen width. The attribute may have a value in % or in pixels.
<TABLE BGCOLOR=yellow>
BGCOLOR works the same as BGCOLOR attribute in the BODY tag.
When using this attribute you define the color of your table (red, green, blue...)
<TABLE CELLPADDING=5 CELLSPACING=5>
CELLSPACING is the space between the cells in the table. Our example above has 5 pixels worth of space between the cells.
CELLPADDING is the space between the text and the border of the cell. In our example I have 5 pixels between the text and the border of my table. Look at the next examples:
The first table has CELLSPACING and CELLPADDING = 8
| You can probably notice the extra space between the border of the cell and the border of the table. |
In this cell, pay attention to the extra space between the text and the cell border. |
The second table has CELLSPACING and CELLPADDING = 0
| You can probably notice no extra spaces between the border of the cell and the border of the table. |
In this cell there are no extra spaces between the text and the cell border. |
We are sure that you can tell the difference between the two tables. The first one has an extra space, the second one doesn't. Now we need to take a look at the table borders.
<TABLE BORDER=4>
| WIDTH | BGCOLOR |
CELLPADDING | CELLSPACING |
| BORDER |
|
When using the BORDER attribute you will determine how thick your table border is going to be. Values may be 1,2,3 and up. The higher the number, the thicker the table. If you set BORDER=0 you won't have any borders. If you scroll back to the top of this page, and look at the list of attributes in bold, you will see the example of a table that has BORDER=0. This technique is used by many programmers to organize and position elements of web pages. If you do any kind of web design, you will use tables in such matter.
In the end...
Congratulations! You made it to the end of this tutor. You can ped yourself on the back now. You have learned the basics of HTML coding and you may start designing simple web sites. More importantly you have built the foundation to learn advanced HTML techniques and understand how the www works. Come back to these pages whenever you need to refresh your knowledge, or to use our HTML Lab. We suggest you continue practicing with table tutors(this will make you a more powerfull html coder), get some tutors on forms(we didn't cover it) and frames(advanced). You can find great tutors on the web. Use the search engines with these keywords: html, tutors, sample code, exercises. We hope you didn't find this tutor too boring and that you didn't run away before the end of it. If you have any questions, comments, complaints, concerns or anything else that you would like to tell us please feel free to contact us at usa@iDragstor.com. Thanks and good luck to you.
|
|
|
