This page was developed to demonstrate how Cascading Style Sheets can be of Great Service to you when used with tables.
As I have stated many times in the past, table Cells are really independent little Web pages all by themselves. Each cell is totally unaware of what has preceded it and what follows it. In other words each cell can look totally different from all the other cells in the table. (A haven for Copy ’n Paste addicts though!)
I’ll create a simple table first to demonstrate the concept then show you the code that produced the table.
| CELL 1 | CELL 2 | CELL 3 | CELL 4 | CELL 5 |
<table border=3> <tr> <td>CELL 1</td> <td>CELL 2</td> <td>CELL 3</td> <td>CELL 4</td> <td>CELL 5</td> </tr> </table> | First, notice that I have not added any cellpadding or cellspacing, so the text does hit up against the Cell Wall. Second, note the default text and font weight that comes when you don’t state what you desire. |
The following table is a copy of the one above except I’ll change the font and Style in each Cell, in fact, I think I’ll add a little Spot-Color in each Cell and add cellpadding of 5px and cellspacing of 5px as well.
| CELL 1a | CELL 2a | CELL 3a | CELL 4a | CELL 5a |
So let’s take a look at the amount of Coding I had to do to accomplish this effect. I’ll admit, I’m good at copy ’n paste but there certainly is more code than should be allowed.
<table border=3 cellpadding=5 cellspacing=5> <tr> <td bgcolor="lightblue"> <font face="arial" size="4" COLOR="blueviolet"><b>CELL 1a</b></font></td> <td bgcolor="lightblue"> <font face="arial" size="4" COLOR="blueviolet"><b>CELL 2a</b></font></td> <td bgcolor="lightblue"> <font face="arial" size="4" COLOR="blueviolet"><b>CELL 3a</b></font></td> <td bgcolor="lightblue"> <font face="arial" size="4" COLOR="blueviolet"><b>CELL 4a</b></font></td> <td bgcolor="lightblue"> <font face="arial" size="4" COLOR="blueviolet"><b>CELL 5a</b></font></td> </tr> </table>
Can you image having row after row of this to sort through when it comes to editing the table! There has to be a better way! And, there is! On the companion page for this subject will be the same exact tables only this time I'll use my “Old buddy” Cascading Style Sheets to give me a hand. I'll place the code in the <head> but it could go into a separate Style Sheet as well. Come take a look on Part Two...
Return to Profal2 Miscellaneous