A little Extra

2 Row 2 Column the normal way

<TABLE width="300" border="1" cellspacing="0" cellpadding="0" align="center" bgcolor="#00FFFF">
<TR>
<TD bgcolor="#0000CC" width="150"><B><FONT color="#FFFFFF">text colour
White</FONT></B></TD>
<TD width="150"><B><FONT color="#FF0000">Text colour Red</FONT></B></TD>
</TR>
<TR>
<TD width="150">text colour Default</TD>
<TD bgcolor="#0000CC" width="150">text colour Default</TD>
</TR>
</TABLE>

Text colour White	Text colour Default
Text colour Default	Text colour Red

Notice how the table code is now getting more cluttered compared to the same table on the basic table 1 page.
It is now getting harder to read table structure, due to the addition of font colours, font size, table cell size.
The code above is acceptable if your only going to use 1 or 2 tables on your site, this site uses the same table on all pages, and I being a lazy person always look for a easier way, which is why I use a lot of CSS (but take care as there are still browsers that do not fully support CSS).

2 Row 2 Column the CSS way

<TABLE class="table" border="1" cellspacing="0" cellpadding="0" align="center" >
<TR>
<TD class="td1">Text colour White</TD>
<TD>Text colour Default</TD>
</TR>
<TR>
<TD>Text colour Default</TD>
<TD class="td2">Text colour Red</TD>
</TR>
</TABLE>

Text colour White	Text colour Default
Text colour Default	Text colour Red

Now we are back to a readable table, with no unnecessary clutter, and only addition is a class
I added a class in the TABLE tag, class="table" other wise it would have over ridden my main site CSS, so I made a pseudo class for table, which is below

table.table {
background : #00FFFF;
color : #267548;
font-family : "Times New Roman", Times, serif;
font-size : 12px;
font-variant : normal;
font-weight : 600;
width : 300;
}

And made 2 pseudo classes for TD tag, td1 and td2

td.td1 {
background : #0002F9;
color : #FFFFFF;
font-family : "Times New Roman", Times, serif;
font-size : 14px;
font-variant : normal;
font-weight : bold;
width : 150;
}

td.td2 {
background : #0002F9;
color : #FF0909;
font-family : "Times New Roman", Times, serif;
font-size : 14px;
font-variant : normal;
font-weight : bold;
width : 150;
}

you can add the 3 classes to your page by using style tags between the head tags of your page.

<style type="text/css">
<!--

the 3 classes the order they are written, line for line

-->
</style>

I do not use that method I use a LINK

<LINK rel="stylesheet" href="delta-table.css" type="text/css">
if you download this page using link below you will have a better idea of how its done.

 

To Download these instructions
and play with them at your lesure
Click HERE