-4

So I'm trying to create a simple header/content layout where the content part extends to the bottom of the window. Doing it with CSS looks impossible, at without introducing too much complexity considering how simple is this layout.

Please tell me a SINGLE reason why I shouldn't do this

body, html { height: 100%; padding: 0; margin: 0; }
#h{ height: 150px; }
#tbl { height: 100%; }

<table id="tbl" cellpadding="0" cellspacing="0">
  <tr>
    <td id="h">header</td>
  </tr>
  <tr>
    <td>content</td>
  </tr>
</table>

And don't tell me about semantics and how tables weren't made for layout. It seems most web designers today are masochists who spend hours everyday trying to build simple layouts in very complex ways because they like to torture themselves with things that don't matter. I can hear you already saying "But... but... john using divs instead of tables is the latest hip thing to do, you don't want us to be mocked by the other web designers do you?"

John
  • 898
  • 2
  • 9
  • 25
  • Sooo.. table layouts... Yeah... don't do it. (Yes I read the question, it just had to be said.) – Ruddy Feb 05 '14 at 12:54
  • "latest hip thing to do". :) Wait, is it 2003? This is a goofy trolling post. If you want to use tables, knock yourself out. – Will Feb 05 '14 at 12:56
  • Ruddy How about tables for the stuff CSS can't do or needs ridiculously stupid tricks to do? – John Feb 05 '14 at 12:56
  • Will yeah hipsters back then tried to differentiate themselves that way so they can feel different and better than others and it still goes on to today. I have even seen people go as far as using JS to fix things instead of just using a simple table. That's stupidity right there. – John Feb 05 '14 at 12:57
  • 1
    check this question out. This will clear your doubts. http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html/ –  Feb 05 '14 at 12:59
  • @John Tables are good for displaying information. That's about it, for a layout you could use `divs` that act like a table using `display: table;` Its just better, your not limited to what tables can do. – Ruddy Feb 05 '14 at 12:59
  • beside the fact table layouts are "stupid" because they lack of semantic (if the data is not tabular) you can do what you want, width this: `

    Header

    Content

    `     – Nico O Feb 05 '14 at 13:00
  • If table layouts are stupid then go ahead, provide me a solution where the content is actually below the header and not hiding behind it because of position: absolute trickery and the content extends to the bottom. – John Feb 05 '14 at 13:01
  • c'mon you could have had this implemented in css with a google search in less time than it took to write this 'question'. – Will Feb 05 '14 at 13:02
  • @John [DEMO](http://jsfiddle.net/Ruddy/Uak7A/) - Theres the `display: table` I was talking about. – Ruddy Feb 05 '14 at 13:02
  • Ruddy: Yes it is a very good idea to use something that IE7 doesn't support. Go ahead and explain to the customer why his site doesn't work on his old windows xp machines with IE7. – John Feb 05 '14 at 13:04
  • 1
    Far too complicated... http://jsfiddle.net/NicoO/Uak7A/1/ – Nico O Feb 05 '14 at 13:05
  • Ahahahaha @NicoO I did over think that a little didn't I. Goob job. – Ruddy Feb 05 '14 at 13:06
  • 1
    I know your pain @Ruddy we are all in shock because of the current time travel ;D – Nico O Feb 05 '14 at 13:07
  • @John Also I did say that was one way of doing it. There are so many others. e.g what Nico O just made. That's super simple, so stop your crying and stop trying to use tables for a layout. – Ruddy Feb 05 '14 at 13:08
  • @NicoO yes that was very smart, except it doesn't work. http://jsfiddle.net/rC66e/1/ Good job proving my point. – John Feb 05 '14 at 13:10
  • 1
    @John i really hope you are a Troll ;) You could keep posting like that and at the end i've done all the work you should be doing for your "customer". – Nico O Feb 05 '14 at 13:12
  • @NicoO you keep avoiding my question and I'm the troll? You just posted a few lines of code that don't have anything to do with the question and I'm the troll? – John Feb 05 '14 at 13:14
  • I cannot belive i answer this... Maybe like this? http://jsfiddle.net/NicoO/rC66e/2/ learn to swim before you jump in the ocean.... – Nico O Feb 05 '14 at 13:18
  • 4 negative votes and no answer so far, just proves how right I am. @NicoO It seems that you can't read. I don't see the content extending to the bottom of the page. I'm not a troll, nor a novice, this is a genuine question and I've been doing web design professionally for 12 years. – John Feb 05 '14 at 13:21
  • 1
    @John Yup, you know more then **EVERYONE** on SO. So go do your table layout and enjoy. Close this question as it cannot be answered due to tables being the best for layouts. – Ruddy Feb 05 '14 at 13:23
  • 1
    allow me to call you the holyness of webdesign mastery then *stepps back* you have found a secret, that all this fancy css stuff is secetly just a joke to make you angry (sorry for that)... But just btw. Did you ever think about, that the body is your infinit expandig canvas? – Nico O Feb 05 '14 at 13:23
  • @Ruddy You keep mocking me but I don't see an answer from you. Same goes for you Nico. – John Feb 05 '14 at 13:24
  • 1
    @John I gave you one possible answer. You didn't like it because IE 7 cannot use it. So that's fair, I changed my vote to use a table, because I'm sure its going to be amazing. :D Also tell me how it goes when your client that knows very little about web design and notices... Why is there a table for the layout.. leading them to think you have very little clue about what you are doing (they would be correct). – Ruddy Feb 05 '14 at 13:27
  • @Ruddy I am already aware of the display: table property however I don't consider a method that's not going to work on loads of browsers a solution. Still, the question is why wouldn't I use a simple table with 2 rows instead of a handfull of css tricks to make it work? – John Feb 05 '14 at 13:30
  • @John Once again - http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html/ – Ruddy Feb 05 '14 at 13:32
  • @Ruddy See you keep that holier-than-thou attitude yet you pretend that I'm the smartass here. I posted a genuine question that noone can answer so far and all I receive is mockery. Good job there proving my point. – John Feb 05 '14 at 13:32
  • @Ruddy Once again - empty words, no solution. – John Feb 05 '14 at 13:33
  • @John ohhh ohh ohh big fat discussion here, read my short answer [here](http://stackoverflow.com/questions/17503456/is-it-good-to-use-tables-in-html-5/17503474#17503474) if you are not willing to read the big answers, also read what the spec says – Mr. Alien Feb 05 '14 at 13:38
  • @Mr.Alien I know what the spec says and what are tables intended for, however my question is not that. This problem can't be solved with CSS (or the solution doesn't give the same exactly result) why shouldn't I use just a simple 2 row table? – John Feb 05 '14 at 13:41

