HTML and CSS

A reason to use tables instead of divs

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

« First

•

Join Date: May 2008

Posts: 174

Reputation: Jen0608 can only hope to improve

Solved Threads: 10

Jen0608

Offline

Posting Whiz

Re: A reason to use tables instead of divs

#21

Mar 23rd, 2009

tables are so oldskool and hard to encode sometimes. but with divs., its a lot easier to code, and easy as well to fix if theres a problem with it. great post.

internet marketing services
| website design

gate valves

•

Join Date: Dec 2008

Posts: 63

Reputation: cfajohnson is an unknown quantity at this point

Solved Threads: 13

cfajohnson cfajohnson is offline

Offline

Junior Poster in Training

Re: A reason to use tables instead of divs

#22

Mar 23rd, 2009

•

Originally Posted by MidiMagic

How is this achieved? When you shrink the browser window, or use a different screen resolution, the divs won't stay put.

They will if you do it correctly.

•

How is this achieved? Whenever I try it, the list won't stay together, or the table pokes outside the div.

Do you have an example? Please post a URL.

•

They certainly do not respond to the width and height styles correctly.

They certainly do!

•

I had divs inside of table cells to further format the contents. They never would expand beyond the size of the text they contained.

Your problem is very likely the use of tables.

Again, can you provide an example of the problem?

•

I had to use absolute measures {height: .75in; width: 1.5in;} to get the div to expand to the size of the containing table cell. 100% height and width did not work.

If you use absolute measures, the div cannot expand. Why would you expect it to?

•

The table cells were of fixed height because one cell in each row contained an image.

It sounds as if you are using a table for non-tabular purposes; that's a recipe for disaster.

•

It won't work. Every time I try to make what seems to be a straightforward structure from div tags, something goes blooey in the browser. and it falls apart: Either stuff leaks out of the div, or the object contained in the div is put elsewhere.

Example? My experience does not agree with yours. What are you doing wrong?

•

I made a simple div just to put a colored box with a border around some text and a table. The table refused to stay inside the div. Either the div got very small and stayed above the table containing the text, or the table stuck out of the div on one side or the bottom. This was WITHOUT any size styles, other than that the table was to be 50 percent wide and aligned right. The div behaved as if only the text was inside it. The code validated with W3C.

Validating is a prerequisite for a working page, but it doesn't guarantee it.

Last edited by cfajohnson; Mar 23rd, 2009 at 6:06 pm.

Chris F.A. Johnson
http://cfajohnson.com

•

Join Date: Apr 2005

Posts: 16,146

Reputation: jbennet is a name known to all

Solved Threads: 531

jbennet

Offline

Moderator

Re: A reason to use tables instead of divs

-7

#23

Mar 23rd, 2009

Dont use tables for layout

It confuses the hell out of screenreaders, and employers risk getting sued for not making thier sites accessible.

If i am helpful, please give me reputation points.

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

Re: A reason to use tables instead of divs

#24

Mar 23rd, 2009

That's a myth. Screenreaders aren't confused by tables, they just read them in a specific way. Weird markup order and other 'unusual' div constructs can confuse screenreaders just as much, sometimes more.

Plato forgot the nullahedron..

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 165

MidiMagic

Offline

Nearly a Senior Poster

Re: A reason to use tables instead of divs

#25

Mar 24th, 2009

•

•

•

•

•

Originally Posted by MidiMagic View Post

How is this achieved? When you shrink the browser window, or use a different screen resolution, the divs won't stay put.

They will if you do it correctly.

You keep saying that, but you don't tell the correct way. Are you saving it so you can copyright and sell it?

•

•

•

•

•

How is this achieved? Whenever I try it, the list won't stay together, or the table pokes outside the div.

Do you have an example? Please post a URL.

I didn't put up the bad page on the web. I fixed it with a table.

Here is the bad page:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Stuff</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 
<style type="text/css">
 
.cenx {text-align: center;}
.ceni {clear: both;}
.bxfix {margin: 0; border: none; padding: 0;}
 
