• Choose a category
• All
• Classic-Fiction

Afternoon

train minions

train minions

train minions

train minions

world domination

Evening

maniacal laughter

maniacal laughter

maniacal laughter

maniacal laughter

The secret to making cells larger than the default is two special attributes: rowspan and colspan.

Spanning multiple columns

The morning activities tend to happen over several days. Designing traps will take both Monday and Tuesday morning, and improving the hideout will occupy the remaining three mornings. Take another look at the Morning row; here’s how this is done:

Morning

Design traps

Improve Hideout

The Design Traps cell spans over two normal columns. The colspan attribute tells how many columns this cell will take. The Improve Hideout cell has a colspan of 3.

The Morning row still takes up six columns. The is one column wide, like normal, but the Design Traps cell spans two columns and the Improve Hideout cell takes three, which totals six columns wide. If you increase the width of a cell, you need to eliminate some other cells in the row to compensate.

Spanning multiple rows

A related property — rowspan — allows a cell to take up more than one row of a table. Look back at the Friday column in Figure 4-7, and you’ll see the World Domination cell takes up two time slots. (If world domination was easy, everybody would do it.) Here’s the relevant code:

Afternoon

train minions

train minions

train minions

train minions

world domination

Evening

maniacal laughter

maniacal laughter

maniacal laughter

maniacal laughter

The Evening row has only five entries because the World Domination cell extends into the space that would normally be occupied by a pair.

If you want to use rowspan and colspan, don’t just hammer away at the page in your editor. Sketch out what you want to accomplish first. I’m pretty good at this stuff, and I still needed a sketch before I was able to create the tableSpan.html code.

Avoiding the table-based layout trap

Tables are pretty great. They’re a terrific way to present certain kinds of data. When you add the colspan and rowspan concepts, you can use tables to create some pretty interesting layouts. In fact, because old-school HTML didn’t really have any sort of layout technology, a lot of developers came up with some pretty amazing layouts based on tables. You still see a lot of Web pages today designed with tables as the primary layout mechanism.

Using tables for layout causes some problems though, such as

♦ Tables aren’t meant for layout. Tables are designed for data presentation, not layout. To make tables work for layout, you have to do a lot of sneaky hacks, such as tables nested inside other tables or invisible images for spacing.

♦ The code becomes complicated fast. Tables involve a lot of HTML markup. If the code involves tables nested inside each other, it’s very difficult to remember which element is related to which row of which table. Table-based layouts are very difficult to modify by hand.

♦ Formatting is done cell by cell. A Web page could be composed of hundreds of table cells. Making a change in the font or color often involves making changes in hundreds of cells throughout the page. This makes your page less flexible and harder to update.

♦ Presentation is tied tightly to data. A table-based layout tightly intertwines the data and its presentation. This runs counter to a primary goal of Web design — separation of data from its presentation.

♦ Table-based layouts are hard to change. After you create a layout based on tables, it’s very difficult to make modifications because all