html table layout again

Question

This time I try to draw a table like this:

+-----+-----+-----+-----+
|     |           |     |
|     |           |     |
+-----+           +-----+
|     |           |     |
|     |           |     |
+-----+-----+-----+-----+
|           |     |     |
|           |     |     |
+           +-----+-----+
|           |     |     |
|           |     |     |
+-----+-----+-----+-----+

I wrote my html code like this to achieve my goal:

<table id="table">
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td colspan="2" rowspan="2">&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="2">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

Previous question with style sheets as below:

td {
width: 20px;
height: 20px;
border: solid 1px #000;
}
tr {
height: 1.3em;
}

but this time ，it displays like this：

+-----+-----+-----+
|     |     |     |
|     |     |     |
+-----+     +-----+
|     |     |     |
|     |     |     |
+-----+-----+-----+
|     |     |     |
|     |     |     |
+     +-----+-----+
|     |     |     |
|     |     |     |
+-----+-----+-----+

What can I do now? Any solution will be appreciated.

http://stackoverflow.com/questions/2751127/how-can-i-select-first-second-or-third-element-with-given-class-name-using-css — Frank van Puffelen, Dec 31 '12 at 12:24

Gabriele Petrioli · Accepted Answer · 2012-12-31T12:31:39.490

1

You will need to use colgroup and col tag to define the width of the columns and not the tds directly..

td {
    height: 20px;
    border: solid 1px #000;
}
tr {
    height: 1.3em;
}

And

<table id="table">
    <colgroup>
        <col style="width: 22px;"/>
        <col style="width: 22px;"/>
        <col style="width: 22px;"/>
        <col style="width: 22px;"/>
    </colgroup>
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td colspan="2" rowspan="2">&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="2">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

Demo at http://jsfiddle.net/gaby/wvGNn/1/

edited Dec 31 '12 at 12:31

answered Dec 31 '12 at 12:23

Gabriele Petrioli

191,379
34
261
317

Yes, except that `colgroup` is not needed, and the widths of `col` elements are better set in CSS (where you can use various units). But the issue is that in the code in the question, there is nothing that sets a minimum width on the second column, so browsers may really minimize it. – Jukka K. Korpela Dec 31 '12 at 13:07
@JukkaK.Korpela, not really.. the problem was the the `td` had a specific width, so regardless of how many columns it spanned it became `20px` wide. In regards to the units, inline styles support the same exactly units as CSS rules do. But it should be in CSS indeed, to separate style from content.. – Gabriele Petrioli Dec 31 '12 at 13:21

html table layout again

1 Answers1