HTML table with special layout

Question

How can I make a table in css/html like this:

I want to use only div, not <table> tags.

Code, yet:

<style>
.tab_in {
    display: table-cell;
    border: 1px dotted red;
    padding: 4px 6px;
}
</style>

<div style="text-align:center;">

<div class="tab_in">
<div>a</div>
<div>b</div>
</div>

<div class="tab_in" style="vertical-align:middle;">c</div>
<div class="tab_in" style="vertical-align:middle;">d</div>
<div class="tab_in" style="vertical-align:middle;">e</div>

</div>

Answer 1

Use fluid grid system which uses percents instead of pixels for column widths. and handle the external width of it using a external container.

You can do something like:

JSFiddle Demo

HTML:

<div class="box">
    <div class="row-fluid show-grid">
        <div class="span4">
            <div class="rowspan2">
                <span class="valign-helper"></span>
                a
            </div>
            <div class="rowspan2">
                <span class="valign-helper"></span>
                b
            </div>
        </div>
        <div class="span4">
            <div>c</div>
            <div>d</div>
            <div>e</div>
            <div>f</div>
        </div>
        <div class="span4">
            <div>g</div>
            <div>h</div>
            <div>i</div>
            <div>j</div>
        </div>
    </div>
</div>

Note: to vertically align text you can also do using "display: table-cell" css property to the class 'rowspan2'. and remove the tag with class "valign-helper"

CSS:

body {
    margin: 50px;
}

.box {
    width:500px;
    padding: 0 10px;
    background-color: #000;
}

.show-grid [class*="span"] div {
    background-color: #fff;
    text-align: center;
    min-height: 40px;
    line-height: 40px;
    margin-left: 0;
    margin-top: 10px;
    margin-bottom: 10px;
}

.show-grid [class*="span"] .rowspan2 {
    height: 90px;
    margin-bottom: 0;
}

.valign-helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

Answer 2

Here's an example of one way you might accomplish this:

http://jsfiddle.net/mori57/cDEGw/1/

html:

<table class="tab_out">
    <tr>
        <td rowspan="0" class="col">
            <div class="tab_in">a</div>
            <div class="tab_in">b</div>
        </td>
        <td><div class="tab_in">c</div></td>
        <td><div class="tab_in">g</div></td>
    </tr>
    <tr>
        <td><div class="tab_in">d</div></td>
        <td><div class="tab_in">h</div></td>
    </tr>
    <tr>
        <td><div class="tab_in">e</div></td>
        <td><div class="tab_in">i</div></td>
    </tr>
    <tr>
        <td><div class="tab_in">f</div></td>
        <td><div class="tab_in">j</div></td>
    </tr>
</table>

CSS:

.tab_out {
    width: 800px;
    margin-bottom: 20px;
    text-align:center;
}
.tab_out td {
    border:1px dotted red;
    padding: 4px 6px;
    margin-bottom: 0;
    vertical-align:middle;
}
.tab_in {
    display: block;
    border: 1px dotted green;
}

Is this any closer to what you're looking for? I really don't see an efficient way to accomplish your layout without using a table, at this point. Mind you, the div inside each TD is optional, I just used it to show you where the element actually appears inside the table.