Web Design with HTML and CSS

A brief history of layout techniques on the web

Lesson 7, Introduction to CSS Layout 143

However, because the fi rst row would become a header section, the column being defi ned
would be in the way. The HTML tag allowed the designer to merge the two cells.

A table with two merged cells in the fi rst row.

In this merged fi rst row, a designer might want an independent three-column section for a
logo and other elements, such as navigation or a user login. To add this section, the designer
would add a new table (with three columns) into the top row.

Nesting a new three-column table into the top row of the original table.

To give this table structure, the designer might set the original table to a fi xed width and
height. Assume the designer also wanted a thin, black border around the entire layout.
However, the border property for HTML tables is very basic and does not allow the addition
of colors. One common solution was to insert the existing table into another table, which
would consist of a single cell with a background color of black. By modifying the padding
and background color and merging additional cells, the designer was able to create a table-
based layout with some basic styling.

A typical empty “template” for a table-based layout as rendered in a browser.