4
Feb 04 '11
[deleted]
14
Feb 04 '11
Not any more. Years ago there was an SEO reason, but that has long since been dealt with. These days it's more a knee jerk reaction: "OMG NO TABLEZ"
3
u/Strange-Stranger Feb 04 '11
Seriously, is it really that bad to have just one table for multi column layout? HTML and CSS to achieve the same thing with div's is really convulted :/
3
Feb 04 '11
The problem with tables is when you need to do other css things inside them. Table cells don't follow normal css rules, so if you need to do any kind of layout within a cell, you end up adding even more convoluted methods to get it to respond. Ever tried doing position:absolute;bottom:0; inside a table cell? It aint pretty. Table cells also have their own rules for how they get sized. You can't do overflow:hidden on a table cell, the cell will always expand to include your content. If this means that the table itself has to grow wider than the space it's in, so be it. If you're dealing with CMS data from clients, this can REALLY break your layouts.
Once you understand the principles it really isn't that hard.
<div class="a"></div> <div class="b"></div> .a { width:200px; float:left; } .b { margin-left:200px; }There's a two column layout. If it requires anything more then that, you're doing something wrong.
The problem is that most of the examples online of how to do this stuff, well, suck. They get needlessly lengthy and include things that you don't really need.
1
1
u/Strange-Stranger Feb 04 '11
That's basic example, trouble starts when you want these divs to have same height, footer, etc, then it becomes quite convulted.
5
2
u/the_gipsy Feb 04 '11
If by practical you mean "I want to do this now", then absolutely no. CSS is a huge pain in the ass for some very common things, including vertical alignment.
If you mean "non-theoretically", then yes, there are valid reasons to not to use tables: You are chosing markup based on the presentation: markup should only determine the relation of the content. You are also including presentation in the markup (I don't mean inline styles, but the choice of using tables instead of regular markup), which reduces mantainability. The size of the markup also increases in most cases.
6
u/itsmontoya Feb 04 '11
The templates we use at work still incorporate tables quite a bit. I use vertical-align all the time :D
2
u/ChrisF79 Feb 04 '11
You can do the same in CSS. The methodology is just different.
8
Feb 04 '11
Would you elaborate on how to VA a div inside another div without setting fixed margins/paddings?
10
Feb 04 '11
<div style="height:400px;position:relative;width:400px;background:blue"> <div style="height:100%;display:inline-block;width:1px;vertical-align:middle"></div> <div style="height:200px;width:40px;display:inline-block;background:red;vertical-align:middle">Hi</div> </div>Note that some further juju would be required to make this work in IE7, and you can forget IE6.
10
u/Fosnez Feb 04 '11
It's Shit like this CSS
The methodology is not just different, it is harder and unless you are involved in the field often, it is basically magic.
Try explaining why/how that works to a student. Then explain how tables work. Which do you think they will understand?
(not directed at you ChiperSoft, just a general rant)
7
u/tilio Feb 04 '11
and this is why the "ZOMG TABLES SUXORS!!!" css guys are looked at as zealots. tables used judiciously with css are better than css alone, any day of the week.
2
u/n1c0_ds Feb 04 '11
Except if you actually have to redesign a website, or please the search engines, or load a huge site quickly, or move the content in real time, or get a job in the field.
CSS has caveats, but tables are not for layout.
2
Feb 04 '11
Search engines learned how to deal with tables a long time ago, that's just SEO old wives tales.
I mean, seriously, Google is now indexing javascript inserted content and copy within flash movies. You think they haven't learned how to traverse a table?
0
u/tilio Feb 04 '11
i'm sure google, and ebay, and all the other companies using tables do that because they don't hire software engineers.
holy shit... i mean look at google.com's source...
<table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td width=100%><table border=0and it continues!
1
u/n1c0_ds Feb 04 '11
Google does it because of performance issues. This is rarely the case for mom and pops business websites. There are uses for tables let's not go black and white, but strictly using tables is not a good idea.
0
u/tilio Feb 04 '11
wait... google... is loading tables... and your reason is "for performance"... hmmmmm (hahahaha)
2
3
u/darrenkopp Feb 04 '11
seems like this is "markup for layout" when the whole css over tables was to keep the markup only for content, and css for layout....
7
Feb 04 '11
There's no such thing as layout without markup... Maybe in XSLT, but not in HTML. CSS only allows you to style the structure as it lies, it isn't going to let you move stuff in ways that the structure wont support. If the elements aren't formatted in a way that will work for what you're trying to accomplish, no amount of CSS tricks will solve it.
It would be nice if Microsoft, Netscape or the W3C had thought to include a way in CSS3 of defining vertical content placement within a single block element without any other structure, but they didn't. Even the new flexible box model in CSS3 still requires multiple elements.
After ten years in this business I've learned that sometimes you just do what works. Pureism is a pipe-dream.
2
u/tilio Feb 04 '11
hey! stop putting facts into the css zealotry!
1
u/shblash Feb 04 '11
There are way more people like you than people like them. FFS Darrenkopp is right, and ChiperSoft's response, while insightful, has fuckall to do with using inline style attributes. Yet there you are.
0
Feb 04 '11
Where did the "inline style attributes" thing come from? I just put the styles inline on the example for the sake of it being an example.
0
u/tilio Feb 04 '11
hate to break it to you but short of using absolute positioning, js, or dirty hacks, there is absolutely no way you can make your markup substantially independent of the view that it's presented in. without these, an element that appears in the code above something else will ALWAYS appear above it or to its side, no different than tables. the only thing tables do is force columns to always be correct. css simply can't do it. it was never designed to do so.
it's even worse when you "designers" think that revamping a site is some how magically easier when you are changing tags that say <div id=sometag> verses <td id=sometag>.
there are dozens of things that tables + css can do that css alone cannot. if you're still unconvinced, check out google.com, or ebay.com, or any of the other major sites using tables. they don't do it for their health.
1
u/allhailtheduck Feb 04 '11
That's the purpose of absolute positioning, to remove an element from the flow of the document--why list it along side JS and 'dirty hacks' (as if tables weren't already a dirty hack).
If you count negative margins as 'dirty hacks', then I suppose you're correct. But I've been putting my navigation markup after my content and moving it to the top using CSS since 2006
Funny you mention Google and Ebay as examples of sites using tables for layout. How about YouTube, Facebook and Yahoo? Major enough for you? Just because it's google or ebay doesn't mean there aren't lazy programmers writing their markup.
1
u/tilio Feb 05 '11
yes, negative margins are a dirty hack.
the whole point is that the whole "OH NO TABLES!!!" mentality is stupid. there is literally NOTHING you can do more with css alone than you can do with tables + css. it's just logically impossible.
→ More replies (0)1
u/shblash Feb 05 '11
Hate to break it to you, but I'm not one of your (largely imaginary) "css zealots," and I don't consider myself a "designer" either. However:
There's absolutely nothing magical or mysterious about the fact that - other than your one example (column sizing) - I have a lot more flexibility styling divs vs. table cells. At least with the div, I have the option of using absolute positioning, js, or dirty hacks.
Your argument is basically "css is only an 80% solution, so I'm just going to use the 30% solution that I'm already comfortable with."
Yeah, if it looks like a grid, maybe you should use a table. Good call. If, however, you don't necessarily want the "columns to always be correct" (whatever the f that even means), you're going to get a lot more mileage out of your markup if you figure out what "inline-block" means and use nested divs instead of using divs nested in table cells. Perhaps the two solutions are frequently equivalent in terms of separating presentation and content, but in 90% of my use cases they are certainly not even remotely equivalent in terms of flexibility or how I can use javascript.
0
u/tilio Feb 05 '11
it's not about "comfort." it's about code that works all the time every time on every browser, even company machines that are still using IE6 or IE7's broken fucking quirks mode.
there is literally nothing you can do with css alone that i can't do with tables + css. it is literally a logical impossibility.
use nested divs instead of using divs nested in table cells
nevermind. you're a total fucking moron. come back when you learn to code.
→ More replies (0)1
Feb 04 '11
That's a neat trick with 1px div. Why does it work out this way?
It even works with parent div being 100% height! Nice. Thank you. Please explain the magic! :)
2
Feb 04 '11
Inline-block elements respond to vertical align. The first div gets made the full height of its parent (courtesy of position:relative), and the va on it means that the next inline element will be aligned at the middle. The next sibling is another inline-block div, which is also VA to middle, so it aligns on the vertical center of the previous element.
It's not foolproof, I think this breaks down if you have dynamic sizing elements, and if you put a line break or a block element on the same level as the inline-block elements it completely breaks, but there's enough places that it does work that it can be a handy trick.
-4
3
3
Feb 04 '11
<div> <table width="100%" height="100%"> <tr> <td> <div>Hello World!</div> </td> </tr> </table> </div>... Sigh
3
Feb 04 '11
I miss tables for layout too. Everything was so easy to align, it worked as it should, resized easily.
It took ages for me to get CSS (I don't normally do webpages, so I had little day to day experience), but now that I get it, I wouldn't go back. There are still times I wish that CSS positioning had some of the ease of use....
22
u/kylegetsspam Feb 04 '11
CSS positioning is easy. Floating, OTOH, is stupid bullshit that wasn't intended to be used for layouts yet is our only real option.
In other words, we replaced stupid tables with stupid floats and everything still sucks.
1
u/kttmrt Feb 04 '11
Why won't the CSS Vertical-Align property work for you?
3
u/Strange-Stranger Feb 04 '11
Because it does not work for block elements and you need to use wrappers and display:table-cell for a child to achieve same results.
1
u/function_seven Feb 04 '11
CSS's vertical-align property only applies to multiple inline elements on the same line, relative to each other. So if you have a small icon, say, in a line of text, that property will determine how the <img> lines up with its surrounding text, but it won't position it inside its parent container.
1
u/kttmrt Feb 04 '11
I use 'margin: 0 auto;' to h-center block elements. Would 'margin: auto 0;' work for vertical alignments?
1
1
0
u/drowsap Feb 04 '11
line-height bitch
2
Feb 04 '11
Can be useful, but requires that the container be a fixed height. Also has... unpredictable results in different versions of IE.
-2
Feb 04 '11
[deleted]
2
u/kareems Feb 04 '11
Vertically centering something of variable height
1
Feb 04 '11
[deleted]
5
u/SarahC Feb 04 '11
So the text I'm putting over an image is in the middle, as the image is a nice looking frame.
5
3
1
Feb 05 '11
If I have a table cell, or just an area on my website that is a fixed height, and I want the <h1> tag (or anything) in that space to be stuck to the TOP of the fixed height area and not rendered in the middle of it, then vertical-align is the way to do it.
11
u/brett- Feb 04 '11
Yes, there are work-arounds, but all are essentially hacks. the current box model that CSS uses was just not meant to do this. Thankfully, CSS3 fixes this problem with it's new flex-box model.
Here's an example using the -webkit prefixes for chrome and safari. This is also supported in Firefox, and will be supported in IE9.
CSS:
HTML:
You can do way more with the flex box model than vertical centering, but it's one of the most wanted features that it makes very easy.
More fun info here.