Simple Tables Page Three

Here is our simple table but in some dashing colors (Netscape users, you'll probably see light pink and red for the border colors. IE users, you're seeing dark blue and black as coded). Let's look at the html code for this one:

<center>

<table width="70%" border="5" cellspacing="1" cellpadding="1" bordercolor="#FF3333" bgcolor="#FFFFCC" bordercolorlight="#000099" bordercolordark="#000000">

<tr>

<td>Tik Tok</td>
<td>Tik Tok</td>

</tr>

<tr>

<td>Tik Tok</td>
<td>Tik Tok</td>

</tr>

<tr>

<td>Tik Tok</td>
<td>Tik Tok</td>

</tr>

</table>

</center>

The only difference right now is the extra information in the first table tag. We added four more pieces of information. My comments are in red:

bordercolor="#FF3333" (I chose my default border color, this is the hexadecimal code for a red. You can't see it in the table as I also selected a bordercolorlight and bordercolordark)

bgcolor="#FFFFCC" (I chose a pale yellow for the background of my table)

bordercolorlight="#000099" (I wanted a two-toned shadow effect on the table's border so I chose a dark blue for the light border color, using this hexadecimal color code)

bordercolordark="#000000" (I wanted the shadow to be black so I chose the hexadecimal code for black for the lower and right border)

So why have a bordercolor you can't see? Some older browsers Won't pickup the fancy bordercolorlight or bordercolordark code, so it will use the one code it can see. I wanted red as a default color. It could be any color you chose. You can even decide to have NO border on a table!

To make this example table with No border, the first line of code would be changed to:

<table width="70%" border="0" cellspacing="1" cellpadding="1" bgcolor="#FFFFCC" >

Sort of plain and even confusing. Let's add a simple border color:

<table width="70%" border="1" cellspacing="1" cellpadding="1" bgcolor="#FFFFCC" bordercolor="#FF3333">

I added a border of 1 pixel and chose a red as my border color.

Here is the table using a bordercolorlight and bordercolordark and a border width of 1 pixel:

I added a border=1 and chose two colors. Here's the first line of code:

<table width="70%" border="1" cellspacing="1" cellpadding="1" bgcolor="#FFFFCC" bordercolorlight="#FFCCCC" bordercolordark="#FF6633">

Let's make it worse:

Here is the table with no background color either. Pretty unexciting. The table background color will be the same as your web page.

I wanted you to see how Bad tables can be, so you will avoid mistakes in the beginning. Spend the extra time to jazz up your tables, your viewers will love it. When I started coding, I wrote out, in long hand with pen and paper, exactly what I needed to type for the code. It saved me Hours of wasted time and probably many a headache. I knew exactly how many cells I needed for my images and text, before I set up the table.

End of Page Three....click here for Page Four

Back to Site Help

This helpful information compiled by Tik Tok

End of PageThree....Page Three coming soon

Back to Site Help

This helpful information compiled by Tik Tok