2 Answers2

2

We do not use table layout anymore because they are not semantic. Bots and screenreaders can not identify what the content is good for. Secondly you will want to separate your content from code for layout (distribution of duties).

Having an external CSS file will make your page much more easy to maintain. If you have 20+ pages which all have a table to keep content in, you will pretty likly have to edit all this documents for a redesign. If you use CSS and have a good document layout width identifiers you will only have to change one .css file to alter all your layout for good.

You have a question. You want to have a content area under your header item. That ok and indeed can be solved with more complex CSS if you want to, but not have to be.

Firstly you will begin width your header. You can use <div> for that or use the headings (h1-h6) items. Like that every bot will know > "Oh! a headline. Thats important!"

Lets structure your document:

<body>
<h1>Header</h1>
<div class="static-content">
    <p>Content</p>
</div>
</body>

We have a headline and a div width the classname "static-content" for layout reasons. You can change this name to what ever you want (no whitespace and start width a alphabetic char) you can also add multiple classes, separated by white spaces.

here is some CSS

html, body {
    height: 100%;
    margin:0;
    background-color: gray;
    padding: 0;
}

h1
{
    display: block;
    padding: 20px 10px;
    background-color: blue;
    margin: 0px 0px 0px 0px;
}

.static-content
{
    background-color: red;
    padding: 10px;
    margin: 0;
}

So. Like you can see in the fiddle here: http://jsfiddle.net/NicoO/rC66e/2/ Your content area can be red (like it is). But you also see the gray background. The element in the background is the body you can work with the body like nearly any div.

So you see, you already have stretched your content area to the bottom of the browser. If you want the red area to be on the bottom also, you have multiple options to realsise that.

See the fiddle here: http://jsfiddle.net/NicoO/rC66e/3/ There are also other ways to realise that.

Update. If you really want that red area to be big, you could try something like this: http://jsfiddle.net/NicoO/rC66e/5/

This is not a really good solution because I don't know what you want to use it for. You just could style the body element and you are good to go. If you want more complex layout, you will have to addapt your CSS. The soltion in this fiddle is not generic as it should be. But it shows, that you can do a lot of things width CSS. Even if you don't really showed us your use case.

Edit: You keep saying "why don't i just juse a two row table?". But on the other hand you try to alter this rule for the answer here. Why don't you just a heading and a paragraph? like <h1>Title</h1><p>content</p> You can add a background-color to the body element and be done. There is no reason to do anything else here.

