Search code examples
htmlhtml-table

I have problems with HTMl table, It needs to be solved without using CSS

I wrote this structure for table in the image, but it doesn't work. What is wrong with that and why rowspan and colspan do not work? I've used CSS only for setting width and height of cells.

enter image description here

td {
    width: 60px;
    height: 20px;
    text-align: center;
}
<table border="1" cellspacing="0">
    <caption>Another table 1.0</caption>
    <tr>
        <td rowspan="2" colspan="2">r1c1</td>
        <td>r1c3</td>
        <td rowspan="2">r1c4</td>
        <td colspan="2" rowspan="2">r1c5</td>
    </tr>
    <tr>
        <td rowspan="2">r2c3</td>
    </tr>
    <tr>
        <td colspan="2">r3c1</td>
        <td colspan="2">r3c4</td>
        <td>r3c6</td>
    </tr>
    <tr>
        <td>r4c1</td>
        <td colspan="2">r4c2</td>
        <td rowspan="2">r4c4</td>
        <td colspan="2">r4c5</td>
    </tr>
    <tr>
        <td rowspan="2" colspan="2">r5c1</td>
        <td rowspan="2">r5c3</td>
        <td rowspan="2" colspan="2">r5c5</td>
    </tr>
    <tr>
        <td>r6c4</td>
    </tr>
</table>

Solution

  • Without CSS you need to explicitly set the size of cells.

    <table border="1" cellspacing="0">
    <caption>HTML only</caption>
    <tr>
        <td colspan="2" rowspan="2" width="120" height="60">r1c1</td>
        <td width="60" height="30">r1c3</td>
        <td rowspan="2" width="60" height="60">r1c4</td>
        <td colspan="2" rowspan="2" width="120" height="60">r1c5</td>
    </tr>
    <tr>
        <td rowspan="2" width="60" height="60">r2c3</td>
    </tr>
    <tr>
        <td colspan="2" width="120" height="30">r3c1</td>
        <td colspan="2" width="120" height="30">r3c4</td>
        <td width="60" height="30">r3c6</td>
    </tr>
    <tr>
        <td width="60" height="30">r4c1</td>
        <td colspan="2" width="120" height="30">r4c2</td>
        <td rowspan="2" width="60" height="60">r4c4</td>
        <td colspan="2" width="120" height="30">r4c5</td>
    </tr>
    <tr>
        <td rowspan="2" colspan="2" width="120" height="60">r5c1</td>
        <td rowspan="2" width="60" height="60">r5c3</td>
        <td rowspan="2" colspan="2" width="120" height="60">r5c5</td>
    </tr>
    <tr>
        <td width="60" height="30">r6c4</td>
    </tr>
</table>

    If you can have minimal CSS, you need to add 6 <col> tags and set its width and set height on tr.

    col {
  width: 60px;
}
tr {
  height: 30px;
}
    <table border="1" cellspacing="0">
    <caption>With CSS</caption>
    <col><col><col><col><col><col>
    <tr>
        <td rowspan="2" colspan="2">r1c1</td>
        <td>r1c3</td>
        <td rowspan="2">r1c4</td>
        <td colspan="2" rowspan="2">r1c5</td>
    </tr>
    <tr>
        <td rowspan="2">r2c3</td>
    </tr>
    <tr>
        <td colspan="2">r3c1</td>
        <td colspan="2">r3c4</td>
        <td>r3c6</td>
    </tr>
    <tr>
        <td>r4c1</td>
        <td colspan="2">r4c2</td>
        <td rowspan="2">r4c4</td>
        <td colspan="2">r4c5</td>
    </tr>
    <tr>
        <td rowspan="2" colspan="2">r5c1</td>
        <td rowspan="2">r5c3</td>
        <td rowspan="2" colspan="2">r5c5</td>
    </tr>
    <tr>
        <td>r6c4</td>
    </tr>
</table>