DiV/CSS vs tables....start me off

Discussion in 'Web Design and Development' started by pelsar, Oct 17, 2008.

  1. pelsar macrumors regular

    Apr 29, 2008
    ok guys this is your big chance...i've come to the inevitable conclusion that i have to learn about DIVs/CSS etc.

    dont forget i come from a visual world where if a column is too wide i simply grab the vertical line and move it to where i like it.

    so where do i start off "reprogramming" my mind to understand the DIV universe (and is there anything visual about it? or is it all letters and numbers?


    ideally..at least in the beginning it would be nice to have a magic tool that could convert a 3 column table into a bunch of divs....
  2. angelwatt Moderator emeritus


    Aug 16, 2005
    I'd actually start with the stickies in this forum. They have some good information and I believe there's some good links for CSS.
  3. jakk2809 macrumors member

    May 24, 2007
    The great thing about divs is the ability to encapsulate divs within each other and the amount of control you get from divs. A table is pretty static and can't change much. A div is a form of a box that can be edited to your exact specs. Depending on the situation, divs are better than tables.

    For example when you want to make a page with distinct columns or sections like http://www.apple.com/iphone/

    It would be very hard to do this sort of layout efficiently with tables.
  4. ksb43 macrumors member

    Oct 15, 2008
    Once you get the basics of CSS down this is a great resource:


    The point of CSS is to separate structure and design as much as possible. In other words, your HTML should really only contain the content of the page in a logical structure that is independent from design. Then you use CSS to make your page look the way you want. If you want to get technical about web standards, you should only use tables for tabular data.

    You might want to read this:

  5. themoonisdown09 macrumors 601


    Nov 19, 2007
    Georgia, USA
    This website will teach you CSS, give you tutorials and examples: http://www.w3schools.com/css

    By the way, I like using the W3 Schools website as a good web design reference. There is a whole lot more than just css on this site.
  6. lucidmedia macrumors 6502a

    Oct 13, 2008
    Wellington, New Zealand
    I wanted to second this! This separation of content and form cannot be stressed enough!

    HTML defines the semantic relationships between CONTENT. (i.e. "This is a headline", "This is a paragraph", "This is a sidebar").

    CSS rules define how to visually represent that content. (i.e. "sidebars should be placed on the right of the page and be set in a smaller typeface"). CSS defines FORM (color, position, etc.)

    The key here is extensibility and reusability. If you have coded to web standards you can use the same content and render it differently on an iphone browser than a standard browser. Same HTML, different CSS rules.

    When it comes time to redesign/refresh your site, only the CSS needs to change as the content does not change, only the way the content is treated visually.

Share This Page