8

I'm trying to get into web development, so I started learning HTML, CSS, and javascript. I've been coming along really well with javascript, but I still can't make anything with HTML and CSS to save my life. I was going to ask for some places or tips to improve, but I know the question has been asked countless times and would just get deleted, so I figured I would just view the source of some other people's websites.

What I keep seeing is tables left and right. Is there a valid reason to use tables?

Improve this question
2
  • giveupandusetables.com
    – MSalters
    Sep 16, 2011 at 11:56
  • One good reason might be that you're on a team that really sucks but everybody has more political power than you and they're all really paranoid of new ideas which would explain why they favor 1998's favored layout scheme.
    – Erik Reppen
    Oct 17, 2013 at 7:11

4 Answers 4

Reset to default
15

To lay out tabular data.

Here are a few questions to ask yourself when choosing between tables and css containers.

Tables are for Tabular Data. Period.

The <table> tag is not evil. Despite what some people think and say, the point of CSS is not to never use it. However, a corollary to the principle of Semantic HTML is that you should never use tables for layout. Let me say that again, as its own paragraph, for emphasis:

Never use tables for layout. Ever.

If you can't decide whether or not a table is the right choice, ask yourself these questions:

  • “Do the rows or columns of information share a common attribute?”
  • “If I changed the order of the rows or columns, would it still make sense?”
  • “If I transposed the axes of the table (made rows into columns and vice-versa) would it still make sense?”

If the answer to the above is generally “Hrm...I guess not,” then you shouldn't be using a table.

If you need more convincing, see "Why Tables Are Bad (For Layout) Compared to Semantic HTML + CSS".

Improve this answer
3
  • 2
    @WeekendWarrior: Not sure I agree. Why on earth would I want to hack a CSS solution in to display a tabular n column by n row grid, such as, say, statistics in an NFL game? That's exactly where tables should be used. Perhaps CSS grid layout will replace it at some point (once it's cross browser supported, at least for a few releases of each), but it's not there yet.
    – Demian Brecht
    Sep 15, 2011 at 18:21
  • @Demian He said "tables for layout". I'm pretty sure he didn't mean to include tabular data.
    – Rein Henrichs
    Sep 16, 2011 at 3:48
  • Would a table be appropriate for e.g. a side-by-side translation opera libretto [using one table row per line]? Such a thing wouldn't exactly be "tabular data", but using a table would maintain the association between lines in the original language and translation even if text was enlarged enough to cause some lines to wrap.
    – supercat
    Sep 2, 2014 at 16:15
9

Assuming you mean tables used as page layout rather than just for tabular data...

You're seeing tables because CSS is frustrating to use (admittedly less now than a few years ago). At some point one has to get work done. To do it "right" using CSS requires endless fussing and experimentation. Tables, on the other hand, can be grasped intuitively.

If you want to do it right (by using CSS) and you don't want to waste your life on CSS, the best compromise is to settle on a few different layouts and crib some CSS off of template websites. Use the templates as a starting point. Starting from scratch with CSS is a recipe for frustration.

Improve this answer
4
  • 4
    +1 for "get work done". I am a developer, not a ui designer. I can certaintly design a functional, somewhat attractive ui, but it will take me MUCH longer than it would a UI designer. What would I give for a guy on my team who just designed the templates and styles so I wouldnt have to worry about that.
    – AJC
    Sep 15, 2011 at 14:04
  • 1
    I can't help but think that CSS could have been so much simpler. IMHO this unnecessary complexity and the lack of a "pixel perfect" reference implementation has lead to poor/inconsistent implementations by browser vendors, leading to a whole generation of web-developers "not getting it".
    – Angelo
    Sep 15, 2011 at 14:27
  • 1
    There used to be "interpretations" of the box model where the tables were the only way. E.g. the FORM element could not be styled but still generated a box (with default margin/padding) in IE. The only way to get rid of the extra space was to squeeze FORM between TABLE and TR. Totally against the standard, but the only way that worked.
    – SF.
    Sep 15, 2011 at 14:48
  • @Angelo: The issue wasn't just that CSS was "frustrating"; it has historically been incapable of doing many things which were pretty easy with tables. Something simple like a main-text-plus-sidebar layout, where the sidebar would be 10% of the available width, but at least 140px wide (the width of a particular logo graphic), would be easy with a table [IIRC, set the table width to 100%, leave the main-column width unspecified and set the width of the sidebar column to 10%; the column width would go above 10% if needed to accommodate a 140px graphic]). When could CSS first do that?
    – supercat
    Sep 8, 2014 at 16:30
8

Table based layouts are in some ways, easier to learn than pure CSS layouts for people just beginning to learn HTML. Also, back in the day, you couldn't reliably use CSS and have it work on all browsers. So virtually all of the HTML tutorials up through the 2000 or so used tables exclusively for layouts. A lot of that HTML code was passed over to other sites (via View Source) and a lot of people learned from those tutorials and didn't bother learning CSS layouts.

I'll offer myself up to be flamed here and say that you'll be fine if you start doing your layouts in tables before learning CSS. The differences at the beginner level are minor at best. You won't be able to make really intricate layouts in EITHER until you've had a year or two of experience, so there's really not much difference. Start with the tables in order to get some stuff on the screen and to keep yoru interest, and slowly keep reading up on CSS (which is clearly superior in the long run). I used to be a CSS-Zealot back in the day of "Designing with Web Standards" but that was just because it was fun being self-rituous and superior.

Improve this answer
1
  • 6
    I disagree, although I won't flame you. Learning to layout with tables is not necessarily easier (it wasn't for me). More importantly, transitioning from the "tables way" to the CSS way is more difficult than just learning it right the first time.
    – MattBelanger
    Sep 15, 2011 at 13:05
1

Browsers are the problem. Despite what was best practice and what everyone agreed to, it was just too hard to make websites look consistently good in browsers without tables, even though it was coded wrong. It has to do with semantics. That's the most important thing to learn with HTML, is the semantic meanings of tags. The best place to learn that is in the first five or so videos that Educator.com has on it's HTML videos, they're all done with HTML5 in mind and explaining what semantics is and why it's important.

Improve this answer
3
  • I forgot to mention, browsers have caught up. Nobody uses IE6 anymore, so now tables are more of a hassle than their worth, it's actually easier to do things the right way now. So forget tables unless you're working with "tabular data." See the video I mentioned if you don't understand what I mean by "tabular data."
    – Phillip James
    Sep 16, 2011 at 1:45
  • Unfortunately in the corporate and health care worlds there are surprisingly large number of people still using IE6
    – CdMnky
    Sep 16, 2011 at 16:08
  • The "most important thing to learn with HTML" is kinda subjective. I'm in the webapp development world, so HTML semantics are actually quite meaningless for me for the most part. Not so if I was building sites that needed SEO features.
    – GHP
    Nov 20, 2012 at 17:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.