HTML-Lesson 8

Tables 1

Tables---a digression

In the early days of the internet and web page design, the designers wanted to exercise control of the shape of the web page. They hit upon the ability of tables (without borders) to do this. The process got completely out of hand until the substructure of the page was a table comprising literally hundreds of cells!

This triggered the birth of CSS, separating 'content' and 'presentation'. Nowadays it is a sin to use tables for anything other than tables! That is the presentation of tabular data. Sometimes, you will find that it is impossible not to sin!

Tables

Tables are essentially split into rows. Rows in turn are split into data cells. The 'td' tags enclose a data cell. The 'tr' tags enclose a table row and the 'table' tags enclose a whole table. To study how this works click here.

Extra Deep and Extra Wide Data Cells

Sometimes you may want to have an extra large data cell. One that spreads over two or more rows or one that spreads over two more columns. to do this use the attributes:
<td rowspan=" The number of rows covered by this cell "> or
<td colspan=" The number of columns covered by this cell ">
To see an example of this click here.

Empty Data cells and Missing Data Cells

To maintain the position of data cells you must include all the required 'td' tags even if they enclose nothing. In most browsers this will result in an empty cell. In Internet Explorer it results in a missing cell. That is, a cell with no border. (See CSS Lessons 2 to 8). To put a border around an empty cell in Internet Explorer you need to put something in it. I use what is called a non-breaking space, '&nbsp;'. This is an example of an entity (see Lesson 18).