Non-Standard Free Width Height HTML Table

Question

I'm trying to get an HTML markup that represents the following table layout:

enter image description here

I tried this but it's not working:

       <table border="1">
            <tr>
                <td style="height: 800px">
                    1
                </td>
                <td style="width: 300px; height: 400px">
                    2
                </td>
            </tr>
            <tr>
                <td style="height: 200px">
                    <p>3</p>
                </td>
                <td style="height: 600px">
                    4
                </td>
            </tr>
        </table>

possible duplicate of [HTML Table different number of columns in different rows](http://stackoverflow.com/questions/3838488/html-table-different-number-of-columns-in-different-rows) — Robert Dundon, Oct 13 '14 at 15:38
I wouldn't use a table to do this, I suggest using some div's. — Michiel, Oct 13 '14 at 15:43
Since that will most likely not represent tabular data, you should not use a table in the first place., — CBroe, Oct 13 '14 at 15:43

Troy Gizzi · Accepted Answer · 2014-10-13T16:36:33.570

3

This looks pretty close to the image you provided. It's a little tricky because it actually requires 3 rows, but once you get your head wrapped around rowspan, then it makes sense.

<table border="1">
  <tr style="height: 200px;">
    <td style="width: 400px;" rowspan="2">
      1
    </td>
    <td style="width: 200px;">
      2
    </td>
  </tr>
  <tr style="height: 200px;">
    <td rowspan="2">
      4
    </td>
  </tr>
  <tr style="height: 50px;">
    <td>
      <p>3</p>
    </td>
  </tr>
</table>

edited Oct 13 '14 at 16:36

answered Oct 13 '14 at 15:44

Troy Gizzi

2,480
1
14
15

1

Darn IE. :-) If you move the height styles to the `tr`s, then it works with IE 11. I've updated this answer to do that instead. However, I think that mikelt21's alternate approach with floating divs is superior, as long as you don't _need_ to use tables for whatever reason – Troy Gizzi Oct 13 '14 at 16:35
Thank you, And as a last fiddle (dynamic width for the first column): http://jsfiddle.net/fb6fL5vL/ – yazanpro Oct 13 '14 at 17:36

mikelt21 · Answer 2 · 2014-10-13T16:31:23.890

You just need to add another row and add rowspans:

<table border="1">
    <tr>
        <td style="width: 300px; height: 400px" rowspan="2">
            1
        </td>
        <td style="width: 300px; height: 200px">
            2
        </td>
    </tr>
    <tr>
        <td style="height: 200px" rowspan="2">
            4
        </td>
    </tr>
    <tr>
        <td style="height: 100px">
            3
        </td>
    </tr>
</table>

See jsfiddle: http://jsfiddle.net/mt009cha/

EDIT

Do you have to use tables? This seems more like a layout and divs might be more appropriate.

Html:

<div class="container">
    <div class="left">
        <div style="height: 498px">1</div>
        <div style="height: 98px">3</div>
    </div>
    <div class="right">
        <div style="height: 298px">2</div>
        <div style="height: 298px">4</div>
    </div>
</div>

CSS:

div {
    border: 1px solid black;
}

.container {
    width: 600px;
    height: 600px;
}

.left {
    width: 398px;
    height: 100%;
    float: left;
}

.right {
    width: 198px;
    height: 100%;
    float: right;
}

See jsfiddle: http://jsfiddle.net/zynt5j7e/

Sorry, I had to uncheck the answer because it doesn't work with IE. — yazanpro, Oct 13 '14 at 16:02
if you don't need to use tables try my updated solution. i verified that it works in IE. — mikelt21, Oct 13 '14 at 16:32

score 1 · Answer 3 · answered Oct 13 '14 at 16:45

FIDDL

If you must use tables:

<table class="tbl">
    <tr>
        <td>
            <table>
                <tr>
                    <td style="height: 800px">
                        <p>top left</p>
                    </td>
                </tr>
                <tr>
                    <td style="height: 200px">
                        <p>bottom left</p>
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table>
                <tr>
                    <td style="height: 400px">
                        <p>top left</p>
                    </td>
                </tr>
                <tr>
                    <td style="height: 600px">
                        <p>bottom left</p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Some CSS:

.tbl, .tbl table { border-collapse: collapse; width:100%; }
.tbl td, .tbl table td{ border:1px solid black; padding:0; margin: 0; }

I ended up using your approach because it's more maintainable. Thanks, — yazanpro, Oct 13 '14 at 21:15
@yazanpro If this helped you please click the checkmark by my answer to select it :) — I wrestled a bear once., Oct 14 '14 at 14:12

Non-Standard Free Width Height HTML Table

3 Answers3