html5 - why are table cells different size despite same content? -

i have table 2 rows , 3 columns. 2 right cells smaller in width 2 left ones. why this? content same in both. thx help.

<div id="tablecontain">     <div id="tabrow1">         <div id="tabcell">the gibberish (nonsense text) presented here </div>         <div id="tabcell"> <img src="images/flora/tree-of-life.jpg" /> </div>         <div id="tabcell">the gibberish (nonsense text) presented here </div>     </div>      <div id="tabrow2">         <div id="tabcell">the gibberish (nonsense text) presented here </div>         <div id="tabcell"> <img src="images/flora/tree-of-life.jpg" /> </div>         <div id="tabcell">the gibberish (nonsense text) presented here </div>     </div> </div>  #tablecontain {     display: table;     width: 600px;     margin: auto;     border-spacing: 10px; }  #tabrow1, #tabrow2 {     display: table-row; }  #tabcell {     display: table-cell;     border: 2px solid gray;     padding: 10px;     border-collapse: collapse; }  img {     width: 200px; } 

i added width: 33%; #tabcell. fiddle
makes columns equal in width.