The Role of Tables in Early Web Development

The roots of CSS lie in a need for web site developers and designers to control the design aspects of their web pages. Before the advent of CSS, designers were forced to use tables, in order to control the layout, the placement of images, etc. Sites with complex backgrounds had to be sliced in very complex ways to accommodate creative placement and style. Tables will always have a useful purpose, as tabular data will always be required, but it is best used in that specific role, and not as a layout tool. Before the advent of CSS, though, there was little else one could used to add unique style, layout and design to a website.

Before I get into CSS, it may be helpful to see how tables work. Tables use a series of tags in combination, somewhat like the lists used tags in combination. The first set of tags tag is simply <table></table>. As one might expect, the <table> tags are wrapped around the entire table. Inside these tags there will be two other sets, <tr></tr> and <td></td>. The <tr> tags represents rows, and the <td> tags represent cells within those rows.

Here is an example of the structure:

<table>
<tr><td>Blue</td><td>Orange</td></tr>
<tr><td>Red</td><td>Yellow</td></tr>
</table>

Blue Orange
Red Yellow

This table example is extremely simple. There are also ways to combine cells within rows or columns.

<table>
<tr><td colspan=”2″>Blue</td></tr>
<tr><td>Red</td><td>Yellow</td></tr>
</table>

Blue
Red Yellow

In the example above, by adding …colspan=”2″… to the first openingtag in the row, html combined the the cells across the two columns of the table to make one cell. The second set of

tags are removed as all the columns of the table are accounted for, and is not needed.

<table>
<tr><td rowspan=”2″>Red</td><td>Blue</td></tr>
<tr><td>Yellow</td></tr>
</table>

Red Blue
Yellow

With the last two example, one can start to imagine how tables can be manipulated for the purpose of the layout of pages. We can imagine regions set aside for headers, or columns running down one side of the page. Now imagine putting tables within cells. That’s right. If I were to take one of the above examples, and then place an entire table and place it within one cell of another table, the code would look like this:

<table>

<tr><td>Blue</td><td>

<table>
<tr><td>Blue</td><td>Orange</td></tr>
<tr><td>Red</td><td>Yellow</td></tr>
</table>

</td></tr>

<tr><td>Red</td><td>Yellow</td></tr>
</table>

Blue
Blue Orange
Red Yellow
Red Yellow

At this point it should be apparent that this method could indeed created many possibilities for the layout of a page. But it is also true that this type of structure can get very complex very quickly. The code soon gets to be very confusing and hard to read. When nothing else existed to aid in the layout of web pages, tables were the answer. Today, however, there is a much better way—table-less CSS, cascading style sheets, which I will cover in my next post.

Tables do have a purpose, however, and that is to display tabular data. If you have a data set that is best displayed in rows and columns, tables allow you to do this in a neat and orderly way, just like table functions in other page layout or word processing programs. There is no tab function in html, so tables are the only to get information, through cells (<td>), to line up in a way that makes sense to the website visitor.

So tables are a great way to display data as a separate element within a page, but should never be used as the layout structure.

This entry was posted in HTML-CSS Lessons. Bookmark the permalink.

Comments are closed.