Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

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?

share|improve this question
    
giveupandusetables.com –  MSalters Sep 16 '11 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 '13 at 7:11
add comment

4 Answers

up vote 16 down vote accepted

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

share|improve this answer
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 '11 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 '11 at 3:48
add comment

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.

share|improve this answer
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 '11 at 13:05
add comment

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.

share|improve this answer
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 '11 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 '11 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 '11 at 14:48
add comment

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.

share|improve this answer
    
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 '11 at 1:45
    
Unfortunately in the corporate and health care worlds there are surprisingly large number of people still using IE6 –  CdMnky Sep 16 '11 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. –  Graham Nov 20 '12 at 17:49
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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