CODEWITHSUNDEEP
htmlhtml-table
tymbark
tymbark

Reputation: 73

Merging cells in a table doesn't work as expected

This is a table that I would like to achieve:

correctly rendered table

But I keep getting something like this:

rendered table with error

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

Answers (5)

Dhaval Marthak
Dhaval Marthak

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

}

Fiddle Demo

Upvotes: 1

Amit
Amit

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

akash
akash

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

di3sel
di3sel

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

Mr. Alien
Mr. Alien

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.

Demo

<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

Related Questions