Pet Peeve – Using HTML Tables to Control Web Page Layout

I haven’t seen much on this topic in the .Net world, but I thought I’d throw it out there.  A while back I finally moved from the Table camp to the CSS camp for controlling the layout of web pages.  Seems like most of the .Net world still lives in the Table camp, and it bugs me that VS.Net encourages it.  Does anyone else have a problem with this?  Create an HTML using Tables to control the layout (or pull it down from here), and then view it in the Design window.  Now do the same using Divs with CSS (or get it from here).  Looks terrible, and is impossible to edit in the design window (not that I do that, but for newbies I can see them using it).  Now look at the actual code for each example.  Isn’t the CSS version much easier to read and create?  It does a much better job separating the look and feel of the web page from the process that created it.  Plus it lets the browser decide what the natural flow for the device that the page is displayed on. 

One added bonus of using CSS instead of tables.  Printing.  You don’t need a printer pretty version of each and every page.  Instead you create 2 separate Styles (either in line or as a link) and use the media option.  The default media option is “all”, but you can set them to “print” or “screen”, and thus have 2 different styles, one for the screen and one for the printer.  And you don’t have to change your content at all, just set the divs that you don’t want rendered set to display:none.

For more cool CSS tips and tricks check out Eric Meyer’s site (and while you are at it, buy his CSS book).

Don XML

6 Comments

  • I thought I was the only person who hated table layouts!!

  • I prefer the Table Layout myself, sorry guys

  • I would move to pure CSS but until IE corrects the bugs in DIV background images, I will use tables.

  • Personal website: all CSS


    Professioanl website: table layout.





    I just found myself wrestling with CSS trying to find the right combination of div tags floating and absolute positioning was far more difficult than the benefits brought me.





    I put together a table layout that renders perfectly in NS4+, IE4+ and Opera in about 5 minutes. I wrestled with the same layout in CSS for almost two weeks.





    Too many hacks in CSS for it to be useful for your classic business looking website.

  • I can't stand how VS.NET mangles my HTML in design mode; this is just one more reason against it.

  • I agree with Phil. For cross-browser compatability my experince has been that tables are "surer" than CSS2.



    The question to wrestle with now is whether or not it is a valid concern to worry about designing for the other 4-5% of the browser market?



Comments have been disabled for this content.