History: Evolution From Tables to CSS

From Tables

Tables were THE hottest thing in web design when graphical web design first started being implemented. By using tables, people could create different cells for different aspects. Manipulation of the <td> or <tr> padding, placements, and width could create many different arrangements of images and text.

A simple website using tables would often look like the following:

<table>

<tr>
<td>Banner</td>
</tr>

<tr>
<td>Content</td>
<td>Navigation</td>
<tr>

<tr><td>Footer</td></tr>

</table>

Now the beautiful thing is that you could place tables within tables and create very intricate and ornate designs and achieve great navigation bars. Now, you may be wondering why people use CSS now and tables have been phased out

Two main reasons: CSS is much neater and organized. Tables are very messy and hard to work with and it becomes very confusing after you add tables within tables as you start to have trouble remembering which cell you are in. However the biggest issue with tables is that the pages have to load the tables one by one which creates a huge load time for sites with many tables within tables.

Tables, in the end, became more suited for their original purpose: to plot data.

…to CSS

Eventually CSS came out and provided a much neater alternative to tables. CSS allowed you to put the different sections of your website into a <div> container. Then you label the div and apply different settings for each div. Not only did this make it both cleaner to edit and faster to load, by allowing the creation of a separate standalone stylesheet, it made websites easily readable for text browsers and older browsers without support for various html or other styling tags.

Because of the cleanliness and faster rendering of CSS layouts, creating CSS stylesheets has now become the dominant styling method for webmasters.

And Beyond!

Even now there are certain effects webmasters can’t achieve and they end up having to create some brute force hack (as in code to get around certain limitations) using javascript or some other language. Maybe a future version of CSS will address this issue. Or perhaps there will be a new styling language to take over CSS. All await…