[SOLVED] Tables

Azu · October 26, 2007

A hear a lot of bad things about the accessibility and spiderability of tables.

Can somebody please explain to me why? I like tables because they can line things up nice and neatly ^^

Daniel0 · October 26, 2007

Well, consider this:

<!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">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Test Layout</title>
<link href="styles/default.css" rel="stylesheet" media="screen" />
</head>
<body>

<div id="container">
<div id="header">
	<h1>Test layout</h1>
</div>

<div id="top-navigation">
	<ul>
		<li><a href="#">Link 1</a></li>
		<li><a href="#">Link 2</a></li>
		<li><a href="#">Link 3</a></li>
		<li><a href="#">Link 4</a></li>
	</ul>
</div>

<div id="side-navigation">
	<ul>
		<li><a href="#">Link 1</a></li>
		<li><a href="#">Link 2</a></li>
		<li><a href="#">Link 3</a></li>
		<li><a href="#">Link 4</a></li>
	</ul>
</div>

<div id="content">
	<h2>Page title</h2>

	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur ante augue,
	viverra ut, dignissim non, ultricies quis, erat. Aliquam dignissim massa sed odio.
	Donec scelerisque nonummy diam. Proin molestie venenatis ipsum. In hac habitasse
	platea dictumst. Suspendisse fermentum. Sed iaculis viverra metus. Nunc purus.
	Donec non enim. Sed interdum faucibus mi. Vivamus molestie magna sit amet elit
	interdum interdum. Ut interdum. Nunc eleifend fermentum magna.</p>

	<p>Sed molestie nonummy lectus. Sed leo. Fusce sit amet orci ac nunc pharetra
	bibendum. Morbi mollis dictum leo. Etiam condimentum. Aenean a nunc. Mauris
	malesuada, lacus ut adipiscing tempus, tellus nisi dignissim risus, in porta lacus
	libero sed nisl. Donec consectetuer vehicula enim. Praesent ut pede. Proin ac purus
	nec odio vehicula vestibulum. Fusce congue urna ullamcorper augue. In et enim sit
	amet nunc ultricies tincidunt. Nulla tristique bibendum massa. Sed accumsan. Quisque
	nonummy rutrum ligula. Pellentesque felis orci, pharetra vitae, porta tincidunt,
	rutrum eu, nisi.</p>
</div>

<div id="footer">
	Copyright © 2007 Somebody
</div>
</div>

</body>
</html>

In that way you don't have to use a lot of <table>, <tr> and <td> tags so there is less code to read for the spider. As to what concerns accessibility, screen readers can more easily read your page as you haven't filled it with a lot of semantically incorrect tags. Your layout isn't tabular data, so you shouldn't use tables.

Also note that the above code says nothing about how your page looks, with CSS you can make it look like you want it and therefore it will also be easier to maintain and change to another layout. You could for example replace the contents of the <h1> tag with an image (logo) but still retain the text using CSS so spiders can still see it.

Azu · October 26, 2007

I don't get it.

If you replaced all of those DIV with TABLE

UL with TR

and LI with TD

How would it make the syntax incorrect and stuff? I'm confused..

redbullmarky · October 26, 2007

using tables introduces layout/styling into your HTML, which is what CSS is for. The HTML should really be just about your content, not how it looks.

This way - you can drop in a new CSS stylesheet or make changes to it and your site can take on a whole new shape.

CSS layouts do take a little longer to craft and code, and to get working properly cross browser, but considering it makes long term amends easier, plus makes your site look less "rigid", it's worth it.

Daniel pretty much said much of this this in his last paragraph.

As for accessibility, much has to do with ordering when it comes to screen readers - ie, what content appears before other content, etc. When your layouts get a little more complex, and you use tables, ordering can go all over the place - meaning poor user of screen reader is going to be scratching their head trying to get around your site.

Azu · October 26, 2007

Does this still apply if I use divs but set them in CSS to act like tables? Or is that just as bad?

Daniel0 · October 26, 2007

What do you mean with "act like tables"?

tomfmason · October 26, 2007

I think that the main reason that some people choose tables instead of css for layout is that they don't fully understand positioning and floats. It can quickly become a mess if you don't understand them. For a page with fluid and centered content I would do something like this:

css:

body{
  font-size:62.5%;
  margin:0;
  padding:0;
}
/*default for all elements*/
*{
  margin:0;
  padding:0;
}

/*our centered content container*/
#container{
  width:90%;
  margin-left:5%;
  margin-right:5%;
}

