

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

Hi HN'ers,<p>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.<p>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.<p>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?<p>-dan
======
BSeward
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.

~~~
dandelany
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.

------
briansmith
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.

~~~
BSeward
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.

~~~
briansmith
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.

------
mikeryan
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.

------
noodle
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.

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

~~~
dandelany
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.

