Arc Forumnew | comments | leaders | submitlogin
2 points by thaddeus 2514 days ago | link | parent

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 2514 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 2514 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 2514 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 2514 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 2514 days ago | link

thanks for clarifying

-----

2 points by akkartik 2514 days ago | link

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

-----

1 point by evanrmurphy 2514 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.

-----

1 point by shader 2514 days ago | link

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

-----