Tables - Columns and Such

To review a Real Working Tables Page, Click:..  HERE

A Table or Column area of a web page is commenced with the following coding:..........

Note: The "< >" brackets are replaced here with "( )" for the purpose of showing the coding least it would not show up on this page.

(center) (table border=? cellpadding=? cellspacing=? bgcolor="#??????" width=??%)(/center)

In the above coding, the (center) does just that, centers the table in the center of the page.
The centering is turned off by the (/center) coding at the very end of the completed table.

Examples for each of the 5 table attributes are shown below:..........

border=  Sets the size of the border. A zero "0" provides no border. Examples of border size are shown below:..........
table border=0
table border=2
table border=4
table border=8
table border=12
table border=24
table border=48
table border=96

cellpadding=  Adjust the distances between rows of the table.
Using a border size of 4, cellpadding= examples are shown below:..........
cellpadding=2
cellpadding=4
cellpadding=8
cellpadding=12
cellpadding=24
cellpadding=48

cellspacing=  Adjust the border size around all 4 sides of a cell of the table and it should be remembered that the border space may be invisible if a zero (0) is used in border=
Using a border size of 4, cellspacing= examples are shown below:..........
Note:..  Each of the 6 tables have 4 columns each.
cellspacing=2
cellspacing=4
cellspacing=8
cellspacing=12
cellspacing=24
cellspacing=48

bgcolor="#??????"  Sets the back ground color within the table. If no bgcolor code is inserted then the table background will be the same as the page background.
Using a different border size for each, examples of some color numbers are shown below:..........
border=0 - Background Color Numbers = 000000
border=4 - Background Color Numbers = ff0000
border=8 - Background Color Numbers = 0000ff
border=12 - Background Color Numbers = ffffff
border=24 - Background Color Numbers = ce0000
border=48 - Background Color Numbers = 152dbc
Not likely to be desirable but, paint chips or thumbprint type images can also be used for back ground color by changing the "bgcolor=" to "background=" such as shown below:..........
border=2 - Background Color = a JPG image

width=  The Table width settings are based on a percentage of the screen or page width.
Using a border size of 1, table width setting examples are shown below:............
width=20 percent
width=40 percent
width=60 percent
width=80 percent
width=100 percent

If 1 or more (blockquote) coding is used to indent the page, it should be remembered that a table width setting of 100 percent will only be as wide as the space between the indention when viewed with the Mozilla Browsers. Internet Explorer and very early versions of Netscape ignore this and will display the table wider then the screen.
An example how the browsers display this is shown below:..........

Table preceded by 1 each (blockquote)
width=100 percent
This Table preceded by 3 each (blockquote)
width=100 percent

The coding immediately following the Table Header is the (tr) code. The (tr) "Table Row" code is used to start and end (/tr) each row of columns within the table and attributes can be used to set the alignments for all the rows to follow.

The alignment codes are as follows:........

tr align=??  Is used to horizontally align text or images with in all cells of the table and the attributes are, Left or Right or Center.

td valign=??  Is used to vertically align text or images with in all cells of the table and the attributes are, Top or Bottom or Middle.

Note:..  When alignment coding is used in the (td) attribute of a column it will override the (tr) setting.

Using a table width setting of 80 percent, examples of (tr) cell alignment is shown below:..........
tr align=center of this cell
tr align=right of this cell
tr align=left of this cell

The coding immediately following the tr code is the (td) code.

The (td) "Table Data" code is used to start and end (/td) each column within each row.

The (td) code also has attributes for alignment and enhancements and these codes will override those set in the preceding (tr) coding.

The (td) attributes are as follows:........

td width=??%  Is used to set the column width of each specific column within the columns across the width of the table. Column width settings of all columns should add up to 100 percent. The (td) width setting is only necessary in the first row of columns. All column widths in the subsequent rows will be the same and subsequent (td width=?) settings will not override or change the top row settings.

td colspan=??  Is used to span across more then one column of the preceding columns in the table.

td rowspan=??  Is used to span across more then one row of the subsequent rows in the table.

td align=??  Is used to horizontally align text or images with in a specific cell and the attributes are, Left or Right or Center.

td valign=??  Is used to vertically align text or images with in a specific cell and the attributes are, Top or Bottom or Middle.

Examples of (td) coding is a shown below:..........
td width=20% td width=20% td width=20% td width=15% td width=25%
td colspan=2 td colspan=3
td align=left No td settings No td settings No td settings td align=right
No td settings td rowspan=3
valign=middle 		No td settings No td settings No td settings
No td settings No td settings No td settings No td settings
No td settings No td settings No td settings No td settings

The above table was produced by the following coding:..........
(center)(table border=4 cellpadding=4 bgcolor="#eaeaae" width=90%)

(tr align=center)
(td width=20%) td width=20% (/td)
(td width=20%) td width=20% (/td)
(td width=20%) td width=20% (/td)
(td width=15%) td width=15% (/td)
(td width=25%) td width=25% (/td)

(/tr) (tr align=center)
(td colspan=2) td colspan=2 (/td)
(td colspan=3) td colspan=3 (/td)

(/tr) (tr align=center)
(td align=left) td align=left (/td)
(td) No td settings (/td)
(td) No td settings (/td)
(td) No td settings (/td)
(td align=right) td align=right (/td)

(/tr) (tr align=center)
(td) No td settings (/td)
(td rowspan=3 valign=middle) td rowspan=3 (br) valign=middle) (/td)
(td) No td settings (/td)
(td) No td settings (/td)
(td) No td settings (/td)

(/tr) (tr align=center)
(td) No td settings (/td)
(td) No td settings (/td)
(td) No td settings (/td)
(td) No td settings (/td)

