Nesting Tables

CSS tables do not have equivalents to the colspan and rowspan attributes that HTML tables have. That doesn't however restrict us in any way because there is a simple alternative way to achieve the same effect.

All we need to do is to reverse the way that we look at things with our CSS tables. Instead of having a row that spans two columns we have a row that splits a column into two. Instead of a column that spans two rows we have a column that splits a row into two. Of course looking at it in reverse like that we are of course looking at the opposite rows or columns to the ones that we would be looking at for spanning.

How does this help us? Well we can easily create the effect of two equal height columns or two equal width rows by using a CSS table. All we need to do therefore to give one column the appearance that it spans two rows is to use a nested table to split the other column into two rown. All we need to give one row the appearance that it spans two columns is to use a nested table to split the other row into two columns.

Of course if you have more tan two rows or columns and you only want one to be spanned then you'd need to nest tables in each of the others in order to split each one separately but needing to do that in a situation where CSS tables are appropriate is unlikely since you are unlikely to need all that many cells in your CSS tables to lay your web page grid out the way you want. A web page grid is unlikely to need more than nine cells in total to set up the grid you require for your page whereas a HTML table may contain hundreds of cells to contain the tabular data it is displaying and so needing to use a separate table to split the columns or rows as required is a practical alternative for CSS where it would be totally impractical for HTML tables.

Here is an example that is proably about as complicated as or table nesting would ever get. This example consists of three rows and three columns with the first row containing one cell spanning the three columns and the second cell in the first column spanning the second and third rows.

<div class="row">
<div class="col"></div>
;</div>
<div class="row">
<div class="table">
<div class="col"></div>
<div class="table">
<div class="row">
<div class="col"></div>
<div class="col"></div>
;</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</div>
</div>

With of course CSS to define them appropriately.

.table {display:table;}
.row {display;table-row;}
.col {display;table-cell;

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate