Week Five | Part One

Table Column Spans

Column spanning is a very useful bit of code that allows you to break out of the dull visual organizing that tables are famous for.

If you consider your layout as nothing more than a grid with areas marked for content, the concept of column spanning becomes very clear and powerful.

The attribute is known as colspan, allows you to merge adjacent cells in the same row into larger cells. I'll start with a simple table to illustrate:

Let's say I wanted to show the relationship between the information in columns A and B compared to the information in columns C and D.

To do so I would use the colspan attribute to merge Cell A1 with Cell A2, and merge Cell A3 with Cell A4.

Here's the code for the current table row:

<table border="1" width="50%">
<tr><th>Cell A1</th><th>Cell A2</th><th>Cell A3</th><th>Cell A4</th></tr> ...

Now I'll merge the table data cells using the colspan attribute. Here's the code for the newly-styled table row:

<table border="1" width="50%">
<tr><th colspan="2">Cell A1 & Cell A2</th><th colspan="2"><th>Cell A3 & Cell A4</th></tr> ...

And this is the result:

Please go to Week Five Part 2 ».