css - HTML table column width does not appear as expected -

i trying equally display 3 images in row. following code, first 2 images occupy 45% each , third image extremely small. why?

<table width="100%">         <tr>             <td width="33%">                     <img src="image1.png" style="width:100%;">                     <p>image name 1</p>             </td>             <td width="33%">                     <img src="image2.png" style="width:100%;">                     <p>image name 2</p>                 </td>             <td width="34%">                     <img src="image3.png" style="width:100%;">                     <p>image name 3</p>             </td>         </tr> </table 

instead of <table> this, try using <div>s , change width max-width:

.cols {overflow: hidden;}  .cols .col-33 {width: 33.33%; float: left;}

<div class="cols">    <div class="col-33">      <img src="//placehold.it/500x50?text=image+1" style="max-width:100%;">      <p>image name 1</p>    </div>    <div class="col-33">      <img src="//placehold.it/250x50?text=image+2" style="max-width:100%;">      <p>image name 2</p>    </div>    <div class="col-33">      <img src="//placehold.it/300x50?text=image+3" style="max-width:100%;">      <p>image name 3</p>    </div>  </div>