CSS Tables With Row Span

Demonstrates how to set up div/CSS-based tables in which some rows have cells that span multiple "columns".

by eventide

HTML

<div class="multiCellRow">
    <div class="halfRowCell" style="background-color: red;">
        <p>Row 1 - Cell 1</p>
    </div>
    <div class="halfRowCell" style="background-color: orange;">
        <p>Row 1 - Cell 2</p>
    </div>
</div>
<div class="multiCellRow" style="clear: left;">
    <div class="threeCellRowOutsideCell" style="background-color: yellow;">Row 2 - Cell 1</div>
    <div class="threeCellRowInsideCell" style="background-color: green;">Row 2 - Cell 2</div>
    <div class="threeCellRowOutsideCell" style="background-color: lightblue;">Row 2 - Cell 3</div>
</div>
<div class="fullRowCell" style="background-color: pink;">
    <p>Row 3 - Cell 1</p>
</div>

CSS

div {
    text-align: center;
}
.multiCellRow {
    width: 100%;
}
.fullRowCell {
    clear: left;
    width: 100%;
}
.halfRowCell {
    float: left;
    width: 50%;
}
.threeCellRowOutsideCell {
    float: left;
    width: 33%;
}
.threeCellRowInsideCell {
    float: left;
    width: 34%;
}