8 ms·

Every 4 years: "lets check if latest css can center dynamic sized things without a bunch of #container_of_container cruft". Just stick with: <table height=100%

by cyphunk 11y ago

Every 4 years: "lets check if latest css can center dynamic sized things without a bunch of #container_of_container cruft". Just stick with: <table height=100% width=100%><td valign=center align=center> And what the hell does "margin: auto" mean? I'd like to hear some print designers using that in normal conversation. "oh and also i'd like these margin's auto'ed". At this rate the table tag is going live longer than the copyright on mickey mouse.

psychometry 11y ago
No, use divs and table-cell display values if you want to have non-tabular data displayed like a table.
- cyphunk 11y ago
  Indeed I have non-TABular data and yet I should use TABle-cell? I'll just stick with the actual <table> then. cleaner. But the real problem is "use divs". plural. so already breaking the #container_of_container cruft rule. I'd rather write some javascript with overly nested callbacks and leave the html clean. thanks.
  - davesque 11y ago
    Yeah, it's obnoxious when people get up-in-arms about specifics. But, you have to admit that it's correct. Why use explicit tables when you can use style overrides to get the look you want and your HTML markup is more meaningful to robots?
    - TeMPOraL 11y ago
      But then just admit it, you broke the web separation of concerns rule ("HTML is for content, CSS is for layout"). Which is load of nonsense, if you ask me, but people seem to treat it as a kind of religious dogma.
      - davesque 11y ago
        Do you mean the requirement for a container `div`? If so, IMHO, that is the most routinely broken "rule" in web page design that I can think of. It should be obvious that the technologies involved in web pages are not perfect. I'm not claiming otherwise. It's a question of trade-offs. You're going to break the HTML is content convention whether you use a `table` element or a `div` element with "display: table". So why not just go with the one that's more correct? It's up to you either way I guess.
  - RubyPinch 11y ago
    <table> is content, table-cell: is presentation. Semantic tag use matters because some people are blind and their screen reader will start randomly start talking about some structure that makes zero sense in context
    - baddox 11y ago
      I understand and agree with the general argument, but is it actually true that screen readers for the web are that naive? I would expect them to render a page (like with WebKit) and try to figure out the layout of the page, which things are actually visible, etc., or at least use heuristics to figure out what is and isn't content (in the same way that Readability-esque algorithms presumably do).
      - Figs 11y ago
        > Readability-esque algorithms presumably do They look for the div with the most text/paragraphs in it and assume that's the article. At least, that's what the open source ones I looked at a while back do -- the proprietary ones that force you to go through their own server could use other tricks.
      - extra88 11y ago
        The browser, not the screenreader, does the rendering, figuring out what's visible, etc. The results, an "accessibility tree" which is sort of a subset of the DOM, are then presented through an accessibility API to screenreader software. Screenreader software is pretty naive, there might be some that initially assume a table is being used for presentation, not data, if it lacks good semantic structure (e.g. no <th> header elements). Case by case, it's hard to tell in which way the author is bad at their job, using a table for presentation or poorly marking up a table for data. The stakes are much lower for Readability-esque algorithms, when they fuck up the user can just go back to the site's native presentation; screenreader users don't have that choice.
  - rtpg 11y ago
    Just a practical consideration, but the HTML table tag is actually a lot more restrictive (<table> can only contain <thead> <tbody> or <tr>, so no wrapping span to regroup some table rows) than using <div>s. Can be important depending on third party libs.
    - robin_reala 11y ago
      (…and <tfoot>, <colgroup>, <caption>)
  - madeofpalk 11y ago
    `display: table` and `display: table-cell` are just layout algos, commonly used for creating a table-like layout.
  - psychometry 11y ago
    You'd rather write unncessary Javascript and/or three nested HTML elements (table > tr > td) instead of two divs and some simple CSS? Man, I'd hate to be one of your clients since you don't really understand front-end development.
supercoder 11y ago
I also find it crazy how there was a huge campaign to remove use of the table tag for layout. 'It's non semantic! You're mixing layout and content!' people would cry over and over. .. But then we've ended up with bootstrap and it's grid layout, where we're doing exactly that, and for some reason it's perfectly fine.
- cyphunk 11y ago
  and I wonder how the <ul><li> somehow survived unscathed and free from the semantic witch hunt of yore. shouldn't we replace them with: <div style="display:list-type; type-of-list:unordered"> <div style="display:list-item;"> ?
  - lucideer 11y ago
    This comment doesn't make any sense. A list is a thing, just as a table is... What are you trying to say?
    - tjic 11y ago
      Down vote for "doesn't make sense". It made perfect sense to me. The phrase you were looking for is " I don't understand what you're saying."
      - wtallis 11y ago
        Then perhaps you would like to explain it? The most meaningful interpretation I can see is that the commenter completely misunderstood the nature of the "semantic witch hunt" to which he referred. It seems charitable to assume that something was lost in translation and to ask for clarification rather than to assume that the commenter was just saying something stupid.
        exodust 11y ago
        Very true, and such charity doesn't help the discussion. Insisting on the polite path, "I don't understand" instead of "your comment makes no sense" wrongly assumes that all comments written on forums are carefully considered and fact-checked before posting. It's taking the long way to resolution of that point, and you might never get resolution if bogged down in overly-polite discourse for fear of being "negative".
nness 11y ago
Comparisons to print designers misses the biggest point about web design, that is that we have no way to guarantee a width, a position or even choice of font. Print designers know an A4 page is always 210x297mm, web designers have no idea what to expect.
zaidf 11y ago
But if you are still using the table tag for anything but tabular data, you're living in the 1900s and arent cut out as a modern day web designer /snark
ommunist 11y ago
Yes, you are right. As long as people are using HTML mail, tables for layout are the only way to go.
- kagamine 11y ago
  I have a gift for you! : /s
- dredmorbius 11y ago
  You just made the best case for Markdown email that I've seen. Author email in straight text? Markdown is what you're writing already. Author it in WYSYWIG/GUI clients? You only care about presentation.
rimantas 11y ago
Ok, now make it repsonsive, e.g. one column should be below the other on the narrow screen.
RobertKerans 11y ago
By the same dint, web designers don't talk about paper weights and finishes. It's crackers, almost as if the two sets of designers are using different technologies.
hobarrera 11y ago
> And what the hell does "margin: auto" mean? It means "calculate the margins automatically according to available space". Nothing complicated about that. Print is quite different from web. The most noticeable difference is that paper cannot be resized, nor does it adapt it's content when you rotate it.
protonfish 11y ago
Your example does not align vertically, so I am not sure what you are trying to prove. This CSS will put something in the center of your screen quite easily position: absolute; top: 50%; left: 50%; Is that so hard? Having poor CSS skills is not the same as CSS being broken.
- cyphax 11y ago
  Unfortunately, that's telling your div to start halfway. Following your suggestion leaves me with an element with its top left corner in the exact center of the containing div. I'm not a fan of CSS due to issues like this. It falls in the same line as issues where, for example, paddings and margins (and borders) are added to the size of your div rather than subtracted. There's a solution for that that makes sense nowadays but by the time that came about, I'd already stopped liking CSS.

by cyphunk 11y ago

psychometry 11y ago

No, use divs and table-cell display values if you want to have non-tabular data displayed like a table.

cyphunk 11y ago
Indeed I have non-TABular data and yet I should use TABle-cell? I'll just stick with the actual <table> then. cleaner. But the real problem is "use divs". plural. so already breaking the #container_of_container cruft rule. I'd rather write some javascript with overly nested callbacks and leave the html clean. thanks.
- davesque 11y ago
  Yeah, it's obnoxious when people get up-in-arms about specifics. But, you have to admit that it's correct. Why use explicit tables when you can use style overrides to get the look you want and your HTML markup is more meaningful to robots?
  - TeMPOraL 11y ago
    But then just admit it, you broke the web separation of concerns rule ("HTML is for content, CSS is for layout"). Which is load of nonsense, if you ask me, but people seem to treat it as a kind of religious dogma.
    - davesque 11y ago
      Do you mean the requirement for a container `div`? If so, IMHO, that is the most routinely broken "rule" in web page design that I can think of. It should be obvious that the technologies involved in web pages are not perfect. I'm not claiming otherwise. It's a question of trade-offs. You're going to break the HTML is content convention whether you use a `table` element or a `div` element with "display: table". So why not just go with the one that's more correct? It's up to you either way I guess.
- RubyPinch 11y ago
  <table> is content, table-cell: is presentation. Semantic tag use matters because some people are blind and their screen reader will start randomly start talking about some structure that makes zero sense in context
  - baddox 11y ago
    I understand and agree with the general argument, but is it actually true that screen readers for the web are that naive? I would expect them to render a page (like with WebKit) and try to figure out the layout of the page, which things are actually visible, etc., or at least use heuristics to figure out what is and isn't content (in the same way that Readability-esque algorithms presumably do).
    - Figs 11y ago
      > Readability-esque algorithms presumably do They look for the div with the most text/paragraphs in it and assume that's the article. At least, that's what the open source ones I looked at a while back do -- the proprietary ones that force you to go through their own server could use other tricks.
    - extra88 11y ago
      The browser, not the screenreader, does the rendering, figuring out what's visible, etc. The results, an "accessibility tree" which is sort of a subset of the DOM, are then presented through an accessibility API to screenreader software. Screenreader software is pretty naive, there might be some that initially assume a table is being used for presentation, not data, if it lacks good semantic structure (e.g. no <th> header elements). Case by case, it's hard to tell in which way the author is bad at their job, using a table for presentation or poorly marking up a table for data. The stakes are much lower for Readability-esque algorithms, when they fuck up the user can just go back to the site's native presentation; screenreader users don't have that choice.
