ccTuteButn.gif 1CCHead241.gif 1CTIPZ.gif
CHR02c.jpg
CHR05.jpgCHR05.jpg
FTP Tute 		1bulletdiam.gif CHR05.jpgCHR05.jpg
HTML Page 		1bulletdiam.gif
1bulletdiam.gif
 CHR05.jpgCHR05.jpg
Tables 101 		1bulletdiam.gif CHR05.jpgCHR05.jpg
Tables 102
CHR02c.jpg

"Thanks to Cool Cat for these original files"
CHR02c.jpg

Table Anatomy


Below is a table that shows how the table row and the table data are positioned in a table.


As you go across the row each cell (TD) is read from left to right.
They are made with the
tag. Column 1 Column 2 Column 3 Column 4
This is Row 1 Row 1 TD-1 Row 1 TD-2 Row 1 TD-3 Row 1 TD-4
This is Row 2 Row 2 TD-1 Row 2 TD-2 Row 2 TD-3 Row 2 TD-4
This is Row 3 Table Row 3 with only 1 TD tag
This is Row 4 Table Row 4 TD-1 with 2 TD tags Table Row 4 TD-2 with 2 TD tags


How was this done?
Below is the source code. Minimal explanantion of some tags are written in green text.

Or if you want to view the source code without any comments click here; Source Code



This tag centers our table on the page.


Open the table with a border size of 1 and color it white.


Open the table header and color it a darker blue.
The table header tag is an add-on. It allows you to put a heading or add info to the top of your table.
Notice where the Table header is in the above example?


Use this tag to align your text in the table header.

As you go across the row each cell (TD) is read from left to right.
They are made with the

Closing the empty TD tag.


Closing that TD tag.


Close this TD tag.


Close the TD tag. Yawn! LOL!!


Close the TD tag.


Close the Thead tag.


Now that we are done with the Thead tag we are ready to make our table.
Start by opening a new table row with the TR tag.







Now that we have finished that row we will close it.


Open the second row of your table.







We are done with Row 2. So close it with the /TR tag.


Open Row 3 with this tag.


Now that we have finished that column (TD) we will close it.


We put in our one piece of data so we now close the TD tag.


Now close the Table Row with the TR tag.


Open the 4th Table Row with the TR tag.


Now we close the TD tag.



Close your TD tag.


Close this row with the TR tag.

tag.
This is the table header info. Notice where this wording appears in the table sample? Make sure to set the font size and color then close the font tag when you are finished.


We are done adding text so we will close the Div tag used to center the text.
I still wanted to add the Column info in the Table Header. But I only needed the last 4 columns so I opened a new TD tag and left it empty.
Opening a new TD tag and setting the text alignment to center.

Column 1
In this TD tag I set the font size to 3, the color to white then I added the info 'Column 1'
Open another TD tag and set the text alignment to center.

Column 2
In this TD tag I set the font size to 3, the color to white then I added the info 'Column 2'
Again we open a new TD tag and set the alignment of text to center.

Column 3
In this TD tag I set the font size to 3, the color to white then I added the info 'Column 3'
Open the TD tag and set text alignment. This is the last TD tag in the Thead tag.

Column 4
In this TD tag I set the font size to 3, the color to white then I added the info 'Column 4'

We will open this TD tag and the next 4 TD tags. Make sure you close the TD tags after you finish putting in your info.

This is Row 1
This first TD tag is being used in conjunction with the Thead tag to show Table info so I changed the background and font colors to match those in the Thead tag.
Row 1 TD-1

Row 1 TD-2

Row 1 TD-3

Row 1 TD-4

Now open this column and the next 4 with the TD tag. Close you TD tags after each entry.
Again this first Td tag and following text has had it's background and font colors changed to match the Tbody tag.

This is Row 2

Row 2 TD-1

Row 2 TD-2

Row 2 TD-3

Row 2 TD-4

This is Row 3
Since the above TD tag is being used in conjunction with the Thead tag for info purposes we have changed the background and text color to match the Thead colors.
We also don't count this as a data column in the following TD tags. You will see why.
As you can see in the sample table above we have only 1 TD tag in this row. Since we want it to span all the way across the table we need to use the Colspan (Column Span) tag.
The data needs to span 4 cells (TD's) so we set the Colspan value to 4.

Table Row 3 with only 1 TD tag

This is Row 4
Again we are opening a TD tag that is not part of the original Table Data. So we use a different background and text color.
Also we don't include this TD in the following ColSpan we will be using.
As you can see in the above sample table Row 4 uses 2 TD tags but spans 4 cells (TD's). So we set the Colspan value to 2.

Table Row 4 TD-1 with 2 TD tags

Table Row 4 TD-2 with 2 TD tags

Close your Table with this tag.


Use this tag to close the first tag you opened to center your table.



Back to Index Page