SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Page Layout with Tables

    I thought I'd create my own thread on the subject of using tables for full page layouts.

    here's my example
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Tables with CSS for layout</title>
    <META http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    body {padding:0px;margin:0px}
    thead { height:auto;background:yellow;margin:0px }
    .ltd { width:100px;background:red; }
    .mtd { width:auto;background:green; }
    .rtd { width:100px;background:blue; }
    tfoot { height:auto; background:purple;color:white }
    td { padding:0px;border:0px;margin:0px }
    table { height:100% }
    </style>
    </head>
    <body>
    <table cellspacing="0">
    <thead><tr><td colspan=3><h1>Header</h1></td></tr></thead>
    <tfoot><tr><td colspan=3>footer</td></tr></tfoot>
    <tbody>
    <tr>
    	<td class="ltd">left content left content left content left content left content left content left content </td>
    	<td class="mtd">middle content middle content middle content middle content middle content
    middle content middle content middle content middle content middle content
    middle content middle content middle content middle content middle contentmiddle content middle content middle content middle content middle content
    middle content middle content middle content middle content middle content
    middle content middle content middle content middle content middle contentmiddle content middle content middle content middle content middle content
    </td>
    <td class="rtd">right content right content right content right content</td>
    </tr>
    </tbody>
    </table>
    </body>
    The above code gives a full page table. If the DOCTYPE is changed, it may not render it in as a full page, but with with the one here it will.

    It is html and css validated.

    For SEO, you may want to create a common footer in an external js file, as the <tfoot> must go between the <thead> and <tbody>
    Otherwise search engines will probably pick up just links ( that's what most people put in their footers ) before the content, but SE's prefer to find links written within text.

    so a good way of using this script is to also use the following.
    Code:
    <tfoot><tr><td colspan=3><script type="text/javascript" src="commonFooter.js"></script></td></tr></tfoot>
    remembering to allways put it between your thead and tbody tags.

    As tables render well when text size in changed within the browser, the objects within each <td> can be applied with widths of 100%. Using this method pictures and menus will render well when text size is increased.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  2. #2
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    by writing your footer links with javascript, you are effectively hiding them not only from search engines (and thus preventing them from following links, with all that this implies) but also from a portion of your audience which have javascript off

    using tables for layout is so contradictory to what the w3.org is trying to accomplish, i'm surprised there would be any desire to validate -- i mean, what would be the reason? why waste your time?

    throw out the thead, tbody, tfoot tags, you don't need them
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  3. #3
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I use javascript menus as another form of includes. Better than some as it saves your server work, as it loads from the cache rather than the server.

    I only have a small bandwidth, and small online memory space, so for me js menus are ideal. As for search engines, most people have a sitemap, whether they use js includes or otherwise.

    Any link only menus don't have much affect on your search engine indexing anyway, apart from showing them the rest of your site. The links contained in sentances count far much more, which, if well done, should be in your sentances in the body of your site.

    Just make sure the site can be navigated with js on or off, that's all that matters, IMO.

    I personally think that if something looks the same in most browsers, then it should become a standard. It looks and works better than any layout I have seen......

    I know I will be using it in my next site. It is the best for accessibility, and that is going to be a big in my next site. ( not in current site as I rely on windows components which work in pixels )

    I agree you don't need the thead,tbody or tfoot, but I think it adds neatness to your coding for not many more characters. ( just makes each part easy to find and identify ). It also saves using classes.
    Last edited by Markdidj; Jan 17, 2004 at 17:50.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  4. #4
    Starting to-digg-in ********* jamesxv7's Avatar
    Join Date
    Oct 2003
    Location
    Island of Puerto Rico @ the Caribbean
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice solution, but I think that without tables is more better. Fastest download and less code
    James: Ecodig - My Blog - My Gallery
    Validate your sites: CSS - HTML/XHTML
    Without faith you are lost.

  5. #5
    l 0 l silver trophybronze trophy lo0ol's Avatar
    Join Date
    Aug 2002
    Location
    Palo Alto
    Posts
    5,329
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Markdidj
    Any link only menus don't have much affect on your search engine indexing anyway, apart from showing them the rest of your site. The links contained in sentances count far much more, which, if well done, should be in your sentances in the body of your site.
    A link is a link is a link.

  6. #6
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by lo0ol
    A link is a link is a link.
    sorry, disagree

    <a href="http://example.com/foo.html">this</a>
    is a context-free link, which does nothing the bolster
    the target page's standing in search engines

    i guess the worst offender of all is
    <a href="http://example.com/foo.html">click here</a>

    a fantastic resource is
    <a href="http://example.com/foo.html">The Wonderful World of Foo</a>
    because it has meaningful link text
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  7. #7
    l 0 l silver trophybronze trophy lo0ol's Avatar
    Join Date
    Aug 2002
    Location
    Palo Alto
    Posts
    5,329
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    "This" and "Click Here" won't be found on a menu. Most likely your anchor will be keyword-loaded anyway.

    There's still no reason to alienate a small chunk of your visitors by doing a JS-include. Nobody navigates with inner links. A site without a menu at all isn't very user-friendly.


Bookmarks

Posting Permissions

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