Final Edit: You have a valid point @John. sometimes CSS can be a pain. But it is far superior to table layout. For most common problems there are Tools like grown grid systems, that get the most of the problems out of the way. W3C is working on making CSS more powerfull and easy to use. For example with thew new display:grid; property. If you really give css a chance and try to addapt a new pattern of thinking about the box model, it will help you a lot. With HTML and CSS you can just write what you reall need without having to have a clumsy table all the time. I'am sorry if I offended you. But i'd recommend you to weight the pros and cons of table vs css layout. There is pretty nice stuff around like responsive layouts, that you will not be able to fully use width these old techniques

Nico O
  • 13,762
  • 9
  • 54
  • 69
  • Bottom counts from the bottom of the window instead. There you go: http://jsfiddle.net/rC66e/4/ Doesn't work, add more trickery. – John Feb 05 '14 at 13:48
  • You down voted my anweser? I will quit answering you now. See the last edit. May the powers of IE6 be ever in your favour – Nico O Feb 05 '14 at 14:03
  • @NicoO Don't get upset just cuz you got one down vote :) I will upvote yours for your efforts, but haters will hate, so you don't have to quit answering... – Mr. Alien Feb 05 '14 at 14:07
  • @NicoO Downvote means it doesn't work, and it doesn't. Still not an answer to the question, you kept making fun of me and came up with another irrelevant example. "You can change this name to what ever you want (no whitespace and start width a alphabetic char) you can also add multiple classes, separated by white spaces." And what is this? A CSS quick start lesson? Thank you Mr. obvious. The overall conclusion is that there is no solution with CSS, hipster webdesigners lose once again. Thanks to everyone who contributed genuine answers instead of mocking. – John Feb 05 '14 at 15:12
  • I did not mean to offed you. You're question style is just pretty aggressive. We don't need to provide answers. I think i answered your question in all possible ways. The last fiddle (http://jsfiddle.net/NicoO/rC66e/5/) to what you asked for. But still i think you have a wrong image of the box model in your head. It is not necessary to stretch something for the result you wan't to reach. You are right, that you can easily do that with a table. And i'am not telling you not to do so. But I would not do it. Please tell me how my last fiddle is not solving your problem. – Nico O Feb 05 '14 at 15:17
  • @NicoO Well I didn't mean to offend either, my original post is in a sarcastic tone although I wasn't mocking anyone personally and I said many times that my question is genuine, I'm not here to make fun of someone. Anyway, the last jsfiddle you gave is using calc() which is not supported by up to IE8 and even IE9 has problems with it. This makes it not work for a good percentage of the overall users, thus it is not a solution, even using JS is a better idea than using calc. I have a pretty good idea of the box model that's why I'm saying there is no sensible way to do this without tables. – John Feb 05 '14 at 15:36
  • So you want to proof that table layout can do things you can not to with CSS in every brower? That may be true. But there are always workarounds depending on the usecase. Nobody is saying CSS is perfect or that you have to use it. But using css sure has more advantages then disadvantages. Use what ever you like to. – Nico O Feb 05 '14 at 15:45
  • It is not about CSS, the problem here is tables VS anything else for a very simple layout. Anyway. – John Feb 05 '14 at 15:58
1

My personal view:

Using tables for layout is like using coffee to stay awake. Don't do it too often. Maybe once in a while.

And certainly we shouldn't hassle people who use table-based layouts, especially when there's no sound, cross-browser way to do a particular layout in CSS.

That said...

1. Tables make it harder to design for multiple screen sizes at once

Responsive layout is important these days. Having different CSS rules for different viewport sizes, applied to the same HTML code, is a good way to adapt a site to all screens.

For very simple designs, though, a table-based layout may work at any screen size.

2. Tables can interfere with search engine indexes, screen readers, and other automatic web page parsing

In other words, not so good for SEO and accessibility.

However, it's worth pointing out that Google has recently been optimizing its search algorithm to distinguish between layout tables and data tables.

And there are some techniques like <table role="presentation"> to help screen readers handle tables, although those hacks can get complicated.

3. Table-based layouts require changing the HTML markup when you want to change the layout

Again, it's nicer and more conceptually pure -- and often more maintainable -- to use HTML for content/semantics only, so you can leave the markup alone when you make design changes. But practically speaking, in a substantial redesign you'd often need to make changes to the HTML anyway.

In sum, I believe that guidelines and best practices are more useful than hard-and-fast rules regarding tables for layout. It's a balancing act, and there are situations where tables can be, overall, a better choice.

Community
  • 1
  • 1
jkdev
  • 11,360
  • 15
  • 54
  • 77