Jump to content

Taboo to Tables in HTML5


linlou

Recommended Posts

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

Link to comment
Share on other sites

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

 

post-43838-002694300 1343974369_thumb.png

 

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by grabenair
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...