Creating complex table structure without using css

Question

I am trying to make this table in HTML without using CSS, but I am not getting the desired output. I have tried a bunch of other combinations for the row with 6:2:3 rowspan.

This is the desired output

This is the code I am using.

<!doctype html>
<html>
  <head>
    <title>Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th rowspan="3">&nbsp;</th>
        <th colspan="3">&nbsp;</th>
      </tr>
      <tr>
        <th colspan="2">&nbsp;</th>
        <th rowspan="2">&nbsp;</th>
      </tr>
      <tr>
        <th>&nbsp;</th>
        <th>&nbsp;</th>
      </tr>
      <tr>
        <td rowspan="2">&nbsp;</td>
        <td rowspan="2">&nbsp;</td>
        <td rowspan="2">&nbsp;</td>
        <td >&nbsp;</td>
      </tr>
      <tr>
        <td >&nbsp;</td>
      </tr>
      <tr>
        <td rowspan="6">&nbsp;</td>
        <td rowspan="2">&nbsp;</td>
        <td rowspan="2">&nbsp;</td>
        <td rowspan="3">&nbsp;</td>
      </tr>
      <tr>
        <td rowspan="2">&nbsp;</td>
        <td rowspan="2">&nbsp;</td>
      </tr>
      <tr>
        <td rowspan="2">&nbsp;</td>
        <td rowspan="2">&nbsp;</td>
        <td rowspan="3">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
  </body>
</html>

Instead of table, I suggest searching and playing a bit with CSS Grid. Jen Simmons does some great talks, one of her examples matches closely to what you're trying to learn: labs.jensimmons.com/2017/01-011.html — stealththeninja
– stealththeninja, Commented Sep 14, 2019 at 19:17
I will surely give you a pure html code that can make the table you want. Wait me for a short time — Addisu Tefera
– Addisu Tefera, Commented Nov 6 at 17:36

symlink · Accepted Answer · 2019-09-14 19:39:10Z

Done Heights may not be set but it works properly

table,
td {
  border: 1px solid black;
}

td {
  height: 50px;
}

<table style="width:100%">

  <tr>
    <td>5</td>
    <td colspan="3">
      <table style="width:100%">
        <tr>
          <td>
            <table style="width:100%;margin-top:50px;">
              <tr>
                <td>6</td>

              </tr>

            </table>
          </td>
          <td>7</td>
        </tr>


      </table>




    </td>

  </tr>
  <tr>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>

      <table style="width:100%">
        <tr>
          <td>11</td>
        </tr>
      </table>
      <table style="width:100%">
        <tr>
          <td>12</td>
        </tr>
      </table>

    </td>


  </tr>
  <tr>
    <td></td>
    <td class="not">
      <table style="width:100%">
        <tr>
          <td>13</td>
        </tr>
        <tr>
          <td>14</td>
        </tr>
        <tr>
          <td>15</td>
        </tr>
      </table>
    </td>
    <td colspan="2">
      <table style="width:100%">
        <tr>
          <td>16</td>
        </tr>
        <tr>
          <td>17</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>18</td>
    <td>16</td>
    <td>20</td>
    <td>21</td>
  </tr>
</table>

diehardDev · Accepted Answer · 2024-07-15 05:20:56Z