/*header*/
#header{
  width:100%;
  padding-left:0.5em;
  padding-right:0.5em;
  display:block;
  overflow:hidden;
}
/* logo as Daniel0 suggested*/
#header h2{
  background: #FFF url(images/your_logo.jpg);
  float:left;
  width:45%
}
/*move our logo text to the right about 20px */
#header h2 span{
  padding-left:2em;
}

/*some user info*/
#header span.user{
  float:right;
  width:45%;
  text-align:right;
}

#content-container{
  width:100%;
  padding-left:0.5em;
  padding-right:0.5em;
  overflow:hidden;
  display:block;
}

#navigation{
  width:30%;
  float:left;
  display:block;
}

#contents{
  width:65%;
  float:right;
  display:block;
}

#footer{
  width:100%;
  text-align:center;
  display:block;
}

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Your Title</title>
  <link href="example.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
   <div id="container">
     <div id="header">
       <h2><span>Some logo text</span></h2>
       <span class="user">Welcome guest</span>
     </div>
     <div id="content-container">
       <div id="navigation">
          
         <!-- do something interesting here -->
       </div>
       <div id="contents">
         <!-- your content -->
       </div>
     </div>
     <div id="footer">
       © Yoursite.com
     </div>
   </div>
  </body>
</html>

Without a valid doctype IE will not properly observe the floats or margins. A good explanation of the float method that I used can be found here http://www.quirksmode.org/css/clearing.html.

To do the same thing with tables would require more markup and therefore would slow the rendering of the page a bit. Not to mention it is considered bad general practice. It is hard for me to take a site seriously that uses tables for layout unless it was written several years ago.

Azu · October 26, 2007

What do you mean with "act like tables"?

display:table;

Azu · October 29, 2007

So uh.. could somebody please explain? Because I really don't understand the difference besides on way makes stuff align and one way doesn't. I don't understand how accessibility and such are effected..

Daniel0 · October 29, 2007

Well, would you write an essay in Excel (or any other spreadsheet) for example?

Azu · October 29, 2007

?

I don't know. I write everything in notepad or Firefox.

neylitalo · October 29, 2007

?

I don't know. I write everything in notepad or Firefox.

His point is that tables should only be used for data that should be in a table. Just as you shouldn't lay out an essay for school in a spreadsheet, you shouldn't create your website's layout in tables. Tables are designed, and should be used, for tabular data only.

AndyB · October 29, 2007

http://www.accessibility101.org.uk/tips/48.htm

http://www.joedolson.com/articles/2007/08/tables-or-css-layout/

http://phrogz.net/CSS/WhyTablesAreBadForLayout.html

... and a zillion others

KevinM1 · October 29, 2007

I prefer tableless layouts for two main reasons:

1. Readable code, as you don't have to deal with nested tables.

2. Less code overall, which ties into reason #1.

Like others have said, tables are great for tabular data. I use tables for just that. But for page layout, they are beyond clunky to use. Why deal with all of the extra hurdles -- table rows, table cells, cells that span multiple rows or columns -- when you can just throw a div in the correct space?

No tables also makes code far easier to maintain. I don't have to dig through layers of nested tables to edit the right code. I just find the right div (which is easier to do as they don't come with the <tr>, <td> baggage that tables have).

Yes, div's can be nested. But I prefer dealing with them rather than tables, nested or not. It just makes sense to go with, IMO, the easier, more efficient route. I have (and am currently) rewritten sites that used table-based layouts. In every case, the new code is much easier to read, easy to edit/maintain, and the overall length of the code is anywhere between 35% - 50% less than the original. Sounds like win to me. But, to each their own. No one's saying you have to abandon tables. It's just that a lot of serious developers have because of the myriad benefits a tableless layout provides.

roopurt18 · October 29, 2007

I understand all of the issues with why not to use tables for layouts and I do avoid using them for non-tabular data. However, there is still one place where I use a table, and that is to make a multi-column layout. It's been a while since I've done so, but the last time I was working on it I spent quite a bit of time trying to get it to behave properly. Every time I thought I had it, it would break on some new page or in a different browser. Most of the solutions to this (at the time I was dealing with it) were to either:

1) introduce IE only CSS files

2) add extra divs to the layout to do things like clear, etc.

In regards to #1, I avoid anything specific to any one browser; I refuse to entangle myself in that mess. In regards to #2, I thought the part of the point of CSS was to create cleaner markup and remove unnecessary tags, so adding an empty div simply to clear something seems silly to me.

