CODEWITHSUNDEEP
htmlhtml-table
Struggling Developer
Struggling Developer

Reputation: 295

How to create a cell using rowspan and colspan in a table

I have two rows and two columns in my table i have do the following using rowspan and colspan. There will be one cell on the corner. Please check the fiddle. I want to create below using table.

http://jsfiddle.net/UvjwJ/

I have to create it using table:-

<table>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

How can I do this. I have to do this using table not div or removing the border of td. I dont have any idea to do that. I have tried to find this question in google but I can't find any.

Upvotes: 0

Views: 1043

Answers (2)

Adrian Mare
Adrian Mare

Reputation: 99

this is the only way you could achive what you want using only tables: http://jsfiddle.net/ZeVjU/ . It uses multiple tables and align (and it will work on all browsers, rowspan doesn't work in all browsers).

Moreover, keep in mind that a table cell needs to be a rectangle. You can not have other kind of cells.

<table width="200" border="1" cellpadding="2">
<tr>
    <td>
        <table border="1" align="right">
            <tr>
                <td>asdadasd</td>
            </tr>
        </table>
        asdasdasdas das das das das dasdasd as dasd asd asdas dasd asd asd as dasdas dasd a
    </td>
</tr>
</table>

Upvotes: 2

Steeven
Steeven

Reputation: 4200

Well, can you use css? And do you want the text to fit around the cell or is it enough with one coloumn?

You can of course do it partly:

Make the first cell a span over two rows. And then color up the border of the corner cell that is still there. Then you will have one long cell (a coloumn) to the left, and two cells to the right, where you can only see the top one.

HTML:

<table cellspacing="0">
    <tr>
        <td rowspan="2">A coloumn here</td>
        <td id="toprightcorner">A cell here with borders</td>
    </tr>
    <tr>

        <td>A cell here</td>
    </tr>
</table>

CSS:

table {
    border: solid 2px black;
}

#toprightcorner{
    border-left: solid 2px black;
    border-bottom: solid 2px black;
}

Example

Upvotes: 0

Related Questions