CODEWITHSUNDEEP
htmlhtml-table
Alexey Derevyanko
Alexey Derevyanko

Reputation: 15

Rowspan + colspan for whole row

Trying to get one cell inside a table, that will span to two rows and two columns.

Achieved this:

<table border="1">
    <tr>
        <td style="min-width: 100px">R1C1</td>
        <td style="min-width: 100px">R2C2</td>
    </tr>
    <tr>
        <td colspan='2' rowspan="3">R2C1, R3C1</td>
    </tr>
    <tr>
        <td>&nbsp</td>
    </tr>
    <tr>
        <td>&nbsp</td>
    </tr>
    <tr>
        <td rowspan="2">R4C1</td>
        <td rowspan="2">R4C2</td>
    </tr>
</table>

JSfiddle - http://jsfiddle.net/UmLqw/36/

Is there a way to get rid of those two cells to the right of R2?

UPD2

Ok, seems it's bit more complicated.

http://www.volleymsk.ru/ap/addons?section=Promotion

This is what i'm doing.

Upvotes: 1

Views: 4628

Answers (3)

Hussein Shehady
Hussein Shehady

Reputation: 217

you are not actually trying to get two rows, you just want to make one row bigger. the idea of row span is for it to be spanned among certain columns and not all.

you can achieve what you want through simple styling:

<table border="1">
        <tr>
        <td style="min-width: 100px">R1C1</td>
        <td style="min-width: 100px">R2C2</td>
    </tr>
    <tr style="height:30px">
        <td colspan='2'>R2C1,R3C1</td>
    </tr>
    <tr>
        <td rowspan="2">R4C1</td>
        <td rowspan="2">R4C2</td>
    </tr>
        </table>

EDIT: use a column to count rows so you can use rowspan:

<table border="1">
        <tr>
            <td>1</td>
        <td style="min-width: 100px">R1C1</td>
        <td style="min-width: 100px">R2C2</td>
    </tr>
    <tr >
        <td >2</td>
        <td colspan='2'rowspan='2' >R2C1,R3C1</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td >R4C1</td>
        <td >R4C2</td>
    </tr>
        </table>

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

If you submit the code to an HTML5 validator like http://validator.w3.org/nu/, it will tell you (in a somewhat technical way) that the markup violates the HTML table model. You cannot define a row that has no cells starting on it. Instead of making one row two rows, you can set the height of a row as desired.

It is unclear what you actually want, but on the basis of your second jsfiddle, it seems that you actually need a single table instead of two tables:

<table border cellspacing=0>
  <tr><td>R1C1 <td>R2C2 <td>R1C1 <td>R2C2
  <tr><td rowspan=2 colspan=2>R2C1, R3C1 <td colspan=2>R2C1
  <tr>                                   <td colspan=2>R3C1
  <tr><td>R4C1 <td>R4C2 <td>R4C1 <td>R4C2
</table>

Upvotes: 0

pavel
pavel

Reputation: 27082

You have in 3rd and 4th row 3 table cells, in the others just two. In this case there is no reason using rowspan in the second row, when you have there also colspan over all cells.

<table border="1">
    <tr>
        <td style="min-width: 100px">R1C1</td>
        <td style="min-width: 100px">R2C2</td>
    </tr>
    <tr>
        <td colspan='2'>R2C1, R3C1</td>
    </tr>
    <tr>
        <td rowspan="2">R4C1</td>
        <td rowspan="2">R4C2</td>
    </tr>
</table>

http://jsfiddle.net/UmLqw/38/

Upvotes: 1

Related Questions