CODEWITHSUNDEEP
htmlhtml-table
Farhad Jafari
Farhad Jafari

Reputation: 376

Using colspan and rowspan in same cell in HTML table

My default table looks like this, with 4 separate cells:

See This Picture

I want to create a table with this schema (merge r1c1 & r1c2 &r2c2):

See This Picture

My default table code is:

<table border="2">
<caption style="border: 1px dotted;">Table 1</caption>
<tr>
<td>r1c1</td>
<td>r1c2</td>
</tr>
<tr>
<td>r2c1</td>
<td>r2c2</td>
</tr>
</table>

And my merged table code look like this (but doesn't do what I wanted!):

<table border="2">
<caption style="border: 1px dotted;">Table 1</caption>
<tr>
<td colspan="2" rowspan="2">r1c1 & r1c2 & r2c2</td>
</tr>
<tr>
<td >r2c1</td>
</tr>
</table>

How do I get those three cells merged using colspan and rowspan?

Upvotes: 2

Views: 2640

Answers (1)

Midhun Darvin
Midhun Darvin

Reputation: 1255

No you cannot implement this with table cells. However, A similar layout can be displayed using css styles as shown in this fiddle.

html

<table border="2">
    <caption style="border: 1px dotted;">Table 1</caption>
    <tr>
        <td id="r1c1" colspan="2">r1c1 & r1c2</td>
    </tr>
    <tr>
        <td>r2c1</td>
        <td id="r2c2" rowspan="2">r2c2</td>
    </tr>
</table>

css

#r1c1 {
border: none !important;
}

#r2c2 {
border: none !important;
}


You can create a similar L shape using div tags by applying similar css styles as shown in this fiddle. Also you can refer this link to find css styles for creating various shapes.

Upvotes: 1

Related Questions