linlou Posted August 3, 2012 Report Share Posted August 3, 2012 I have been searching for days trying to find the answer to NO tables in HTML5. Everything I've read says that it is not recommended. And offer no solution. If you want to put 3 images (horizontal-across) on the page with txt centered underneath each image..... and repeat these rows three more times. what is the recommended css for something like this that is so simple. Does it go in an <article> section? No one gives you a straight answer for its replacement. Is the a good reference book for html5 that I can purchase? thx Quote Link to comment Share on other sites More sharing options...
linlou Posted August 3, 2012 Author Report Share Posted August 3, 2012 I have been searching for days trying to find the answer to NO tables in HTML5. Everything I've read says that it is not recommended. And offer no solution. If you want to put 3 images (horizontal-across) on the page with txt centered underneath each image..... and repeat these rows three more times. what is the recommended css for something like this that is so simple. Does it go in an <article> section? No one gives you a straight answer for its replacement. Is the a good reference book for html5 that I can purchase? thx Going with the flow and putting in tables this is what I have so far. on the HTML DOC: <article class="content"> <h1>4 images in a Row</h1> <section> <div class="rows"> <img src="images/accu_thumb.jpg" width="150" height="150" alt="accu_thumb"> <img src="images/accu_thumb.jpg" width="150" height="150" alt="accu_thumb"> <img src="images/accu_thumb.jpg" width="150" height="150" alt="accu_thumb"> <img src="images/accu_thumb.jpg" width="150" height="150" alt="accu_thumb"><br> </div> <div class="rows"></div> <table width="618" height="34" border="0" cellpadding="1" cellspacing="1" bgcolor="#FFFFFF" rules="none"> <tr> <td width="146">Type Here</td> <td width="146">Type Here</td> <td width="146">Type Here</td> <td width="149">Type Here</td></table><br> <div class="rows"> <img src="images/accu_thumb.jpg" width="150" height="150" alt="accu_thumb"> <img src="images/accu_thumb.jpg" width="150" height="150" alt="accu_thumb"> <img src="images/accu_thumb.jpg" width="150" height="150" alt="accu_thumb"> <img src="images/accu_thumb.jpg" width="150" height="150" alt="accu_thumb"></div> <div class="rows"></div> <table width="618" height="34" border="0" cellpadding="1" cellspacing="1" bgcolor="#FFFFFF" rules="none"> <tr> <td width="146">Type Here</td> <td width="146">Type Here</td> <td width="146">Type Here</td> <td width="149">Type Here</td></table> CSS: .content section .rows { font-family: Verdana, Geneva, sans-serif; column-width: 610px; margin-right: 2px; margin-left: 2px; } table { font-family: Verdana, Geneva, sans-serif; text-align: center; display: table-row-group; margin-left: 80px; } I can't seem to get things center and get about 2px between the images. Please let me know if i'm on the right track. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted August 3, 2012 Report Share Posted August 3, 2012 The main thing to keep in mind is that the use of tables itself isn't discouraged. The use of tables for website layout is discouraged (for example, for setting up a header/footer/content areas, etc.) Tables are for tabular data. In your sample above, I think tables may be a viable option (though if you want to use them, I'd be placing both the images and the text within table cells, not just the text). Alternatively (and this is probably what I would do) I would place each image/caption pair in an unordered list item, and float each left. You should get a nice organized structure that way. To control the spacing, you can add margins or padding to the list items, and to control the spacing between the image and the caption, you could use a bottom margin. Quote Link to comment Share on other sites More sharing options...
grabenair Posted August 3, 2012 Report Share Posted August 3, 2012 (edited) I do not even use tables for forms anymore <ul> is much easer. You solution to you problem is to put each line of text in a p tag and give both the img and p tag an id and then position them with margins. Or put one img and line of text in a div and position the div. I would probably use the second one and use id instead of class. Edited August 3, 2012 by grabenair Quote Link to comment Share on other sites More sharing options...
Justinfh2Point0 Posted August 7, 2012 Report Share Posted August 7, 2012 The main thing to keep in mind is that the use of tables itself isn't discouraged. The use of tables for website layout is discouraged (for example, for setting up a header/footer/content areas, etc. Exactly. I'll give you an example. I once designed a webpage for a TV that I made up in my head (you know, for practice). I designed the site itself with CSS. But I used tables to display pictures of the characters and their bio beside their pics. Quote Link to comment Share on other sites More sharing options...
linlou Posted August 8, 2012 Author Report Share Posted August 8, 2012 I do not even use tables for forms anymore <ul> is much easer. You solution to you problem is to put each line of text in a p tag and give both the img and p tag an id and then position them with margins. Or put one img and line of text in a div and position the div. I would probably use the second one and use id instead of class. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.