(/tr) (tr align=center)
(td) No td settings (/td>
(td) No td settings (/td)
(td) No td settings (/td)
(td) No td settings (/td)

(/tr) (/table) (/center)

To obtain desired alignment results, it is sometimes convenient to
insert unused columns and use two tables as shown below:..........
Pretty Boy's Vocabulary consisted of the following:    
Hello Pretty Boy Love Pretty Boy
Good Morning Where is Everett
Love Donnie Mama Come Here
Where is E R - Gone to Town Shut Up Bird
The above happens to be a real table I recently used to show the vocabulary of a
Parakeet Bird. On the real table, I did not use a border but, for this example,  I put
  a 1 in the border just to show the alignment. The table was also shortened for this
example. The real table can be reviewed by Clicking,   HERE                                        

The above table was produced by the following coding:..........
(center)(table border=1 cellpadding=1 width=80%)

(tr align=center)
(td)(font size=+1 face=arial)(u)Pretty Boy's Vocabulary consisted of the following(/u):  (/td)

(/tr)(/table) (/center)

(center)(table border=1 cellpadding=0 width=80%)

(tr)
(td width=10%) (/td)
(td width=40%)(font size=+1 face=arial) Hello Pretty Boy(/font) (/td)
(td width=10%) (td width=40%)(font size=+1 face=arial) Love Pretty Boy (/font) (/td)

(/tr) (tr)
(td) (/td)
(td)(font size=+1 face=arial) Good Morning (/font) (/td)
(td) (/td)
(td)(font size=+1 face=arial) Where is Everett (/font) (/td)

(/tr) (tr)
(td) (/td)
(td)(font size=+1 face=arial) Love Donnie (/td)
(td) (/td)
(td)(font size=+1 face=arial) Mama Come Here (/font) (/td)

(/tr) (tr)
(td) (/td)
(td)(font size=+1 face=arial) Where is E R - Gone to Town(/font) (/td)
(td) (/td)
(td)(font size=+1 face=arial) Shut Up Bird (/font) (/td)

(/tr) (/table) (/center)

Tables can be put inside of tables as shown below.
Row 1 Col-1 Row 1 Col-2 Row 1 Col-3 Row 1 Col-4
Row 2 Col-1 Row 2 Col-2 Row 2 Col-3 Row 2 Col-4

The above table was produced by the following coding:..........
(center)(table border=4 cellpadding=20 bgcolor="#ff0000" width=95%)

(tr) (td)
(center)(table border=4 cellpadding=20 bgcolor="#ffffff" width=95%)
(/td) (/tr)

(tr) (td)
(center)(table border=4 cellpadding=20 bgcolor="#0000ff" width=95%)
(/td) (/tr)

(tr) (td)
(center)(table border=4 cellpadding=4 bgcolor="#eaeaae" width=95%)

(tr align=center)
(td) Row 1 Col-1 (/td)
(td) Row 1 Col-2 (/td)
(td) Row 1 Col-3 (/td)
(td) Row 1 Col-4 (/td)

(td) Row 2 Col-1 (/td)
(td) Row 2 Col-2 (/td)
(td) Row 2 Col-3 (/td)
(td) Row 2 Col-4 (/td)

(/tr) (/table) (/center)
(/tr) (/table) (/center)
(/tr) (/table) (/center)
(/tr) (/table) (/center)

A typical table set up might be as follows and a review of
the source code will reflect the necessary coding for such.
Column 1 Column 2 Column 3 Column 4
Row 2 Col 1 Info Row 2 Col 2 Info Row 2 Col 3 Info Row 2 Col 4 Info
Row 3 Col 1 Info Row 3 Col 2 Info Row 3 Col 3 Info Row 3 Col 4 Info
Row 4 Col 1 Info Row 4 Col 2 Info Row 4 Col 3 Info Row 4 Col 4 Info

A not so typical table to show the extremes to which the attribute coding allows.
Column 1 Column 2 Column 3 Column 4
Info aligned LEFT See Col 2 Info Here Col 3 Info Here Info aligned RIGHT See
Col 1 Info Here Col 2 Info Here Col 3 Info Here Col 4 Info Here
2 Columns Info Here 1 Column Info Here
The Chief

SUMMARY:..........

(table) and it's attributes set the body of the table size and appearance and starts the table.
(/table) goes at the very end to turn off the table.

(tr) (/tr) Starts and stops each row of columns within the table.

(td) (/td) Starts and stops each column in each row in the table.

It is not necessary to use attributes with the (table) (tr) and (td) codes. When any of the attributes are left out, the default attributes are automatically used.

Tables can be inside Tables.

All coding should be done in lower case letters because it saves you time, effort and grief as you go down the road.

This author only varies from that when he makes notes and a good programmer makes themselves lots of notes because it helps those reviewing the source code and you yourself when reviewing each segment of a page and also as time passes and you forget what you were doing.

Many people use web page makers like front page and composer but, this author prefers doing it all by hand because you can put together a much nicer, neater and compact web page. The problem with the automatic jobs is they have to guess at a lot of what you want.

It is suggested that when you first start setting up a Table Format that you set the border width to =1 in the table heading so you can see exactly what the columns are doing and then when you get the columns set as desired you can go back and take out the borders if desired.

(th) "Table Header" is also a code used for the first row of a table but, this author uses (td) for the top row as well or uses a second table and doesn't understand the need for the (th) code.

Return to HTHL HELP - Main

[  Current Page - TOP  ]  *  *  *    *  *  *  [  Old Chief's Web Site  ]
 
Copyright © 2007 E. Ray Smyth - The Old Chief