- rtpg 11y ago
  Just a practical consideration, but the HTML table tag is actually a lot more restrictive (<table> can only contain <thead> <tbody> or <tr>, so no wrapping span to regroup some table rows) than using <div>s. Can be important depending on third party libs.
  - robin_reala 11y ago
    (…and <tfoot>, <colgroup>, <caption>)
- madeofpalk 11y ago
  `display: table` and `display: table-cell` are just layout algos, commonly used for creating a table-like layout.
- psychometry 11y ago
  You'd rather write unncessary Javascript and/or three nested HTML elements (table > tr > td) instead of two divs and some simple CSS? Man, I'd hate to be one of your clients since you don't really understand front-end development.

supercoder 11y ago

I also find it crazy how there was a huge campaign to remove use of the table tag for layout. 'It's non semantic! You're mixing layout and content!' people would cry over and over. .. But then we've ended up with bootstrap and it's grid layout, where we're doing exactly that, and for some reason it's perfectly fine.

cyphunk 11y ago
and I wonder how the <ul><li> somehow survived unscathed and free from the semantic witch hunt of yore. shouldn't we replace them with: <div style="display:list-type; type-of-list:unordered"> <div style="display:list-item;"> ?
- lucideer 11y ago
  This comment doesn't make any sense. A list is a thing, just as a table is... What are you trying to say?
  - tjic 11y ago
    Down vote for "doesn't make sense". It made perfect sense to me. The phrase you were looking for is " I don't understand what you're saying."
    - wtallis 11y ago
      Then perhaps you would like to explain it? The most meaningful interpretation I can see is that the commenter completely misunderstood the nature of the "semantic witch hunt" to which he referred. It seems charitable to assume that something was lost in translation and to ask for clarification rather than to assume that the commenter was just saying something stupid.
      - exodust 11y ago
        Very true, and such charity doesn't help the discussion. Insisting on the polite path, "I don't understand" instead of "your comment makes no sense" wrongly assumes that all comments written on forums are carefully considered and fact-checked before posting. It's taking the long way to resolution of that point, and you might never get resolution if bogged down in overly-polite discourse for fear of being "negative".

nness 11y ago

Comparisons to print designers misses the biggest point about web design, that is that we have no way to guarantee a width, a position or even choice of font. Print designers know an A4 page is always 210x297mm, web designers have no idea what to expect.

zaidf 11y ago

But if you are still using the table tag for anything but tabular data, you're living in the 1900s and arent cut out as a modern day web designer /snark

ommunist 11y ago

Yes, you are right. As long as people are using HTML mail, tables for layout are the only way to go.

kagamine 11y ago
I have a gift for you! : /s
dredmorbius 11y ago
You just made the best case for Markdown email that I've seen. Author email in straight text? Markdown is what you're writing already. Author it in WYSYWIG/GUI clients? You only care about presentation.

rimantas 11y ago

Ok, now make it repsonsive, e.g. one column should be below the other on the narrow screen.

RobertKerans 11y ago

By the same dint, web designers don't talk about paper weights and finishes. It's crackers, almost as if the two sets of designers are using different technologies.

hobarrera 11y ago

> And what the hell does "margin: auto" mean? It means "calculate the margins automatically according to available space". Nothing complicated about that. Print is quite different from web. The most noticeable difference is that paper cannot be resized, nor does it adapt it's content when you rotate it.

protonfish 11y ago

Your example does not align vertically, so I am not sure what you are trying to prove. This CSS will put something in the center of your screen quite easily position: absolute; top: 50%; left: 50%; Is that so hard? Having poor CSS skills is not the same as CSS being broken.

cyphax 11y ago
Unfortunately, that's telling your div to start halfway. Following your suggestion leaves me with an element with its top left corner in the exact center of the containing div. I'm not a fan of CSS due to issues like this. It falls in the same line as issues where, for example, paddings and margins (and borders) are added to the size of your div rather than subtracted. There's a solution for that that makes sense nowadays but by the time that came about, I'd already stopped liking CSS.