Basically, I agree that using a table to create a multi-column layout is a bad way to do things, but it takes all of 10 minutes to do and is widely supported. The CSS solution to the multi-column layout (again, at the time I was dealing with it) didn't solve any problems, it just relocated them into two different areas.

I guess I'll just have to spend more time on it next time I make a layout.

I know I'm going to come under fire for having posted this, but oh well. For the record, I only use the table for the multi column part of the content. My header and footers are both divs and I don't use tables anywhere else unless I'm displaying tabular data. So I'm not entirely evil!

calabiyau · October 29, 2007

And the examples people have given are simplified layouts, where the code savings maybe are not that great. In a complex design using tables, the code can become littered with useless table elements to attempt to get things to align correctly, elements that serve not other purpose than to add space. If you are just doing a header, columns, footer affair, with straight content in each block, not so bad, but if your design breaks out of that mold, the table method is going to get crazy pretty fast, and from accessibility standpoint, a screen reader for example is going to have to move through elements in an order that makes no sense.

Azu · October 30, 2007

Can somebody please explain to me why tables would need more code and/or differant code? I really just don't get it.

How would replace div with table, ul with tr, and li with td make your code bloated?

I don't understand at all

You all keep saying that it makes it more bloated and less readable blah blah blah but can someone please explain WHY? I'm confused..

A real example would be greatly appreciated..

Like for example

How is

Worse then

?

Please somebody explain IN DETAIL...

PS: about the "divs show up before the page finished loading but tables don't"; all of my output is buffered (gzip compression) anyways.. so I think that everything will always show up at the same time anyways regardless of which layout I use..

PPS: and why does everyone keep saying that it is CSS or tables? I am asking about divs vs tables not CSS vs tables.

I am going to be using the exact same CSS whether I use divs or tables.

teng84 · October 30, 2007

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#main{
background-image:url(images/background_02.jpg);
width: 750px;
height: 830px;
margin:auto;
}
#sub
{
margin:auto;
width:750px;
height:20px;
background-color: #2B0606;
}

.header {
color: #FFFFFF;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
text-align:center;
}
#subcontainersleft{
width: 350px;
height: 272px;
background-color:#2B0606;
margin-top: 6px;
margin-left:20px;
}
#subcontainersright{
width: 350px;
height: 272px;
background-color:#2B0606;
margin-top: 6px;
margin-right:20px;
float:right;
}
.menus{
background-image:url(images/menu.gif);
background-repeat:no-repeat;
padding-top:7px;
width:89px;
height:32px;
float:right;
text-align:center;
vertical-align:middle;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight: bold;
color: #CCCCCC;
}

.style1 {
color: #FF0000;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align:left;
}

.style2 {
color: #FFFFFF;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
float: left;
}
#textholder{
padding-top:7px;
width: 185px;
height: 90px;
float:right;
}
#textholderbottom{
width: 300px;
height: 120px;
margin:auto;
}
#imageholder{
padding-top:10px;
width: 100px;
height: 90px;
margin-left: 28px;
}

