Table without tables.

This is a simple demonstration showing how to create a table without using tables. The example uses div and p tags with CSS only.

by Michael Borck

HTML

<div class="labels">
    <p>First</p>
    <p>Last</p>
    <p>Position</p>
</div>
<div class="row">
    <p>Jane</p>
    <p>Doe</p>
    <p>Professor</p>
</div>
<div class="row">
    <p>John</p>
    <p>Smith</p>
    <p>Senior Lecturer</p>
</div>
<p class="tableEnd" />

<table>
    <tr>
        <th>First</th>
        <th>Last</th>
        <th>Position</th>
    </tr>
    <tr>
        <td>Jane</td>
        <td>Doe</td>
        <td>Professor</td>
    </tr>
    <tr>
         <td>John</td>
        <td>Smith</td>
        <td>Senior Lecturer</td>
    </tr>
</table>

CSS

.labels>p, .row>p {
    vertical-align: middle;
    float: left;                     /* includes implicit display: block */
    margin: 2px 0px 0px 2px;         /* contributes 2 to width and height*/
}

.row, .labels {
    width: 372px;
    margin:0;
    padding: 0;
}

.tableEnd {
    clear: both;
    display: block;
    margin-bottom: 10px;
    height: 10px;
}

.labels>p, th {
    font-weight: bold;
    background-color: darkblue;
    color: white;
}

.row>p, td {
    background-color: lightgray;
    color: black;
}

th, td, .labels>p, .row>p  {
    border-width: 1px;   /* contributes 2 to width and height   */
    padding: 10px;       /* contributes 20 to width and height  */
    font-size: 16px;     /* contributes 16px to veritcal height */
    width: 100px;
    text-align: center;
    border: 1px solid black;
}