Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Banned
    Join Date
    Apr 2009
    Location
    Indonesia
    Posts
    14
    Member #
    18823
    Hello, I'm totaly new at div & css design, so please tell me why one is better from another?

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    This goes back to the original browsers and the beginning of HTML ...

    <table> was originally designed to display "tabular" data. Such as a list of
    things from a database, possibly a calendar (with cells horizontal and vertical),
    and displays and information that have a "grid" or "list" like layout.

    As web pages became more elaborate and stylish, people started using tables
    to position areas of content. The layout was no longer "tabular", but the use
    of tables allowed people to section-off areas and images.

    CSS (cascade style sheets) came along and offered a wider variety of layout
    tools. The <div> was a "division" or section of content and can be placed
    anywhere. It can be selectively styled (fonts, background, colors, padding, etc).
    CSS can also be stored in a .css file, and referenced on each page. That means
    every page on your website can use the same CSS file. If you change one color
    in that CSS file, that change is made across all of your pages.

    Tables still work fine for websites, especially where the content never changes.
    A designer tweaks everything perfectly and the web pages stay the same.
    But things are different now ... websites are "dynamic". The content is always
    changing from day to day. This is a problem with tables, because they are good
    for static pages, but not for pages with varying content lengths and graphic changes.
    CSS can simplify the whole idea of changing content on a page, as it adjusts for the
    change in content.

    So tables should be used for "tabular" data, but not for design layouts of pages.


  4. #3
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    If you know HTML and CSS, here's a good resource to get your started.
    It takes you through the steps of creating a tableless design.
    Basic CSS Layout Tutorial - Infinitely Looping
    "div design" is usually referred to as CSS layout, CSS-P (positioning), or tableless layouts.

    As the poster above mentioned, its better because it allows you to do a lot more.
    Other reasons why CSS is better include
    • Presentation is seperated from the structural markup. This makes it easy to change styles without even touching your HTML page.
    • The stylesheet is loaded on first request and gets cached by your browser. All subsequent requests which request that stylesheet will use the cached version, making the page load faster as opposed to loading all the layout markup of the table tags.
    • CSS gives you a lot of powerful features, some of the most used being the :hover and :focus pseudo classes. And different methods of positioning. Floating images, absolute positioning(can be used for overlapping elements) z-index(layering), fluid layouts (layouts that expand to fit the entire browser, all element widths are represented as a % of the resolution). Easy background images on tons of different elements (used for button hovers).
    • Using a tableless layout leads to A LOT cleaner markup. Tables require a ton of <tr> and <td> tags all over the place.

      Example:
      <table>
      <tr>
      <td>Here is my content section</td>
      </tr>
      </table>

      Now css..
      <div id="content">
      Here is my content section
      </div>

      This all adds up.
    The list goes on and on,
    the one pro of using tables is that the layout will look uniform in all browsers and resolutions. CSS is a little harder in terms of cross browser compatibility, but the power and features available by using css as well as the many many positive points for CSS, makes CSS a downright winner when asked Table vs Tableless.


    So..never use a table right? WRONG.
    Dont use them for layout. But if you have something like
    Net Revenue Net Losses Total Revenue
    1st Qtr
    2nd Qtr
    3rd Qtr
    4th Qtr

    you would wanna use a table, look at it, it looks like a table.
    Anyways, if data can be displayed in a column/row format, you should use tables

  5. #4
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    All above posts are right on, but there's one more important aspect of css in that a css built site is much more search friendly. Search engines like to scan "readable by humans" code, meaning, there is a lot less markup code with css which in turn allows a search engine to scan a page with ease. If there are a bunch of nested tables and other needless markup, it can hinder a search engine.

  6. #5
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    also, with css you can put your most important stuff at the top (content) and have your markup for say, google ads near the bottom, yet still appear high up on ur site (this makes javascript snippet the last thing to load, if its near the top you may notice while you load, ur site doesnt get rendered and its waitin for hte javascript load)

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    With IE, a <table> has to fully load before it is displayed ... loading appears slower.


  8. #7
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    if you need a push to CSS layout and have yet to see a good reason, CSS-3 will be implemented in all browsers in short order and the lack of speed compatibility in javascript give me very good reason. ( no CSS-3 still will not do everything javascript will do ) combineing the new CSS like :hover for all tags not just <a will allow for crossbrowser CSS dropdowns i have one sitting in wait for IE7 to go away before it gets implemented as IE7 was in my opinion a grab to make developers another source of income for them and adobe . IE7 supported as little CSS as they could get away with. IE8 tells me that didnt work out so well for them. but anyway http://www.css3.info/ says it better.

    while($get_it !== true){ continue; }

  9. #8
    Banned
    Join Date
    Apr 2009
    Location
    Indonesia
    Posts
    14
    Member #
    18823
    Ok, now I understand much more. Thank you for all

  10. #9
    Junior Member
    Join Date
    Jun 2009
    Posts
    6
    Member #
    19173
    Table is more browser compatibility.

  11. #10
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    Quote Originally Posted by nete_andy67
    Table is more browser compatibility.
    Only if you care about 0.1% of browsers. The other 99.9% (literally) will support virtually any layout done through semantic markup and style.

    I haven't used a table for layout in three years.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:06 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com