.style3 {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.style4 {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#style5 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
margin-left:250px;
}
.style6 {color: #FFFFFF;font-size: 40px;}
.style7 {color: #FFFF00;font-size: 40px;}
#subtext {
color: #CCCCCC;
font-size: 12px;
margin-left:250px;
font:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
padding-bottom:38px;
}
</style>
</head>

<body>
<div id='main'>
  <br><br>
  <div id="style5"><span class="style6">All about</span> <span class="style7">Nothing</span></div>
    <div id="subtext">Know everything about nothing</div>
    
     <span class="menus">More</span>
      <span class="menus">About Us</span>
      <span class="menus">Some text</span>
    <span class="menus">Contact</span>
    <span class="menus">Home</span>
    <br />
    <br />

  <div class="header" id='sub'>Some Shity Here </div>
	<div  id='subcontainersright'>
		<span class="style1"><br>      Some Shity Here </span>
		<div id='textholder'>
			<span class="style2"><p>
		   dvvwidth of the <br />
			 in order to do <br />
		    to use javascript <br />
			dvvwidth of the screen and <br />
			 in order to do that you have <br />
		    to use javascript or atleast <br />thats the only way </span>			</div>
	   <div id='imageholder'><img src="images/image.gif"/></div>
	   <div id='textholderbottom'>
			<span class="style2"><p>dvvwidth of the screen and 
			 in order to do that you have 
		    to use javascript or atleast thats the only way
			dvvwidth of the screen and 
			 in order to do that you have 
		    to use javascript or atleast thats the only way 
			dvvwidth of the screen and 
			 in order to do that you have 
		    to use javascript or atleast thats the only way </p> </span>		  </div>
	</div>
  <div   id='subcontainersleft'>
		<span class="style1"><br>      Some Shity Here </span>
		<div id='textholder'>
			<span class="style2"><p>
		   dvvwidth of the <br />
			 in order to do <br />
		    to use javascript <br />
			dvvwidth of the screen and <br />
			 in order to do that you have <br />
		    to use javascript or atleast <br />thats the only way </span>			</div>
	   <div id='imageholder'><img src="images/image.gif"/></div>
	   <div id='textholderbottom'>
			<span class="style2"><p>dvvwidth of the screen and 
			 in order to do that you have 
		    to use javascript or atleast thats the only way
			dvvwidth of the screen and 
			 in order to do that you have 
		    to use javascript or atleast thats the only way 
			dvvwidth of the screen and 
			 in order to do that you have 
		    to use javascript or atleast thats the only way </p> </span>		</div>
  </div>
<div  id='subcontainersright'>
		<span class="style1"><br>      Some Shity Here </span>
					<div id='textholder'>
			<span class="style2"><p>
		   dvvwidth of the <br />
			 in order to do <br />
		    to use javascript <br />
			dvvwidth of the screen and <br />
			 in order to do that you have <br />
		    to use javascript or atleast <br />thats the only way </span>			</div>
	   <div id='imageholder'><img src="images/image.gif"/></div>
	   <div id='textholderbottom'>
			<span class="style2"><p>dvvwidth of the screen and 
			 in order to do that you have 
		    to use javascript or atleast thats the only way
			dvvwidth of the screen and 
			 in order to do that you have 
		    to use javascript or atleast thats the only way 
			dvvwidth of the screen and 
			 in order to do that you have 
		    to use javascript or atleast thats the only way </p> </span>		  </div>
</div>
	<div  id='subcontainersleft'>
		<span class="style1"><br>      Some Shity Here </span>
					<div id='textholder'>
			<span class="style2"><p>
		   dvvwidth of the <br />
			 in order to do <br />
		    to use javascript <br />
			dvvwidth of the screen and <br />
			 in order to do that you have <br />
		    to use javascript or atleast <br />thats the only way </span>			</div>
	   <div id='imageholder'><img src="images/image.gif"/></div>
	   <div id='textholderbottom'>
			<span class="style2"><p>dvvwidth of the screen and 
			 in order to do that you have 
		    to use javascript or atleast thats the only way
			dvvwidth of the screen and 
			 in order to do that you have 
		    to use javascript or atleast thats the only way 
			dvvwidth of the screen and 
			 in order to do that you have 
		    to use javascript or atleast thats the only way </p> </span>		  </div>
	</div>
	<div align="center"><br />
          <span class="style3">Home | contact | About Us | More </span><br/>
  <span class="style4">All rights reserve @ ronald 2007</span></div>
</div>

</body>
</html>

SAMPLE that is my portfolio's layout

AndyB · October 30, 2007

I don't understand at all

As a matter of interest, did you read anything from the links I posted?

teng84 · October 30, 2007

i honestly dont see the big difference of divs and table

div<takes allot of time when coding tables dont specially when you use (dreamweaver etc..)

clean code<<< i guess it will depend how you code your html

css<< hard to layout (IE and FF issue)

css< is fast

:-\

Azu · October 30, 2007

I don't understand at all

As a matter of interest, did you read anything from the links I posted?

Yes. And I don't understand any of the points mentioned in them. They seem to me to all be false.

How is

<table><tr><td>Link 1</td><td>Link 2</td><td>Link 3</td></tr><tr><td>Link 4</td><td>Link 5</td><td>Link 6</td></tr></table>

Worse then

<div><ul><li>Link 1</li><li>Link 2</li><li>Link 3</li></ul><ul><li>Link 4</li><li>Link 5</li><li>Link 6</li></ul></div>

?

Please somebody explain IN DETAIL...

PPS: and why does everyone keep saying that it is CSS or tables? I am asking about divs vs tables not CSS vs tables.

I am going to be using the exact same CSS whether I use divs or tables.

Liquid Fire · October 30, 2007

Make a site with all table to give it the layout and then try to completely change the layout with just css, that is impossible, you will have to change all your table stuff. Make a site designed with divs, lists, etc.. and not table and you can completed change the way the site looks without changing a single line of code in the html. http://www.csszengarden.com/ is the best example of the power of css. I believe the html is the same with every design they have, that would be impossible with table(or would required a complete rewrite fo the html and css, not just the css. Tables are very useful, just not for designing a website layout with.

PPS: and why does everyone keep saying that it is CSS or tables? I am asking about divs vs tables not CSS vs tables.
I am going to be using the exact same CSS whether I use divs or tables.

Because tables restrict the design/layout of your site and divs don't. I ask why tables instead of divs, tables give you nothing extra the divs/css can't do(and divs/css can do things that tables can't).

Azu · October 30, 2007

It seems noone is reading this so here it is again..

As a matter of interest, did you read anything from the links I posted?Yes. And I don't understand any of the points mentioned in them. They seem to me to all be false.

How is

<table><tr><td>Link 1</td><td>Link 2</td><td>Link 3</td></tr><tr><td>Link 4</td><td>Link 5</td><td>Link 6</td></tr></table>

Worse then

<div><ul><li>Link 1</li><li>Link 2</li><li>Link 3</li></ul><ul><li>Link 4</li><li>Link 5</li><li>Link 6</li></ul></div>

?

Please somebody explain IN DETAIL...

PPS: and why does everyone keep saying that it is CSS or tables? I am asking about divs vs tables not CSS vs tables.

I am going to be using the exact same CSS whether I use divs or tables.

neylitalo · October 30, 2007

A handful of people with loads of experience have given you a dozen reasons, yet you don't want to accept that what "everybody" is saying has some truth to it?

How is

<table><tr><td>Link 1</td><td>Link 2</td><td>Link 3</td></tr><tr><td>Link 4</td><td>Link 5</td><td>Link 6</td></tr></table>

Worse then

<div><ul><li>Link 1</li><li>Link 2</li><li>Link 3</li></ul><ul><li>Link 4</li><li>Link 5</li><li>Link 6</li></ul></div>

?

Please somebody explain IN DETAIL...

This is an acceptable use of tables, in my opinion. While a list is more appropriate (because it's a list of information, not a table), I can understand why someone would use tables.

We're not saying that creating a list of items using tables is bad, we're saying that blocking out your website layout with tables is bad. Imagine a layout like the image attached. The following is required for the basic table-based layout:

<table>
<tr colspan='3'>
<td></td>
</tr>
<tr>
<td width='100px'></td>
<td></td><td width='100px'>
</tr>
<tr colspan='3'>
<td></td>
</tr>
</table>

I sure don't want to have to hack that.

The same basic layout with divs:

<div id='top'></div>
<div id='right'></div>
<div id='middle'></div>
<div id='left'></div>
<div id='bottom'></div>

And the accompanying CSS:

div#top, div#bottom
{
width:100%;
height:100px;
}

div#left, div#right
{
width:100px;
}

div#right, div#middle
{
float:right;
}

In this simple instance, you don't get a lot of (any, actually) code reduction. However, if we were to start fleshing out the website and adding content and features, we can create div classes for commonly used elements, and save dozens and even hundreds of lines of code. It's the equivalent of using objects in PHP. You can't do anything even close to that with tables - you have to keep on creating rows and columns.

And of course, both versions are going to have massive display bugs in different browsers, but the version that uses divs with stylesheets is going to be a lot easier to fix.

PPS: and why does everyone keep saying that it is CSS or tables? I am asking about divs vs tables not CSS vs tables.

I am going to be using the exact same CSS whether I use divs or tables.

Then you're using CSS very poorly.

[attachment deleted by admin]

Azu · October 30, 2007

Thanks! I'm sorry if I sounded rude.. I didn't mean to me.. I am just trying to find out why it is bad to use tables for layout like this the way I am right now in the example that I gave.. sorry.. x_x;

And why am I using CSS poorly? I still don't understand why the CSS wouldn't be the same for tables as for divs..

The only difference that I know of is that tables align and divs don't.. in all of the examples that you are all giving me of times when tables are bad, you always show the tables being used differently then the divs.. I want to know why it would be bad to use them the same.. as in just replacing the divs with tables, the uls with trs, and the lis with tds.. and even with all of the information you have all given me, I still can't understand why it would be bad to do this..

I do understand that there are bad ways to use tables yes, but this doesn't mean anything. There are bad ways to use everything..

And also I thought one of the good things about CSS is that you can use it on any element you want to.. so why wouldn't you use the same CSS with tables as with divs? I still don't understand.

And if I haven't done a good job explaining what I mean.. okay.. let's say you add this CSS to your website;

div,ul,li{display:table}

How would this mess up the accessibility and bloat the code and stuff? Did I ask my question right this way? Or am I still not being clear? *confused*

Sign In

[SOLVED] Tables

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information