are a couple of reasons for this. The first is that a table-based layout will
generally require much more markup to hold the page together—acting like
ascaffold, so to speak. Using a table-based layout, it’s more than a matter of
marking up sections of the page with div elements. This extra markup adds
to the page file size, and therefore, the amount of time it takes to download
The second reason relates to the user’s perception of download speed.
Browsers don’t download entire web pages in one go; when they ask for a
web page, they receive it as a trickle of information, and try to render that
information as it arrives. In the case of oursite, the browserwould renderthe
header, then the navigation, and finally the body content. If the trickle of in-
formation is so slow that there’s a pause halfway through the body content,
the browser is still able to display the first half of the body content without
anytrouble.It’s adifferentscenarioaltogetherwhen usingtable-based layouts.
Ina table-based layout, thebrowserneeds tohave downloaded allthecontent
in the table before it knows how to accuratelyrenderthat information on the
screen. As such, a CSS-based page layout will usually appear on the screen
faster than a table-based layout.
If there’s one point to remember from this chapter, it’s this: despite what anyone
tells you, using tables is fine. They should not be used for page layout (that’s
where they gain their bad reputation from), but it’s perfectly okay to use tables
for their originally intended purpose—the presentation of data in a grid.
Anatomy of a Table
Before we start adding the table to our Events page, let’s take a step back and look
at the example we saw in Table 6.1: the simple table of telephone contact details.
At a glance, we can identify some specific areas of the table, namely the headers,
rows, columns, and table data cells. Figure 6.2 explains this diagrammatically.
Although I mentioned columns, there’s no need to indicate these in the HTML. At
its most basic level, a table is put together using commands that tell the browser
where to start a new row, or a new cell within any given row; as the columns are a
natural by-product of this approach, it’s unnecessary to declare each new column.
Build Your Own Website The Right Way Using HTML & CSS