Categories:
Main Questions
Website Creation
Editing Images
Editing HTML Code
User Registration
Administrator Interface
Website Promotion
TAG which defines the individual rows of the TABLE and the
Search: Have a question? Find an answer fast.
(Example: change design)

Back

Why are tables important?

While it is true that TABLES can be somewhat complex and a bit more confusing to learn, mastering them is well worth your effort. Tables are beneficial for much more than just presenting your data in tabular columns. They can be a valuable aid in formatting your pages, graphics, and images. It's probably easiest to think of a TABLE as a flat, two dimensional box that you can put on your web page. Inside of this box you can place other boxes, CELLS, and inside of these boxes, you can put text, images, or even more boxes.

The basic elements of the TABLE consist of the

...
TAG which surrounds the entire TABLE, the
TAG which defines the cells within the TABLE rows. Another TAG is the TAG which creates a table header in a bold font. The attributes of the TAG will affect the entire table. They are as follows:

Enables text to flow around the table. values are align=left or align=right.

Sets the table border thickness. The default value is border=0 (no border)

Defines the distance a cell frame is from the edges of the object within the frame. The default is cellpadding=1.

Specifies the desired width of the table in pixels or percentages.

Specifies the desired height of the table in pixels or percentages. These attributes can only be used with the

,
and TAGS.

Specifies the alignment of text or graphics within the cell. Values are align=left, align=right or align=center. The default is align=left.

Specifies the vertical alignment of text or graphics within the cell. Values are valign=top, valign=bottom, valign=middle or valign=baseline. The default is valign=middle.

These attributes can only be used with the

and TAGS.

Specifies a width (which affects all the cells in that column) for the element in pixels or as a percentage of the screen. If more than one cell uses the width attribute, the widest cell setting will be used (Note: if the total of the widths specified exceeds that specified in the width attribute of the tag, the table tag width will be overridden).

Specifies a height (which affects all the cells in that row) for the element in pixels or as a percentage of the screen. If more than one cell uses the height attribute, the tallest cell setting will be used. (Note: if the total of the heights specified exceeds that specified in the height attribute of the

tag, the table tag height will be overridden).

The number of columns that the cell spans.

The number of rows that the cell spans.

The text wrapping feature is disabled.

Now that we have a basic understanding of TABLES, let’s take a look at a simple 2 column table which will be constructed a column at a time. we start with the first column:

US STATE
Alabama
Alaska
Arizona
California
Colorado

Now that we have the first column built, its time to add a second. To build the second column, all you would do is just build on the first.

209
US STATE AREA CODE
Alabama 205
Alaska 907
Arizona 480
California
Colorado 303

Now that you have learned 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 your web page. You can change the size and the color, specify a border size, and add space between the table cells. You determine all of these things by using several different attributes in your TABLE TAG. (WIDTH, BGCOLOUR, CELLPADDING, CELLSPACING, BORDER) 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 or pixels for the value. BGCOLOUR in a table works the same as the BGCOLOUR attribute in the BODY TAG. Use the colors name or its hexadecimal code. CELLPADDING and CELLSPACING will let a little air into your table and make it easier to view. CELLSPACING is the amount of space you want between your table cells. CELLPADDING is how many pixels of space you want on the inside of your cell between your text and the border. Finally you can also control the thickness of your table border by using the BORDER attribute.

Below is an example of what our previous table would look like with all the attributes we just talked about.

US STATE AREA CODE
Alabama 205
Alaska 907
Arizona 480
California 209
Colorado 303

Useful Resources

Website Builder
Website Templates
Web Templates Customization
Affiliate Program
Web Design Library
Adult Website Templates
Flash Templates
Corporate Identity
PHP-Nuke Themes
Webtemplates
Flash Templates Online
DDoS Protection
Hosting Templates