Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Use of tables in website

    Hi I am building a website at http://www.techlimelight.com/beta and am using tables quite heavily alongside CSS. Is this considered bad coding practice? Should I avoid tables altogether and purely use CSS?

    Thanks for your time,
    Marc

  • #2
    Senior Coder
    Join Date
    Apr 2007
    Location
    Quakertown PA USA
    Posts
    1,028
    Thanks
    1
    Thanked 125 Times in 123 Posts
    Tables used for layout is considered poor design. Tables used to display tabular data, however, is not.

    You should strive for semantic coding for your layout and use tables where you need to display appropriate data.

  • #3
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Yes it is considered bad coding practice. Your html tags should have meaning as to what content they hold. Tables should be used for tabular data. List items should be put into list elements. Paragraphs into <p> elements etc. The tags are a description of the data they hold and have no relation to the layout of the page.
    Helping to build a bigger box. - Adam Matthews

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Why tables for layout is stupid:
    (got from Aero's sig )
    Last edited by abduraooft; 10-03-2007 at 03:10 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Oct 2007
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks so much everyone! Wow this forum is fast... I posted in another forum and have yet to get a response after a couple of days. I have begun transitioning from table layout to CSS, however I am running into a problem. As you can see at http://www.techlimelight.com/beta the login form in the top right works as intended in Firefox but is misalined in IE. The password field is also slightly misaligned in Safari.

    What am I doing wrong? Is there any way to fix this/avoid this in the future. What is the best way to make sure the design looks the same across browsers? Particularly in IE, Firefox, and Safari?

    I've attached the stylesheet.

    Thanks in advance,
    Marc
    Attached Files Attached Files

  • #6
    New Coder
    Join Date
    Oct 2007
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ok well I seemed to have fixed the problem. I'm not sure if this is the correct way to go about it, or why it even fixed the problem though. Instead of applying a style to the login_rule.jpg image (the ruler below "Login" and "Forgot Password") via the <img id="">, I wrapped the <img> in a <div> tag and assigned the id to the div element. That seemed to fix the problem in IE. Still don't know why though. I have updated the website to reflect the result.

    -Marc

  • #7
    New Coder
    Join Date
    Oct 2007
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Does the style of coding look decent? Is what I am doing considered good practice both in the stylesheet and in the code itself? I just want to make sure I get this all sorted out before I convert the rest of my code. Any suggestions to avoid browser conflicts, coding style suggestions, etc?

    Thanks again,
    Marc

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You know that you have the HTML right when the tags describe what they contain and you have the minimum number of div and span tags that are required to lay the page out correctly.

    If wrapping an image in a div and styling the div fixed a problem then adding display:block to the styles for the image would probably fix it without needing the div.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    New Coder
    Join Date
    Sep 2007
    Posts
    24
    Thanks
    4
    Thanked 1 Time in 1 Post
    Just to drive the point home, I am currently working on an existing site that has used tables for layout. When you have tables nested in tables nested in tables nested in tables (yes, I have pages that have 4 levels of tables), it is a headache to troubleshoot layout and design. CSS and divs are much more friendly to problem solving and making future changes.

    Stick with the CSS. It will be better off in the long run!


  •  

    Posting Permissions

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