www.webdeveloper.com
Results 1 to 11 of 11

Thread: whats wrong with tables

Hybrid View

  1. #1
    Join Date
    Jun 2003
    Posts
    30

    Post whats wrong with tables

    I designed dirt4fun's 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

  2. #2
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    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 ("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 (refer to checkpoint 10.3).

    Some user agents 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.)
    [J]ona
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  3. #3
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    Section 508 (subsection 1194.22) also states:

    From URI: http://www.section508.gov/index.cfm?...=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
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  4. #4
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    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."
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  5. #5
    Join Date
    Jun 2003
    Posts
    30

    so....

    what do i use besides tables to design a page

  6. #6
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    You use CSS.

    [J]ona
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  7. #7
    Join Date
    Jun 2003
    Posts
    30

    css

    Make a css table??

  8. #8
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    Not quite. You use CSS instead of tables. For example, instead of using a table for a site (this site uses tables for layout, but this site uses CSS [Note: the CSS code is in an external file]).

    [J]ona
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  9. #9
    Join Date
    Jun 2003
    Posts
    30

    what

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

  10. #10
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    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 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
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  11. #11
    Join Date
    Jun 2003
    Posts
    30

    i got it

    i get it

    but i am still using tables

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles