HTML Table, colspan issue

user_5154937 0
Viewed 7497

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" 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>

html-table html
4 Answers

td{
  min-width:100px;
  text-align: center;
}
<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>

You should set min-width of table.

Explanation

Before explanation, I am not good at English, so if you can't understand my explanation, please reply.

You want to make same width each table's td.

And your table width is 400, column is 4.

So, each column's width be set 100px.

It's result you should set min-width: 100px

user_84370990

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>

user_25671690

There is nothing wrong with your colspan attributes. A colspan simply says this columns should be x columns wide in relation to the other columns in this table.

This attribute contains a non-negative integer value that indicates for how many columns the cell extends. Its default value is 1. Values higher than 1000 will be considered as incorrect and will be set to the default value (1)

It does not say how wide a column is. You need to specify that you want your columns evenly spaced. You could specify a width in pixels. The disadvantage of this is that if you make your table bigger it'll not be equal again.

a better solution is to say that you expect a standard column to be 25% width (100%/4). you can do this using CSS:

td{width:25%}
<table border="5" width="400" height = "400" table-layout = "auto">
 <tr>
        <td  colspan = "4" align="center">Colspan = “4”</td>  <!--First row of the table-->      
    </tr>
    
    <tr>
        <td rowspan ="3" colspan = "1" > col1 </td>
        <td rowspan ="3" colspan = "1"> col2 </td>
        <td rowspan ="3" colspan = "1"> col3 </td>  <!--Second group of rows of the table consisting 3 rows-->  
        <td rowspan ="3" colspan = "1"> col4 </td>
        
    </tr>
    
    <tr></tr>   <!--occupied by the second group of rows of the table-->  
    <tr></tr>   <!--occupied by the second group of rows of the table-->

    <tr>
       <td colspan = "2"> colspan = 2 </td>  <!--3rd row which should contain 2 
                                             equal columns-->
       <td colspan ="2" > colspan = 2 </td> 
    </tr>

     <tr>   
       <td colspan="3"> colspan = 3</td> <!--4th row of which the first should 
                                         contain 3 cols and the second col is 1-->
       <td > colspan = 1 </td> 
     </tr>   
     </table>

Note: Even though some of your rows have less than 4 columns 25% still works because the browser will add the colspan rows up to compute the colspan width, so a colspan of 2 with have a width of 50%, etc.

user_5422510

Used bellow i have just added cellpadding=0 and cellspacing=0 and changed border =1 

    <table  cellpadding="0"  cellspacing="0" border="1" width="400" height = "400" table-layout = "auto">
        <tr>
            <td  colspan = "4" align="center">Colspan = “4”</td>  <!--First row of the table-->      
        </tr>
        
        <tr>
            <td rowspan ="3" colspan = "1" > col1 </td>
            <td rowspan ="3" colspan = "1"> col2 </td>
            <td rowspan ="3" colspan = "1"> col3 </td>  <!--Second group of rows of the table consisting 3 rows-->  
            <td rowspan ="3" colspan = "1"> col4 </td>
        
        </tr>
        
        <tr></tr>   <!--occupied by the second group of rows of the table-->  
        <tr></tr>   <!--occupied by the second group of rows of the table-->
        
        <tr>
           <td colspan = "2"> colspan = 2 </td>  <!--3rd row which should contain 2 
                                                 equal columns-->
           <td colspan ="2" > colspan = 2 </td> 
        </tr>
        
         <tr>   
           <td colspan="3"> colspan = 3</td> <!--4th row of which the first should 
                                             contain 3 cols and the second col is 1-->
           <td > colspan = 1 </td> 
         </tr>   
         </table>

user_85259050
Related