'How percentages widths in table cells work in HTML?

I have been wondering quite a long , that how the percentage width in table cells work in HTML.

Case 1: No table width specified, single row and columns are not given full space

<table>
    <tr>
        <td width="25%">mango</td>
        <td width="25%"">apple</td>
    </tr>
</table>

Case 2: No table width specified,single row and columns are given full space

<table>
    <tr>
        <td width="50%">mango</td>
        <td width="50%"">apple</td>
    </tr>
</table>

Case 3: No table width specified,single row and columns are given more than 100% space

<table>
    <tr>
        <td width="50%">mango</td>
        <td width="50%"">apple</td>
        <td widht="100%">guava</td>
    </tr>
</table>

Case 4: No table width specified, multiple rows specified and columns are giving following percentage configurations

<table>
    <tr>
        <td width="33%">mango</td>
        <td width="33%"">apple</td>
        <td widht="33%">guava</td>
    </tr>
    <tr>
        <td width="50%">papaya</td>
        <td width="50%">pomengrante</td>
    </tr>
</table>

Their outputs I am not able to correlate , please help me in this

html


Solution 1:[1]

The percentage will works depending On any Screen Resolution Equal to 100% So You Divide That Percentage In To Your Requirement Measurements In Percentages Example As Given below,(In Table tr width(100%)=(Addition of td(widths)) 

      <table style="width:100%;" border="1">
      <tr>
       <td wdith="50%">Mango</td>
       <td wdith="50%">Lemon</td>
      </tr> 
   <!--You Given For 1st Record measurements Then Automatically Adjested 2nd Record Also Depend Upon 1st Record-->
      <tr>
       <td>some Item</td>
       <td>some Item</td>
     </tr>
    </table>
      <!--This Is Another Type Of Table-->
      <h3>This Is Another Type Of Table</h3>
       <table style="width:100%;" border="1">
       <tr>
        <td wdith="33%">Mango</td>
        <td wdith="34%">Lemon</td>
        <td wdith="33%">Something</td>
       </tr> 
   <!--You Given For 1st Record measurements Then Automatically Adjested 2nd Record Also Depend Upon 1st Record-->
       <tr>
       <td>some Item</td>
       <td>some Item</td><td>some Item</td>
       </tr>
      </table>
      <h3>This Is Another Type Of Table</h3>
      <table style="width:100%;" border="1">
      <tr>
      <td wdith="25%">Mango</td>
      <td wdith="25%">Lemon</td>
      <td wdith="25%">Something</td>
      <td wdith="25%">Something</td>
      </tr> 
      <!--You Given For 1st Record measurements Then Automatically Adjested 2nd Record Also Depend Upon 1st Record-->
      <tr>
      <td>some Item</td>
     <td>some Item</td>
     <td>some Item</td>
     <td>some Item</td>
     </tr>
    </table>

Solution 2:[2]

The cells will work with relation to their table, but also they need to take up 100% of the table width. So that makes your case1 not work. it will split it up as 50%. But a case where you set this will work, as it's 100% of the table width.

Demo

<table>
    <tr>
        <td width="20%">mango</td>
        <td width="80%">apple</td>
    </tr>
</table>

If you need something to take up 25-25, then maybe you should look into using divs instead.

Also your last case will not work as you need to have the same amount of cells in the table.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Samudrala Ramu
Solution 2 Dejan.S

Related Questions