A tableless table!

by Alon Rotem

HTML

<div class="table">
    <div class="row">
        <div class="cell header">Brand</div>
        <div class="cell header">PPM</div>
        <div class="cell header">Alc. volume</div>
        <div class="cell header">Origin</div>
    </div>
    <div class="row">
        <div class="cell">Lagavulin 16</div>
        <div class="cell">35</div>
        <div class="cell">43%</div>
        <div class="cell">Islay, Scottland</div>
    </div>
    <div class="row">
        <div class="cell">Ardbeg</div>
        <div class="cell">55</div>
        <div class="cell">46%</div>
        <div class="cell">Islay, Scottland</div>
    </div>
    <div class="row">
        <div class="cell">Octomore 06.2</div>
        <div class="cell">167</div>
        <div class="cell">58.2%</div>
        <div class="cell">Islay, Scottland</div>
    </div>
    <div class="caption">Center Caption</div>
</div>
<p>
    <div class="table" style="width:450px;">
        <div class="row">
            <div class="cell" style="width:50%;">element1</div>
            <div class="cell" style="width:50%;">element2</div>
        </div>
    </div>
    <div class="table" style="width:450px;">
        <div class="row">
            <div class="cell" style="width:100%;">element1</div>
        </div>
    </div>
</p>

CSS

.table {
    display:table;
    font-family: verdana;
    font-size: 10pt;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
    padding:2px;
    border: 1px solid black;
}
.cell:nth-of-type(1):not(.header) {
    background-color: #D3D3D3;
}
.cell:not(:nth-of-type(1)) {
    text-align:center;
}
.header {
    font-weight:bold;
    text-align:center;
    color: white;
    background-color: black;
    border: 1px solid gray;
}
.caption {
    border:1px solid black;
    caption-side: bottom;
    display: table-caption;
    text-align: center;
    background-color: yellow;
}