@Navdeep I know this is a bit too late, but this piece of code does exactly what you wanted here is the output

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            body {
                margin: 5px;
            }
    
            table,
            th,
            td {
                border: 1px solid black;
                word-wrap: break-word;
            }
    
            table {
                border-spacing: 0px;
                text-align: center
            }
        </style>
    </head>
    <body>
        <div align="center">
    
            <table id="complexTable" style="width:100%">
                <!-- first row -->
                <tr>
                    <td rowspan="3" width="20%">1</td>
                    <td colspan="4" width="80%">2</td>
                </tr>
                <tr>
                    <td colspan="2">3</td>
                    <td rowspan="2" colspan="2">4</td>
                </tr>
                <tr>
                    <td colspan="2">5</td>
                </tr>
    
                <!-- second row -->
                <tr>
                    <td rowspan="2">6</td>
                    <td rowspan="2">7</td>
                    <td rowspan="2">8</td>
                    <td colspan="2">9</td>
                </tr>
                <tr>
                    <td>10</td>
                </tr>
    
                <!-- third row -->
                <tr>
                    <td rowspan="3">11</td>
    
                    <td colspan="2">12</td>
    
                    <!-- same row, another new column -->
                    <td rowspan="2" colspan="2">13</td>
                </tr>
                <tr>
                    <!-- goes under 12 -->
                    <td colspan="2">14</td>
                </tr>
                <tr>
                    <!-- goes under 12 & 14 -->
                    <td colspan="2">15</td>
    
                    <!-- This is going to fill the hole under 13 without creating extra row -->
                    <td colspan="2">16</td>
                </tr>
    
                <!-- 4th row -->
                <tr>
                    <td width="20%">17</td>
                    <td width="20%">18</td>
                    <td width="20%">19</td>
                    <td colspan="2">20</td>
                </tr>
                <!-- only for ensuring that each cell is of equal width-->
                <tr hidden>
                    <td width="20%">&nbsp;</td>
                    <td width="20%">&nbsp;</td>
                    <td width="20%">&nbsp;</td>
                    <td width="20%">&nbsp;</td>
                    <td width="20%">&nbsp;</td>
                </tr>
            </table>
        </div>
    </body>
    </html>

manjurul karim · Accepted Answer · 2025-03-05 11:49:42Z

-2

      table {
        width: 50%;
        height: 80vh;
        border-collapse: collapse;
        margin: 0 auto;
      }

      td {
        border: 4px solid black;
        padding: 10px;
        text-align: left;
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    
  </head>
  <body>
    <table>
      <tr>
        <td rowspan="3"></td>
        <td colspan="5"></td>
      </tr>
      <tr>
        <td colspan="2"></td>
        <td rowspan="2"></td>
      </tr>
      <tr>
        <td colspan="2"></td>
      </tr>

      <tr>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
      </tr>
      <tr>
        <td rowspan="3"></td>
        <td colspan="2"></td>
        <td rowspan="2"></td>
      </tr>
      <tr>
        <td colspan="2"></td>
      </tr>
      <tr>
        <td colspan="2"></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

answered Mar 5 at 11:49

manjurul karim

1

1 Comment

Community Mar 5 at 23:20

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Yash · Accepted Answer · 2025-08-01 16:28:51Z

-2

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <table border="1" width="200px" cellpadding="5" cellspacing="0">
            <tr>
                <td rowspan="3"></td>
                <td colspan="4"></td>
                <!-- <td></td>
            <td></td>
            <td></td> -->
            </tr>
            <tr>
                <!-- <td></td> -->
                <td colspan="2"></td>
                <td rowspan="2" colspan="2"></td>
                <!-- <td ></td> -->
                <!-- <td></td> -->
            </tr>
            <tr>
                <!-- <td></td> -->
                <td colspan="2"></td>
                <!-- <td></td>
            <td></td> -->
                <!-- <td></td> -->
            </tr>
            <tr>
                <td rowspan="2"></td>
                <td rowspan="2"></td>
                <td rowspan="2"></td>
                <td colspan="2"></td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <!-- <td></td> -->
                <td colspan="2"></td>
                <!-- <td></td>
                <td></td>
                <td ></td> -->
            </tr>
            <tr>
                <td rowspan="3"></td>
                <td colspan="2"></td>
                <td colspan="2" rowspan="2"></td>
                <!-- <td></td> -->
                <!-- <td></td> -->
            </tr>
            <tr>
                <!-- <td></td> -->
                <td colspan="2"></td>
                <!-- <td></td> -->
                <!-- <td></td> -->
                <!-- <td></td> -->
            </tr>
            <tr>
                <!-- <td></td> -->
                <td colspan="2"></td>
                <td></td>
                <td colspan="2"></td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td colspan="2"></td>
                <!-- <td></td> -->
            </tr>
        </table>
    </body>
</html>
<!-- 9 row / 5 col -->

answered Aug 1 at 16:28

Yash

1

2 Comments

Community Aug 1 at 17:39

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

chrslg Aug 1 at 18:04

That answer has already been given years ago. Please, avoid code only answer, and add some explanation. Especially when answering to old questions, it is important to explain why your answer is different, and even better than existing answers.

Collectives™ on Stack Overflow

Creating complex table structure without using css

4 Answers 4

Comments

Comments

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

2 Comments

Related