CSS Should Not Be Used For Layout

  • 7Hunters
  • Newbie
  • Newbie
  • User avatar
  • Posts: 6
  • Loc: Missouri

Post 3+ Months Ago

Table layout would be okay if a person is new to designing web sites or not working on web sites as a professional.

When I first started with CSS layout I guess my first painful steps made me wonder, "why am I doing this?" But as soon as I saw all the very cool possibilities I felt like I was going from the jumbo kindergarten crayons (set of 8) to a full pallet of water colors. I can't imagine going back to tables.

<div> elements are boxes and inherently fall into grid system better than tables because you can infinitely tweak them and you have so much more control.

CSS layout allows me to fine tune a composition and much more easily apply Photoshop designs to a page. I don't know any pros in my field who use tables for layout.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England

Post 3+ Months Ago

I have been working with this a lot now but I have not just realised that you don't need time all that mush you can sympley assign height and width styles to a <p> tag.
  • northstjarna
  • Beginner
  • Beginner
  • northstjarna
  • Posts: 58
  • Loc: Chertsey, UK

Post 3+ Months Ago

Ok Tables should be used for displaying data only, that's their purpose and what they are for. Css is for styling. Tables have been used to design sites that would otherwise be very difficult with css, but that was really a work around. Tables were never intended to style layout.

Also tables do not give to accessible design.
How do screen readers like Jaws or Browsealoud interpret the layout of a site designed purely in tables???

This is important to bear in mind when designing for government sites and organisations, big contracts and is becoming a big part of website interest. It's a very hot topic because by 2010 all government based websites have to be at least double A compliant or funding will get removed.

You should think about accessibility when designing sites because it is important and actually leads to better programming and design. - Rather than having to go back and make a site accessible which is a pain, have it as part of the design brief.

I don't know why I digressed but pointing out tables...whatever can be designed in a table can be done with css these days.
  • localhost_dev
  • Born
  • Born
  • localhost_dev
  • Posts: 2

Post 3+ Months Ago

I think CSS and div layout are the way to go but I came across a site that points out a couple cool way to use css in a tabular fashion using

display: table;
display: table-row;
display: table-cell;

but I'll let you all make up your own minds

http://www.digital-web.com/articles/eve ... _Is_wrong/
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Here is what I think is interesting about those that think that CSS saves space... using a lot less to make a box (I thought so too, until this hit me).

Let's say you are going to make a three column box... no headers or footers. Let's see how many lines it would take to make it using tables.

Code: [ Select ]
<table width="100%' height="100%" border="0">
   <tr>
      <td>
         <p>Column #1</p>
      </td>
      <td>
         <p>Column #2</p>
      </td>
      <td>
         <p>Column #3</p>
      </td>
   </tr>
</table>
  1. <table width="100%' height="100%" border="0">
  2.    <tr>
  3.       <td>
  4.          <p>Column #1</p>
  5.       </td>
  6.       <td>
  7.          <p>Column #2</p>
  8.       </td>
  9.       <td>
  10.          <p>Column #3</p>
  11.       </td>
  12.    </tr>
  13. </table>

That is 13 lines of code...

Now, let's do the same using CSS only (DIVs and CSS)
Code: [ Select ]
<style type="text/css">
#cont {
   width: 100%;
   height: 100%;
}
#col1 {
   float: left;
}
#col2 {
   float: left;
}
#col3 {
   float: left;
}
</style>
</head>
<body>
<div id="cont">
   <div id="col1">
      <p>Column #1</p>
   </div>
   <div id="col2">
      <p>Column #2</p>
   </div>
   <div id="col3">
      <p>Column #3</p>
   </div>
</div>
  1. <style type="text/css">
  2. #cont {
  3.    width: 100%;
  4.    height: 100%;
  5. }
  6. #col1 {
  7.    float: left;
  8. }
  9. #col2 {
  10.    float: left;
  11. }
  12. #col3 {
  13.    float: left;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div id="cont">
  19.    <div id="col1">
  20.       <p>Column #1</p>
  21.    </div>
  22.    <div id="col2">
  23.       <p>Column #2</p>
  24.    </div>
  25.    <div id="col3">
  26.       <p>Column #3</p>
  27.    </div>
  28. </div>

And that is 26 lines of code...


This is not for or against TABLES or CSS based layouts. Just something to think over... CSS is external anyway, and it is used so we could change the layout over.

I still am for CSS based layouts. They just need a bit more thinking over to get it to work the same on all browsers.
  • philarcher
  • Born
  • Born
  • User avatar
  • Posts: 2
  • Loc: Ipswich

Post 3+ Months Ago

I'm a little saddened by the degree of support for tables for layout. It really is the wrong approach. Here are some reasons why those who stick to tables rather than divs might want to think again:

1. It is inflexible. Your website might be seen on a desktop, or a mobile device. If you put things in a fixed table (even worse with a fixed width) then it's just going to look pants on one or other.

2. The flexibility of divs (with CSS) means that the job of content adaptation engines on mobile networks is either eliminated or at least reduced.

3. Tables for layout make the site inaccessible to anyone using a screen reader or some other helper application so you're losing potential audience.

4. What's bad for mobile and accessibility is also bad for search engine indexing.

5. It mixes up content and style - two things that are very different. The look and feel of a website can be completely changed without having to re-compile anything - if you maintain proper structure with divs, <h1>, <h2> elements etc.

Yes, some things _are_ a pain. And I admit freely that some things are really hard to achieve with CSS so do occasionally take minor shortcuts, but making the effort really will pay off.

As for getting further implementation of CSS 3 grids, well, the working group is doing its best of course... :-)
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

interesting. Actually I think we could use a good bit more discussion here on designing for mobile. If you are skilled at it feel free to step out of the box with a few topics on it.

Post Information

  • Total Posts in this topic: 37 posts
  • Users browsing this forum: No registered users and 38 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.