Code it cleaner, and better
Lets pretend that you have a web page, which has a really huge data table inside of it. And all text within the table is green. It has 30 rows, 3 columns, its huge! (In this example we will only use 10 rows.)
You want all of the data to be aligned to the center of each cell. And none of the text should wrap. Ordinarily, this is the code a person would use to do that.
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
Tables have to be completely downloaded before they can be rendered by the client machine. If your design and content is inside of tables, then your whole webpage will need to be downloaded before it can be rendered, leaving your visitors waiting for no reason at all. This is what I refer to as "Bloat code".
Using CSS to control the appearance of it however, will enable it to load faster.
Inside our external style sheet, we could put this:
td {
white-space: nowrap;
text-align: center;
color: green;
}
So now, the contents within each td (table cell) will inherit what CSS tells it to do. And notice the end result, our HTML code is a lot cleaner.
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
And the moral of this story is: If the only thing the browser has to parse is "bare bones" HTML, the page will load a lot faster. So you should use CSS for presentation as much as possible.
Sep 11, 2009