htmlhtml-table

HTML Table, colspan issue

I'm trying to create a table like this table i want to make

And this is what I get when I run my HTML code erratic colspan

The column width isn't same for the all the columns even after setting the colspan. Probably "colspan" attribute isn't working according to my expectation. What am I doing wrong?

My code:

<table border="5" width="400" height = "400" table-layout = "auto">
  <tr>
    <td colspan="4" align="center">Colspan = “4”</td>
  </tr>
  <tr>
    <td rowspan="3" colspan="1"> col1 </td>
    <td rowspan="3" colspan="1"> col2 </td>
    <td rowspan="3" colspan="1"> col3 </td>
    <td rowspan="3" colspan="1"> col4 </td>
  </tr>
  <tr></tr>
  <tr></tr>
  <tr>
    <td colspan="2"> colspan = 2 </td>
    <td colspan="2"> colspan = 2 </td>
  </tr>
  <tr>
    <td colspan="3"> colspan = 3</td>
    <td> colspan = 1 </td>
  </tr>
</table>

Solution

  • If you are using bootstrap then it works automatically but below code is 100% works for you 

       <table  border="5">
      <tr>
        <td colspan="4" align="center" style="width: 100%;">Colspan = “4”</td>
      </tr>
      <tr>
        <td rowspan="3" colspan="1" style="width: 25%;"> col1 </td>
        <td rowspan="3" colspan="1" style="width: 25%;"> col2 </td>
        <td rowspan="3" colspan="1" style="width: 25%;"> col3 </td>
        <td rowspan="3" colspan="1" style="width: 25%;"> col4 </td>
      </tr>
      <tr></tr>
      <tr></tr>
      <tr>
        <td colspan="2" style="width: 50%;"> colspan = 2 </td>
        <td colspan="2" style="width: 50%;"> colspan = 2 </td>
      </tr>
      <tr>
        <td colspan="3" style="width: 75%;"> colspan = 3</td>
        <td style="width: 25%;"> colspan = 1 </td>
      </tr>
   </table>