When is it proper to use a HTML table for layout?

2018-07-01 14:43:04

Possible Duplicates:
Why not use tables for layout in HTML?
Tables instead of DIVs

I have an HTML page in which I would like to display several thumbnail images of books stacked one on top of each other with some summary text to the right of each image. Would it be inappropriate to use tables to layout this content within the page? Should I be using CSS or is this acceptable and reasonable use for tables?. I understand why it is not a good idea to layout an entire page using tables, but I am trying to discern when it is "proper" to use tables for displaying content. Thank you.

<table>
  <tr>
    <td width="50%">Thumbnail Image Here</td>
    <td width="50%">Summary Text Here</td>
  </tr>
  <tr>
    <td width="50%">Thumbnail Image Here</td>
    <td width="50%">Summary Text Here</td>
  </tr>
  <tr>
    <td width="50%">Thumbnail Image Here</td>
    <td width="50%">Summary Text Here</td>
  </tr>
</table>

Tables should not be used as a layout tool. Layout features should be left to other technologies like CSS.

The concept of having HTML is to structure your documents and this is independent of the layout. Layout is a User Application level concept whereby it is up to the browser vendor to implement the visual layout. This includes the visual interpretation of tables.

Thus, in short, you should not be using tables for any form of layout presentation. This concept came about in the history of HTML where developers try to abuse the layout rendering in browsers to achieve layout effects.

This is tabular data, so why you don't should use a table.

As you said, layouting a whole page with nested tables is not a good idea with a look at SEO optimization and accessibility.

I would argue this isn't really tabular data - it is list of thumbnails and their description. I would consider using an <ul> in this situation which matches the sematics of what (I think) you are trying to achieve, eg:

<ul class="thumbnail-list">
    <li>
        <img src="path to thumbnail" alt="alt text" />
        <span>Summary Text Here</span>
    </li>
    <li>
        <img src="path to thumbnail" alt="alt text"/>
        <span>Summary Text Here</span>
    </li>
</ul>

链接地址: http://www.djcxy.com/p/88148.html

上一篇: 如果您需要各处的清空块，无表设计的好处是什么？

下一篇: 何时适合使用HTML表格进行布局？