css - HTML Table with images -


so re making site university's drama department , want add 3 images side side (with spacing between them). need have captions. caption needs have header (that styled differently caption itself) followed caption itself. having looked around here , other places figured able using table since formatting size easiest way. have been @ portion of site 1 month , have tried numerous other methods (divs, tables, etc.) wondering if else has done , able impart advice. site located here: drama site. appreciated (i hope follows guidelines, first time asker)

edit: following portion of code need with:

function windowsize() {    var w = var w = document.getelementbyid('body').clientwidth;    document.getelementbyid('newstable').style.width = w + 'px';    document.getelementbyid('newsitems').style.height = document.getelementbyid('newsitems').clientwidth + 'px';  }
<body id="body" onload="windowsize();getcurrentpage();" onresize="windowsize()">    <table id="newstable" cellpadding="0" border="0">      <tr>        <td id="newsitems" align="center" background="http://i.imgbox.com/5glgmmde.gif">1</td>        <td id="newsitems" align="center" background="http://i.imgbox.com/5glgmmde.gif">2</td>        <td id="newsitems" align="center" background="http://i.imgbox.com/5glgmmde.gif">3</td>      </tr>      <tr>        <td id="newsitems" align="center">4</td>        <td id="newsitems" align="center">5</td>        <td id="newsitems" align="center">6</td>      </tr>    </table>  </body>

i don't want pictures big in link, them bit smaller. room between them. when page gets bigger image starts repeat. if took repeat off have blank space repeat

probably nicest option use bootstrap. can lot of columner work you. if sounds little complex, here simple fiddle 3 images side side. http://jsfiddle.net/44uv9a2m/

i'm wrapping images , captions in divs, giving them fixed width.

.onethird{      width:30%;      float:left;      margin:.5%;  }  .onethird img{      width:100%;  }
<div class="onethird">      <img src="http://www.photosnewhd.com/media/images/picture-wallpaper.jpg"></img>      <p>caption</p>  </div>  <div class="onethird">      <img src="http://www.photosnewhd.com/media/images/picture-wallpaper.jpg"></img>      <p>caption</p>  </div>  <div class="onethird">      <img src="http://www.photosnewhd.com/media/images/picture-wallpaper.jpg"></img>      <p>caption</p>  </div>

* edit * basic bootstrap example. http://www.bootply.com/n6adjpyie3


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -