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

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.

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>

CodePudding user response：

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>

CodePudding user response：

Check the following

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td {
            width: 30px;
            height: 30px;
            text-align: center;
        } 
    </style>
</head>

<body>
    <table border="1">
        <tbody>
          <tr>
            <td colspan="2" rowspan="2">r1c1</td>
            <td>r1c3</td>
            <td>r1c4</td>
            <td colspan="2" rowspan="2">r1c5</td>
          </tr>
          <tr>
            <td rowspan="2">r2c3</td>
            <td></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 colspan="2" rowspan="2">r5c1</td>
            <td rowspan="2">r5c3</td>
            <td colspan="2" rowspan="2">r5c5</td>
          </tr>
          <tr>
            <td>r6c4</td>
          </tr>
        </tbody>
        </table>
</body>

</html>