Ask YC: Table based layout - part of the learning curve, or just deprecated? | Hacker News Reader

Ask YC: Table based layout - part of the learning curve, or just deprecated?

2 pointsdandelany9 comments

Hi HN'ers,

A friend of mine, a CS major and good programmer, is working on a web project and learning HTML/CSS for the first time. As a web developer, I've done my best to nudge him in the right directions, in terms of separating semantics and layout, graceful degradation, and best-practice CSS, but like anyone who's never used code for layout, he's struggling with CSS's annoying idiosyncracies, cross-browser bugs, and weird (at first) ways of doing things.

Here's the thing: I know he could pick up functional table-based layout very quickly and produce a 'working site' with much less headache. That's how I learned it, and I have no doubt that its more intuitive to the beginner, especially with tools like Dreamweaver's table builder.

So, do you think it's best to learn to do it wrong (but do it) first, as long as one later understands why sites shouldn't be built that way? Or if I teach him table-based layout, will I just be unleashing another hapless developer who doesn't respect web standards onto the Internet?

-dan

I would suggest a grid-based CSS framework, such as http://www.blueprintcss.com/ . They eliminate most the headaches of cross-browser bugs in CSS for layout, at the (comparably minor) expense of including some non-semantic class names.

When I started learning presentation layer I went straight to HTML/CSS. Tables have always seemed ungainly and unmanageable in comparison, particularly if the project is going to be using significant DOM-modifying JavaScript, or if the layout is not set in stone.

Thanks, this is a good suggestion, I'll pass it along. I don't have any experience with CSS frameworks myself - it's just easier for me to do it by hand at this point - but I could see how they could significantly change the learning curve for beginners.

Ask yourself these two questions:

1. Does this layout require display: table/table-row/table-cell?

2. Do I want this to work in IE6 and IE7?

If the answers are "yes" and "yes" then you have to use a table, because that is the only way to get display: table functionality in IE6 and IE7.

If either answer is "no" then using something other than tables is probably best. If you are starting from scratch then you should probably do whatever will get you a prototype faster. If you've already laid out the page using a table, then add an issue "redo layout without using tables" in your issue tracker and prioritize it against your other issues.

Can you identify some layouts that require display: table/table-row/table-cell? They solve some problems with CSS, but those problems (insofar as I've experienced) only come up when working with designs that specifically target the shortcomings of CSS' other display modes (e.g. your shorter secondary column has a background that needs to extend the length of the primary column); or that have layout idiosyncrasies so unconventional that a designer would either need to be familiar with how to implement them to even propose them, or be actively malicious (e.g. uh... like a variable height container that sits at the bottom of a secondary column alongside a longer primary column, I think?).

But "yes" to fast prototypes.

Many times when you want to constrain an element's size and/or alignment based on the size/alignment of elements above/below and beside it, you need to use table layout. Consider a simple layout from a site I will be launching very soon (not to scale):

       BBBB
    A  BBBB
       BBBB
  CCCCCDDDDEEEEE
  CCCCCDDDDEEEEE
       FFFF
       FFFF
       FFFF

You want A to be vertically centered with B and horizontally centered with C. You can't give a fixed width or a fixed height to anything because the layout needs to be fluid. I don't see how to do it without using table layout.

If some dimensions of some elements can be fixed (e.g. the width of A and C), or if some alignments are changed to make thinks convenient (e.g. align the bottom of A with the bottom of B), of if approximate alignment is good enough, then often nested block/inline-block and some positioning fu can be used instead of tables. But, sometimes the automatic table layout algorithm is exactly what the layout needs.

Honestly I don't think this question is really about "to table or not to table"

The question is whether you friend would find value spending the time now to learn how to use CSS properly despite its quirks. If he's going to be maintaining this site and others for a long period of time then he should probably eat the learning curve and learn CSS now. If its a one off project with little maintenance then do what's easier.

in my humble opinion, its a step on the learning curve. he shouldn't take it and run, never learning CSS, but to build a site or two with tables is fine. especially if he later comes back and spends time re-doing them without tables.

as long as he's using the process to learn more about CSS and improving his skills, not just learning how to make better table layouts.

Rather a leading question. What about the third option: that there's nothing wrong with tables?

Tables are, in my opinion, a good way to learn web layout quickly, but I strongly believe that there is value in XHTML which reveals the document's semantics, and tables should be used for tabular data only. While the semantic web is in its infancy, we should try to do our best to create documents which give the future's data miners the best chance of creating linked data from our articles, essays, and appilications.

Furthermore, for developing big sites, CSS saves a lot of money and man-hours because sitewide design decisions can be made by editing a single stylesheet.

And, if he's going to do web dev in the future, and presumably add this project to his resume, his potential employers are not going to be excited to see that he thinks TD's and TR's are the way to go - most professional web dev shops use CSS/DIV based layouts.

Plus, CSS as a language, along with its support in major web browsers, is steadily improving. Old school table layouts, not so much.

Reply on news.ycombinator.com