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

Side By Side Cells




So far we have been working with a 1 cell table.
Now we will learn how to put 2 items side by side in a table.
I have added the word Home! next to the word Welcome.


Welcome Home!


How was this done?
Below is the source code. The explanation of each tag will be written in green.



This is the center tag. It centers the table on your page.


We open the Table then set the Border width to 20 by using the border= command.
Next we use the bordercolor= command to set the color to yellow.
And finally we use the cellpadding= command to set the padding to a value of 20.



This is the tag used to open the Table Row.


Now we close the Table Data tag with this tag.


Now we will close this 2nd Table Data tag.


Then we close the Table Row tag with this one.


This opens the Table Data tag. This is used to hold the information you want to display in your table.

Welcome
This is the info we are displaying. We have to add the font size and color for it to display properly. Remember to close your Font tag when you are done.


Now we open a 2nd Table Data tag to hold the word Home!

Home!
This is the code used to display the word Home!.
We also need to set the font size and color.



We are done with the table so we close it with this tag.


Finally we close the Centering tag with this tag.


Some Practice For You!

Try changing the Cell Padding size and the border size.
Also set the Cell Padding to 0 and remove the Border and Border Color tags.

See what happened?


Back to Index Page