Arc Forumnew | comments | leaders | submitlogin
Table layouts considered helpful
1 point by evanrmurphy 5050 days ago | 14 comments
This post is only tangentially related to Arc.

If you started learning web development from online tutorials like I did, you probably noticed the general consensus from top search results that table layouts are sin. "Your content and presentation should never mix!" they declare.

I tried to be a good student and take this lesson to heart, but creating nice layouts in CSS is really hard. There are so many ways to alter the position of elements, from floats and clears to relative and absolute positioning, changing display properties between block and inline and inline-block, etc. I have trouble keeping them all straight, let alone how they interact with one another and their respective browser bugs.

Recently a time-sensitive project didn't permit me to fumble any longer with these properties to try and get the layout right, and I was desperate for an alternative. Reading a compelling essay [1] and trying a few examples finally put me over the edge: I do my layouts in tables now and doubt I'll be going back soon.

Of course, if my CSS skills were better, I'm sure I could figure out how to create solid layouts from CSS properties. (I know that people do this, and I have respect for them.) And of course, I could use a grid CSS framework like Blueprint, though tables are working so well atm, I'm not really sure what the advantage of this would be except to say that my layout was done in CSS.

(Note that I'm only advocating using tables for layout. For most other styling, CSS feels superior to the early presentational HTML tags and attributes.)

So, for any other budding web devs out there, I'd recommend not ruling out tables for layout as the top-ranking tutorials would so readily have you do. And even if you decide not to integrate tables into your standard templates and idioms, at least consider them part of your toolbox.

The relevance this has to Arc is html.arc. I'd previously considered a lot of the utilities in html.arc too dated for web development in 2011, in part because of the emphasis on tables. While I still might not use a lot of the other presentational HTML elements included, I wouldn't hesitate to take advantage of the table macros.

Comments welcome!

---

[1] http://www.flownet.com/ron/css-rant.html



2 points by thaddeus 5050 days ago | link

I love tables and use them everywhere. However that was not always the case.

When I started programming, I started with tables and quickly got frustrated spending mega amounts of time trying to make them behave/align across all the different browsers. I'd spend hours fiddling with float tags and various documented strategies to line things up.

So I initially gave up. I started switching my code to use divs. After all - everywhere I went for docs/forums/blogs people kept stating that tables were evil and should never be used.

Then I read one blog that had one tip (I wish I could remember the link to give credit). Since trying this tip tables have been everything I expected them to be.

The tip is really super simple -> At the top of your css file:

html {margin:0px; padding:0px }

And OMG I never had to try a float or other odd tricks again. Tables became super super easy.

I think many people spend tonnes of time troubleshooting cross-browser alignment issues trying to fight all the varying default margin and padding behaviors the browsers put in place. By initially setting them all to 0, they become normalized. Then you can started making adjustments, which then all have the same affect for each browser.

I later found only one other tip that helped me. IE will only consistently render a column width using a %. px does not work - correctly.

  <tr> 
    <td colspan=2>....</td>
  </tr> 
  <tr> 
    <td width="25%">....</td>
    <td>....</td>
  </tr> 
  <tr> 
    <td width="25%">....</td>
    <td>....</td>
  </tr>
Did I mention I love using tables now :)

Anyways... these tips really helped me. And I hope they help you too.

-----

1 point by evanrmurphy 5050 days ago | link

CSS resets were a big breakthrough for me as well. :) Is `html {margin:0px; padding:0px}` really the full contents of your reset, though? I use a borrowed one that's much longer, but I suspect one as simple as yours would work for a lot of cases.

Also, does `<td width="25%">` behave any differently from `<td style="width: 25%">`?

-----

2 points by thaddeus 5050 days ago | link

It hasn't for me and I use both often. But I don't test every possible os+browser+version combination. I add width to the style tag only if I have a style tag already.

[edit: yes that's my entire reset, but I don't make wildly complicated layouts]

-----

1 point by evanrmurphy 5050 days ago | link

> I add width to the style tag only if I have a style tag already.

You mean because just using the width attribute is more concise?

-----

1 point by thaddeus 5050 days ago | link

Yup + I've always imagined style tags require more parsing therefore are less efficient. In retrospect this is probably untrue, but still the code is shorter so I figure why not. :)

-----

1 point by evanrmurphy 5050 days ago | link

thanks for clarifying

-----

1 point by evanrmurphy 5050 days ago | link

Interestingly, Arc Forum doesn't do any kind of reset in the css: http://ycombinator.com/news.css. However a lot of the tables set cellpadding=0 and cellspacing=0, which should cover most of the cases re: tables.

-----

2 points by akkartik 5050 days ago | link

http://developer.yahoo.com/yui/reset

-----

1 point by shader 5050 days ago | link

I don't know that it does, but it's probably better supported by older browsers.

-----

2 points by shader 5050 days ago | link

The people who recommend against tables for layout using separation of content and style as justification are obviously mistaking html for content.

In my opinion, if you can generate the html programmatically, then it is no longer content but rather a result of whatever presentation tools you are using. I understand that tables could result in poor rendering by certain browsers, and possibly confuse accessibility functions for people who can't read, etc. but those should really be alternate concerns. If you're truly worried about code reuse and cluttering your webpage with style embedded in the html "content", use a templating system!

Formatting with tables also has the advantage of displaying properly in older browsers, and achieving things that are extremely difficult to do with the current css model.

-----

1 point by evanrmurphy 5050 days ago | link

If you're curious, here's another post I'd recommend on the subject: http://iamelgringo.blogspot.com/2009/02/tables-vs-css-css-tr.... Some of the comments there are good, including the counter-arguments.

If you're not curious, well then I'm sorry for posting this on Arc Forum! It really does have very little to do with Arc, but web development topics come up here often enough. And I feel so peculiarly attached to the community here, I think I just wanted to share the realization in case it could help anyone.

Still searching for the best lispy abstraction over html, css and javascript...

-----

1 point by akkartik 5050 days ago | link

Yeah I concluded a while ago that tables have many advantages. They're an easier programming model than the CSS box model. Now I try to minimize the use of margin, padding and float in my CSS.

The major drawback of tables is that they're much more verbose -- a drawback that's mitigated by generating them automatically like in html.arc

-----

1 point by evanrmurphy 5050 days ago | link

> Now I try to minimize the use of margin, padding and float in my CSS.

Ah, could you elaborate on your technique? I may be missing out on some handy table attributes that you know. The main one I use is colspan - still use CSS padding to adjust most my spacing.

-----

1 point by akkartik 5050 days ago | link

Not at all. I meant that if I find myself using more than the absolute simplest combinations of margin/padding/float, I consider using a table instead.

Readwarp may help triangulate on what I mean. The layout right now is simple enough that I just went with CSS. But if you inspect the logo with firebug, I didn't bother making things perfect with CSS. I just used tables.

-----