Ankur Ankur - 19 days ago 7
CSS Question

html table using rowspan colspan

I am trying to create a table that looks as follows ..

enter image description here



table, td {
border-collapse: collapse;
border: 2px solid blue;
}

<table>
<tr>
<td rowspan='6' colspan='6'>&nbsp;</td>
<td rowspan='4'>&nbsp;</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>





In the my code, are the empty rows causing it to mis-print the table ?
Can you tell why browsers are rendering it incorrectly ? Or flaw in logic ?

Answer

You need to update your css on cell dimensions.

Here is what you could do.

table,
td {
  border-collapse: collapse;
  border: 2px solid blue;
  text-align: center;
}
table {
  width: 100%;
  height: 350px;
}
td {
  width: 50px;
  height: 50px;
}
<table>
  <tr>
    <td rowspan='6' colspan='6'>6X6</td>
    <td rowspan='4'>4X1</td>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
  <tr>
    <td>1
    </td>
  </tr>
  <tr>
    <td>2
    </td>
  </tr>

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

Comments