Tables Instead of Divs

Tables instead of DIVs

The whole "Tables vs Divs" thing just barely misses the mark. It's not "table" or "div". It's about using semantic html.

Even the div tag plays only a small part in a well laid out page. Don't overuse it. You shouldn't need that many if you put your html together correctly. Things like lists, field sets, legends, labels, paragraphs, etc can replace much of what a div or span is often used to accomplish. Div should be used primarily when it makes sense to indicate a logical division, and only appropriated for extra layout when absolutely necessary. The same is true for table; use it when you have tabular data, but not otherwise.

Then you have a more semantic page and you don't need quite as many classes defined in your CSS; you can target the tags directly instead. Possibly most importantly, you have a page that will score much better with Google (anecdotally) than the equivalent table or div-heavy page. Most of all it will help you better connect with a portion of your audience.

So if we go back and look at it in terms of table vs div, it's my opinion that we've actually come to the point where div is over-used and table is under-used. Why? Because when you really think about it, there are a lot of things out there that fall into the category of "tabular data" that tend to be overlooked. Answers and comments on this very web page, for example. They consist of multiple records, each with the same set of fields. They're even stored in a sql server table, for crying out loud. This is the exact definition of tabular data. This means an html table tag would absolutely be a good semantic choice to layout something like the posts here on Stack Overflow. The same principle applies to many other things as well. It may not be a good idea to use a table tag to set up a three column layout, but it's certainly just fine to use it for grids and lists... except, of course, when you can actually use the ol or ul (list) tags.

How to use divs instead of tables

You need inline-block and float: here's the jsFiddle

.list-row {
    background:#f4f4f4;
    display:inline-block;
    border:2px solid red;}

.list-left {
    width:auto;
    padding:10px;
    float:left;
    border: 2px solid blue;}

.list-right {
    padding:10px;
    float:right;
    border:2px solid green;}

Also, since you're not using relative or absolute positioning, you don't need to specify top and left.

Layout with divs instead of table

Floated columns

There's no need for an HTML table in this case.

HTML tables are appropriate for data grids, but for general layout (establishing columns and such) floats are almost always the best option (as @GrantMynott suggested). Although the cards on this page appear in a grid pattern, it's not really a data grid.

If you add a clearfix to your CSS file, you can greatly simplify the use of floats (and creating columns). Everytime you have a container with floated columns, you add the clearfix class to the container. Then you don't have to worry about the details of clearing the floated columns.

Here's an example, using a traditional version of clearfix (which is a good version to start with):

/* Traditional clearfix */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

/* Custom CSS for the page layout */
.columns .column1 {
    float: left;
    width: 430px;
}
.columns .column2 {
    float: left;
    width: 161px;
}
....
<div class="columns clearfix">
    <div class="column1">Card grid goes here...</div>
    <div class="co1umn2">All content to the right of card grid goes here...</div>
</div>
<div id="msg"></div>

This example uses generic names for the CSS classes ("columns", "column1", column2"). Names that are more meaningful for the page in question can be used as needed.

Update

After looking at your revised demo:

• There was a typo with the class name "co12" that was preventing that column from being floated. I updated the name to "column2", to make that sort of typo less likely.
• It's a good idea to add a clearfix to the cards container as well (since the cards are floated), just to be safe. At present, the cards container is the left-hand column itself, so it would be added there.
• This may be a personal preference, but I've found it to be slightly safer to float all columns in the same direction (usually left), than to have a mix of some floated left and some floated right. Mixing directions in the same container is not as stable in some cases (or at least, on older browsers), though in most cases it's safe to do so.

Updated demo

At this point, you just need to add heights or vertical margins (or padding) to the content in the right-hand column. I added a div container around the logo image, to make this a little easier. There could optionally be a div container around the button too, though you could probably manage without one.

instead of html tables use div.. ok but tables are easy so

You'll want to use the display table, table-row, and table-cell:

CSS:

.table
{
   display:table;
}

.table-row
{
   display:table-row;
}

.table-cell
{
   display:table-cell;
}

HTML:

<div class="table">
   <div class="table-row">
      <div class="table-cell">1</div>
      <div class="table-cell">2</div>
   </div>
   <div class="table-row">
      <div class="table-cell">3</div>
      <div class="table-cell">4</div>
   </div>
</div>

Demo

Note that the table, table-row, and table-cell display values aren't supported in IE7 or below and IE8 needs a !DOCTYPE.

Also, tables should be used for representing tabular data since it gives the markup more semantic meaning over a bunch of div's with classes. You just shouldn't use tables for layout purposes.

When is it more appropriate to use DIV instead of TABLE, and vice-versa?

As a rule of thumb — if every cell in a row has something in common, and every cell in a column has something in common, then you should use a table. If you don't have a thead with some th elements providing column headings, then there is a good chance you are doing something wrong. If you don't have multiple data rows and multiple data columns, then … ditto.

The choice is, however, not between a div and a table. Use the markup that has the semantics that best describes the content. There are plenty of elements in HTML: http://www.w3.org/TR/html4/index/elements.html

Are tables replaced by DIVs?

To be semantically correct, tables should only used for tabular data and not for laying out a page.

David Dorward brought something to my attention in a comment. According to the HTML 4.01 Specification's section on Tables in HTML Documents:

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

div element instead of table ?

a few reasons:

1) div is more semantically correct in most cases. people who code their sites in table structure aren't using tables for what they're made for, which is tabular data. divs represent a "division" or a section of the page, so putting items in divs is more correct.

2) divs are more flexible and easier to style and maintain. you don't have to write <table><tr><td>Text here</td></tr></table> every time you want to say something when you can just write <div>Text here</div> instead. you can add css hooks (ie, classes or elements) to both tables and divs, but with divs it is infinitely more flexible.

3) table structured sites are just plain ugly :)

---

Related Topics