whats wrong with tables

[teammatt3]

I designed dirt4fun's (http://www.dirt4fun.com/toc.php) layout with tables. Someone said something like tables are bad for layouts, so how do I design my site without tables??
I am really new to web design too :D

[Jona]

Tables are not to be used for layout, as stated in the WCAG 1.0:

From the W3C WCAG 1.0 at: http://www.w3.org/TR/WCAG10/#gl-table-markup
Tables should be used to mark up truly tabular information (http://www.w3.org/TR/WCAG10/#tabular-information) ("data tables"). Content developers should avoid using them to lay out pages ("layout tables"). Tables for any use also present special problems to users of screen readers (http://www.w3.org/TR/WCAG10/#screen-reader) (refer to checkpoint 10.3 (http://www.w3.org/TR/WCAG10/#tech-linear-tables)).

Some user agents (http://www.w3.org/TR/WCAG10/#user-agent) allow users to navigate among table cells and access header and other table cell information. Unless marked-up properly, these tables will not provide user agents with the appropriate information. (Refer also to guideline 3. (http://www.w3.org/TR/WCAG10/#gl-structure-presentation))

[J]ona

[Jona]

Section 508 (subsection 1194.22) also states:

From URI: http://www.section508.gov/index.cfm?FuseAction=Content&ID=12
(g) Row and column headers shall be identified for data tables.

(h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

[J]ona

[Charles]

There are two ways a non-graphical browser can handle a table. The old way was to simply ignore them. Lynx uses this method. The big problem with tables and these browsers is that with the "old nav bar down the left side of the screen" design the user has to listen to a repetitive list of links at the top of every page in your site. One solution is to put the links down the right side. Another is to use a "skip navigation" link.

But TABLEs are a legitimate HTML element in their own right. There how you organize tabular data and screen readers need to be able to present the data in a way that the user can understand the relationships. And the advanced screen readers do have a way. Essentially they call out the contents of the appropriate header cell or cells with each data cell. And if you haven't indicated what the header cells are then the browser just guesses. If you have used tables for layout then this will really make a mess out of your page. In other words, "this may present problems when rendering to non-visual media."

[teammatt3]

what do i use besides tables to design a page

[Jona]

You use CSS (http://w3.org/TR/CSS2).

[J]ona

[teammatt3]

Make a css table??

[Jona]

Not quite. You use CSS instead of tables. For example, instead of using a table for a site (this site (http://jagged-rocks.bravepages.com/) uses tables for layout, but this site (http://jagged-rocks.bravepages.com/new/) uses CSS [Note: the CSS code is in an external file]).

[J]ona

[teammatt3]

the page that uses css looks like it has tables??? Can u clear this css thing up for me, i am thick headed

[Jona]

In the first example, not only is the page totally terrible (on the inside), but it is difficult to code and takes longer to load (rhyme). The logo has three TDs the consist of parts of the logo, and then there is two other cells that contain the navigation and content. In the second example, however, there is a simple image which is the logo, a DIV (http://www.w3.org/TR/html4/struct/global.html#edef-DIV) holds images for navigation, and a seperate DIV contains the content. Here is the source code for the second example (note: I have not validated the CSS code, but it should be valid):


<style type="text/css">
<!--
A {color:dimgray;text-decoration:none}
A:visited {color:dimgray;text-decoration:none}
A:active {color:white;text-decoration:none}
A:hover {color:white;text-decoration:none}
body { background-color:#303030;
color:white;
font-family:verdana, arial, "times new roman", sans-serif;
margin: 0 0 0 0;
}
p {text-align:justify;}
#firstOne{
position:absolute;
border:solid 1px #f0f0f0;
border-top:solid 0px #f0f0f0;
top:220px;
left:230px;
padding:13px;
width:484px; /*514*/
background-color:#444444;
}
#b1{
position:absolute;
top:195px;
left:230px;
}
#logo {
position:absolute;
top:0;
left:0;
}
#nav {
position:absolute;
top:170px;
left:10px;
border:solid 1px #f0f0f0;
padding:8px;
background-color:#444444;
}
img {border:0;}
-->
</style>


Here, you see that the #nav sets the CSS properties for the <DIV ID="nav"> division. The same applies with the rest of the DIVs. Other CSS code is simply for page-look (body, img, etc.). You may want to take a look at the documentation on CSS (see CSS 2 Ref link below), or some other neat things you can do with CSS (see CSS ZendGarden link below).

[J]ona

[teammatt3]

i get it

but i am still using tables :p