HTML table with special layout - html

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.