Reputation: 73
This is a table that I would like to achieve:
But I keep getting something like this:
This is what I've tried:
<table>
<tr>
<td rowspan="2">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2">d</td>
<td>e</td>
</tr>
</table>
Here's a link to JSFiddle with this (with some extra code for illustration): http://jsfiddle.net/2292D/
Upvotes: 1
Views: 100
Reputation: 17366
You need only vertical-align:middle
and text-align:center
Apply this css to div
div {
display:table-cell; // Change
vertical-align:middle; //Change
border: 1px solid blue;
}
td {
border: 1px solid red;
text-align:center; // Change
}
Upvotes: 1
Reputation: 3289
Here is the Solution
<table>
<tr>
<td rowspan="2">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2">d</td>
<td>e</td>
</tr>
</table>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
}
td {
border: 1px solid red;
}
</style>
Upvotes: 0
Reputation: 2157
apply your id on td
html:
<table>
<tr>
<td id="a" rowspan="2"><div>a</div></td>
<td id="b" colspan="2"><div >b</div></td>
</tr>
<tr>
<td id="c" colspan="2"><div >c</div></td>
</tr>
<tr>
<td id="d" colspan="2"><div >d</div></td>
<td id="e"><div >e</div></td>
</tr>
</table>
Upvotes: 0
Reputation: 2012
I guess you need 3 rows for that, try my code:
<table>
<tr>
<td rowspan="2"><div id="a">a</div></td>
<td colspan="2"><div id="b">b</div></td>
</tr>
<tr>
<td colspan="2"><div id="c">c</div></td>
</tr>
<tr>
<td colspan="2"><div id="d">d</div></td>
<td><div id="e">e</div></td>
</tr>
Here's my fiddle: http://jsfiddle.net/LLe5c/
Upvotes: 0
Reputation: 157434
Good old days using table
, use rowspan
and colspan
to achieve that kind of tablular structure, if you are using this for layout than don't, use div
instead with float
and CSS Positioning.
<table border="1" width="100%">
<tr>
<td rowspan="2" width="30%">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2" width="70%">d</td>
<td>e</td>
</tr>
</table>
Upvotes: 0