Cannot merged two cell 9 and X into one cell in HTML table - Stack Overflow

I tried to create html table based on below image but could not set two cells in one cell of table.

I got below output, where I cannot merge cell 9 with cell X, if I want then table structure is changed.

My code also given below

    <table border="1" cellspacing="0" cellpadding="5">
      <tr>
        <td colspan="5">1</td>
      </tr>
      <tr>
        <td colspan="3">2</td>
        <td colspan="2" rowspan="3">3</td>
      </tr>
      <tr>
        <td rowspan="3">4</td>
        <td colspan="2">5</td>
      </tr>
      <tr>
        <td rowspan="2">8</td>
        <td>9</td>
      </tr>
      <tr>
        <td>X</td>
        <td>6</td>
        <td>7</td>
      </tr>
    </table>

I tried to create html table based on below image but could not set two cells in one cell of table.

I got below output, where I cannot merge cell 9 with cell X, if I want then table structure is changed.

My code also given below

    <table border="1" cellspacing="0" cellpadding="5">
      <tr>
        <td colspan="5">1</td>
      </tr>
      <tr>
        <td colspan="3">2</td>
        <td colspan="2" rowspan="3">3</td>
      </tr>
      <tr>
        <td rowspan="3">4</td>
        <td colspan="2">5</td>
      </tr>
      <tr>
        <td rowspan="2">8</td>
        <td>9</td>
      </tr>
      <tr>
        <td>X</td>
        <td>6</td>
        <td>7</td>
      </tr>
    </table>

• html
• html-table

Share Improve this question Follow edited Feb 18 at 18:43 TylerH 21.1k7979 gold badges7979 silver badges114114 bronze badges asked Jan 23 at 13:31 Sharfuddin ZishanSharfuddin Zishan 7933 silver badges1717 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

colspans and rowspans need a normal row and column (respectively) to reference. From the posted images I assessed that the table was 5 columns wide and 5 rows high. Cell 9 is 1 column wide and 2 rows high (rowspan="2").

Example 1

<!-- There should be a row <tr> of normal cells <td> or <th> -->
<!-- This row has 5 columns consisting of 5 cells -->

<tr><td> 1 </td><td> 2 </td><td> 3 </td><td> 4 </td><td> 5 </td></tr>

<!-- This row has 2 columns consisting of a cell 3 columns wide
     and a cell 2 columns wide -->

<tr><td colspan="3">XXXXX 3 XXXXXXX</td><td colspan="2">X 2 X</td></tr>

<!-- If you don't actually want such a row then hide it:
     ex. tr { visibility: collapse } -->

Example 2

  <!-- For rowspans a column must be used as a guide. In the Demo
     the first column is hidden each cell is <td class="guide">
     with visibility: collapse. Note: visible columns was 
     neccessary. -->

   <tr><td> 1 </td> <td rowspan="3"> <td>       </td></tr>
   <tr><td> 2 </td>                  <td rowspan="4"></tr>
   <tr><td> 3 </td> </td>                            </tr>
   <tr><td> 4 </td> <td rowspan="2">                 </tr>
   <tr><td> 5 </td> </td>            </td>           </tr>

Demo

:root {
  font: 3vmax/1.5 "Segoe UI"
}

body {
  padding: 0;
  margin: 0
}

main {
  display: flex;
  flex-direction: column;
  width: min-content;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 25rem;
  height: 12.5rem;
  margin: 2rem 0 0 -20vw;
}

td {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #000;
  text-align: center;
}

.guide {
  border: 0;
  visibility: collapse;
}

<main>
  <table>
    <tbody>
      <tr>
        <td class="guide"></td>
        <td colspan="5">1</td>
      </tr>
      <tr>
        <td class="guide"></td>
        <td colspan="3">2</td>
        <td colspan="2" rowspan="3">3</td>
      </tr>
      <tr>
        <td class="guide"></td>
        <td rowspan="3">4</td>
        <td colspan="2">5</td>
      </tr>
      <tr>
        <td class="guide"></td>
        <td rowspan="2">8</td>
        <td rowspan="2">9</td>
      </tr>
      <tr>
        <td class="guide"></td>
        <td>6</td>
        <td>7</td>
      </tr>
    </tbody>
  </table>
</main>

This is a limitation in table. I tested with all major browsers. Only when I add another column at the end, then this will work. This is the solution or work-around if you call it, but it is working perfectly! It is also closest to your code.

  <style>
  td {
      width: 50px;
      height: 50px;
      border: 1px solid black;
      text-align: center;
  }
  td.z {
      width: 0;
      border: none;
  }
  </style>
  <table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td colspan="5">1</td>
      <td class="z"></td>
    </tr>
    <tr>
      <td colspan="3">2</td>
      <td colspan="2" rowspan="3">3</td>
      <td class="z"></td>
    </tr>
    <tr>
      <td rowspan="3">4</td>
      <td colspan="2">5</td>
      <td class="z"></td>
    </tr>
    <tr>
      <td rowspan="2">8</td>
      <td rowspan="2">9</td>
      <td class="z"></td>
    </tr>
    <tr>
      <td>6</td>
      <td>7</td>
      <td class="z"></td>
    </tr>
  </table>