Home/ Questions/Q 9054547
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T13:43:00+00:00

This time I try to draw a table like this: +—–+—–+—–+—–+ | | |

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0