.boxi {margin: 3em; border: solid 2px #0000cc;
           padding: 1em; background-color: #ffaaaa;}
 
.boxd {margin: 0; border: none; padding: 0;
            width: 50%; background-color: #aaffaa; float: left;} 
 
.boxe {margin: 0; border: none; padding: 0;
           width: 50%; background-color: #aaaaff; float: right;} 
 
.celfil {margin: 0; border: 1px black solid;
          padding: .25 em; background-color: #eeeeaa;
          width: 100%; height: 100%;}
 
.wfl {width: 100%;}
 
img {margin: 0; border: none; padding: 0;}
body {background-color: #bbffbb; padding: 2%; font-family: sans-serif;}
 
</style>
</head>
<body>
 
<div class="boxi">
  <div class="boxd">
    <p>The text I want to keep on the left. The text I want to keep on the left.
    The text I want to keep on the left.  The text I want to keep on the left.
    The text I want to keep on the left. The text I want to keep on the left.
    The text I want to keep on the left. The text I want to keep on the left.
    The text I want to keep on the left. The text I want to keep on the left.
    The text I want to keep on the left. The text I want to keep on the left.</p>
  </div>
  <div class="boxe">
    <table>
      <tr>
        <th><div class="celfil">Code number</div></th>
        <th><div class="celfil">Replacement<br />Text</div></th>
      </tr>
      <tr>
        <td>10</td><td>Text string number 1</td>
      </tr>
      <tr>
        <td>20</td><td>Text string number 2</td>
      </tr>
      <tr>
        <td>30</td><td>Text string number 3</td>
      </tr>
      <tr>
        <td>40</td><td>Text string number 4</td>
      </tr>
      <tr>
        <td>50</td><td>Text string number 5</td>
      </tr>
      <tr>
        <td>60</td><td>Text string number 6</td>
      </tr>
    </table>
  </div>
</div>
 
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Stuff</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<style type="text/css">

.cenx {text-align: center;}
.ceni {clear: both;}
.bxfix {margin: 0; border: none; padding: 0;}

.boxi {margin: 3em; border: solid 2px #0000cc;
           padding: 1em; background-color: #ffaaaa;}

.boxd {margin: 0; border: none; padding: 0;
            width: 50%; background-color: #aaffaa; float: left;} 

.boxe {margin: 0; border: none; padding: 0;
           width: 50%; background-color: #aaaaff; float: right;} 

.celfil {margin: 0; border: 1px black solid;
          padding: .25 em; background-color: #eeeeaa;
          width: 100%; height: 100%;}

.wfl {width: 100%;}

img {margin: 0; border: none; padding: 0;}
body {background-color: #bbffbb; padding: 2%; font-family: sans-serif;}

</style>
</head>
<body>

<div class="boxi">
  <div class="boxd">
    <p>The text I want to keep on the left. The text I want to keep on the left.
    The text I want to keep on the left.  The text I want to keep on the left.
    The text I want to keep on the left. The text I want to keep on the left.
    The text I want to keep on the left. The text I want to keep on the left.
    The text I want to keep on the left. The text I want to keep on the left.
    The text I want to keep on the left. The text I want to keep on the left.</p>
  </div>
  <div class="boxe">
    <table>
      <tr>
        <th><div class="celfil">Code number</div></th>
        <th><div class="celfil">Replacement<br />Text</div></th>
      </tr>
      <tr>
        <td>10</td><td>Text string number 1</td>
      </tr>
      <tr>
        <td>20</td><td>Text string number 2</td>
      </tr>
      <tr>
        <td>30</td><td>Text string number 3</td>
      </tr>
      <tr>
        <td>40</td><td>Text string number 4</td>
      </tr>
      <tr>
        <td>50</td><td>Text string number 5</td>
      </tr>
      <tr>
        <td>60</td><td>Text string number 6</td>
      </tr>
    </table>
  </div>
</div>

</body>
</html>

I took out the float: left; in the boxd style, and it got worse.

When I took the floats out of both boxd and boxe, it put the table under the text.

•

•

•

•

•

They certainly do not respond to the width and height styles correctly.

They certainly do!

See above. They do not.

•

•

•

•

•

I had divs inside of table cells to further format the contents. They never would expand beyond the size of the text they contained.

Your problem is very likely the use of tables.

Again, can you provide an example of the problem?

The table is a table of numbers and data.

See the example above. The yellow boxes are supposed to fill the table cells. They do not.

•

•

•

•

•

I had to use absolute measures {height: .75in; width: 1.5in;} to get the div to expand to the size of the containing table cell. 100% height and width did not work.

If you use absolute measures, the div cannot expand. Why would you expect it to?

I had to use the absolute measure to get it to expand to fill the container. It refused to expand to fit the container otherwise.

See the yellow boxes generated by the code above. They refuse to expand to fit the container.

•

It sounds as if you are using a table for non-tabular purposes; that's a recipe for disaster.

See for yourself (I replaced the proprietary data with simple text, but it is a numeric table).

•

•

•

•

•

It won't work. Every time I try to make what seems to be a straightforward structure from div tags, something goes blooey in the browser. and it falls apart: Either stuff leaks out of the div, or the object contained in the div is put elsewhere.

Example? My experience does not agree with yours. What are you doing wrong?

Run the code above to see it.

I made a simple div just to put a colored box with a border around some text and a table. The table refused to stay inside the div. Either the div got very small and stayed above the table containing the text, the table stuck out of the div on one side or the bottom, or the table dropped under the text. This was WITHOUT any size styles, other than that the table was to be 50 percent wide and aligned right. The div behaved as if only the text was inside it. The code validated with W3C.

Last edited by MidiMagic; Mar 24th, 2009 at 9:03 pm.

Daylight-saving time uses more gasoline

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 165

MidiMagic

Offline

Nearly a Senior Poster

Re: A reason to use tables instead of divs

#26

Mar 24th, 2009

•

Originally Posted by MattEvans

That's a myth. Screenreaders aren't confused by tables, they just read them in a specific way. Weird markup order and other 'unusual' div constructs can confuse screenreaders just as much, sometimes more.

It's the users of the screenreaders who get confused. they are blind.

Daylight-saving time uses more gasoline

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

Re: A reason to use tables instead of divs

#27

Mar 24th, 2009

Indeed.

But absolute positioning (I mean moving the displayed order of things while keeping the actual markup in a different order) is worse for a screenreader user than a (simple) table.. e.g.

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<table>
<tr>
<td>this is all going to be read</td>
<td colspan="3">in the correct order</td>
</tr>
<tr>
<td>although, perhaps the rows, and</td>
<td>the columns might be announced</td>
<td>by some screenreaders</td>
<td>using certain settings</td>
</tr>
</table>
<table>
<tr>
<td>this is all going to be read</td>
<td colspan="3">in the correct order</td>
</tr>
<tr>
<td>although, perhaps the rows, and</td>
<td>the columns might be announced</td>
<td>by some screenreaders</td>
<td>using certain settings</td>
</tr>
</table>

But...

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<div>&nbsp;</div>
<div>in backwards order</div>
<div style="position:absolute;left:0;top:0;">this will probably be announced</div>
<div>&nbsp;</div>
<div>in backwards order</div>
<div style="position:absolute;left:0;top:0;">this will probably be announced</div>

although, it would appear to be in the correct order to a sighted user.

Plato forgot the nullahedron..

•

Join Date: Dec 2008

Posts: 63

Reputation: cfajohnson is an unknown quantity at this point

Solved Threads: 13

cfajohnson cfajohnson is offline

Offline

Junior Poster in Training

Re: A reason to use tables instead of divs

#28

Mar 25th, 2009

Is this what you want: http://cfaj.freeshell.org/testing/MidiMagic.html?

Chris F.A. Johnson
http://cfajohnson.com

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 165

MidiMagic

Offline

Nearly a Senior Poster

Re: A reason to use tables instead of divs

#29

Mar 28th, 2009

•

Originally Posted by cfajohnson

Is this what you want: http://cfaj.freeshell.org/testing/MidiMagic.html?

Yes - sort of. That's what I want it to look like. But it renders the real contents of the table cells differently in different browsers that way. I need another box inside the table cell to get rid of the incompatibility.

It's sort of what I ended up doing (I used classes, because there are other tables on the page), but it does not solve the problem of the div not expanding to fill its container. It just removes the div from inside the table cells, rather than making it expand.

Now make it work WITH the divs in the table cells, and the attributes attached to the divs, not the cells. This exactly shows my point: the div does not obey the styles.

The divs were there to solve a browser intercompatibility problem involving the real contents of the divs. Putting the attributes on the table cells causes the incompatibility to appear. But the divs failed too.

My current page has three nested tables to make it work the same on all browsers.

Last edited by MidiMagic; Mar 28th, 2009 at 11:57 pm.

Daylight-saving time uses more gasoline