divs as a table

by Peter Aad

HTML

<div class="Table">
    <div class="Title">
        <p>This is a Table</p>
    </div>
    <div class="Heading">
        <div class="Cell">
            <p>Heading 1</p>
        </div>
        <div class="Cell">
            <p>Heading 2</p>
        </div>
        <div class="Cell">
            <p>Heading 3</p>
        </div>
    </div>
    <div class="Row">
        <div class="Cell cell-a">
            <p>Row 1 Column 1</p>
        </div>
        <div class="Cell cell-b">
            <p>Row 1 Column 2</p>
        </div>
        <div class="Cell cell-c">
            <p>Row 1 Column 3 Row 1 Column 3 Row 1 Column 3</p>
            <p>Row 1 Column 3 Row 1 Column 3 Row 1 Column 3</p>
            <p>Row 1 Column 3 Row 1 Column 3 Row 1 Column 3</p>
        </div>
    </div>
    <div class="Row">
        <div class="Cell">
            <p>Row 2 Column 1</p>
        </div>
        <div class="Cell">
            <p>Row 2 Column 2</p>
        </div>
        <div class="Cell">
            <p>Row 2 Column 3</p>
        </div>
    </div>
</div>

CSS

.Table
    {
        display: table;
    }
    .Title
    {
        display: table-caption;
        text-align: center;
        font-weight: bold;
        font-size: larger;
    }
    .Heading
    {
        display: table-row;
        font-weight: bold;
        text-align: center;
    }
    .Row
    {
        display: table-row;
    }
    .Cell
    {
        display: table-cell;
        border: none;
        padding-left: 5px;
        padding-right: 5px;
    }
.cell-a { background:red; }
.cell-b { background:blue; }
.cell-c { background:pink; }