5 ms·

One could make the argument that having table layout behavior decoupled from a specific tag is a perfectly desirable state of affairs. One of the issues with us

by pault 11y ago

One could make the argument that having table layout behavior decoupled from a specific tag is a perfectly desirable state of affairs. One of the issues with using tables for layouts is the massive clutter of row and cell tags that make the markup extremely difficult to read. Being able to assign those behaviors when and where you need them is the best of both worlds.

jonahx 11y ago
The irony is that what we are doing, semantically, is "centering." Yet to express that concept we are forced to refer to the entirely unrelated concepts of tables and cells, only because of the historical accident that table elements were the only way you could do many types of centering because CSS lacked basic facilities for layout. Also, naming issues aside, we are forced to pollute our markup with pointless, unsemantic container divs simply to achieve a basic style on the contained div.
- rimantas 11y ago
  I doubt you understand what the word "semantically" means. I don't see how polluting markup with <table> (and tables were often nested), <tr> and <td> is any better, not to mention that often already existing markup was sufficient and no extra was needed. Also, div's by definition have no semantic meaning, and that's a good thing—those who bothered to care know that tables for layout had their share of accessibility issues. Alas, now when most race to stuff as much anuglar bootstraps ino their SPA nobody cares about semantics and accessibility any more.
  - Udik 11y ago
    I think he's right. The syntax says "display this stuff as a table and a table cell", but what in fact we mean is "center this thing". The fact that both "style as a table" and "center" attain to the visual aspect doesn't change the fact there is a semantic difference between the two. Also, if divs have no semantic meaning in the context of the document's structure, it means they serve some other purpose: and that purpose is visual styling (not directly but through a css applied to them). How is this not a violation of the separation between document structure and presentation?
    - extra88 11y ago
      There can be reasons for grouping a set of elements in the DOM with a parent div besides styling. But sure, it's a "violation" but web standards do not say "you must only use elements that are essential to the semantic structure of the document." I'd say the guideline is "start with semantic elements, add others as needed for styling, programmatic access, componentization, etc."
    - olavk 11y ago
      It is in principle a violation of the separation between structure and presentation, but it is not a violation of the semantics of HTML which is a bigger issue. Since div's are semantically neutral in HTML, a multitude of "presentational divs" will not confuse screen readers and so on, as the use of <table>-elements will. That said, separation between structure and presentation is desirable, and the necessity to use multiple divs to achieve a layout effect means CSS 2 is not as powerful as we could want. The grid model in CSS 3 is much more powerful, and allows things like separating the presentation order from the structural order.
- extra88 11y ago
  Cute, but in discussing the web, its the semantics of the HTML to be concerned with, not CSS properties or values. There are tons of examples of CSS where a naive reading would not suggest the desired outcome. Maybe that should be improved but generally it's better to have the mess there than in the HTML (or JavaScript). Yes, it's better to have fewer divs that serve no purpose but to create the desired visual effect. As someone else suggested, in your example you probably don't need <div style="display:table;"> so it only requires adding one container div.
  - jonahx 11y ago
    > Cute, but in discussing the web, its the semantics of the HTML to be concerned with, not CSS properties or values. Why wouldn't the principle be applied everywhere? Expressing your intent -- writing semantically -- is a general principle of clean code, and of clear communication in general. It's fine if you want to argue it's more important in html than in css, but that doesn't grant a pass to the creators and proponents of pure CSS who peddle the ideal of semantics with religious zeal and then fail to apply the principle to their own language, or even to realize that they've failed to do so because, I suspect, many of them don't actually grasp the true goal of the principle -- clarity and usability. If they did, CSS wouldn't be the unusable mess of quirks that it is.
    - olavk 11y ago
      You are comparing apples to oranges. Semantic HTML is important because it is a publicly defined semantics and various consumers and user agents are programmed against this semantics. Semantics in class-names, the choice of inline styles vs style sheet etc. are purely for maintainability, e.g. you don't reduce accessibility for anybody if don't use semantic class names, at worst you make it more difficult for yourself, but that might depend on your workflow etc.
      - jonahx 11y ago
        There is nothing in your response which is an argument against what I wrote. I grant everything you said is true -- it does not minimize my argument at all.
- olavk 11y ago
  I think you have the causality backwards though. Tables were used for layout before CSS existed. When CSS was created, it was designed to mimic exactly what was possible to do in HTML, in order to ease the transition to CSS. This is why CSS has a blink-attribute, and why the float and vertical-align properties based exactly on the layout model of Netscapes presentation html (which was defacto standard at the time). Hence the display:table-* properties which mimics the layout of html tables as designed by Netscape.
  - jonahx 11y ago
    > I think you have the causality backwards though. Tables were used for layout before CSS existed. When CSS was created, it was designed to mimic exactly what was possible to do in HTML That's exactly what I said. I think the difference is in our interpretation of that causality: you see it as an intentional concession in the name of backwards compatibility; I see it as a failure of imagination.
    - olavk 11y ago
      Or maybe the ability to imagine the fate of CSS if it wasn't backwards compatible with the HTML layout model :) That said, I look forward to when CSS3 flexbox becomes widely supported. Still I'm happy that we at least don't need presentational HTML anymore.
      - jonahx 11y ago
        > Or maybe the ability to imagine the fate of CSS if it wasn't backwards compatible with the HTML layout model :) You seem to be misinterpreting my arguments -- I'll assume not deliberately. They could have easily provided the same facilities for backwards compatibility of table behavior while also providing clearly-named and usable methods for doing things as basic as centering. Is your position that CSS is a thoughtfully, well-designed system for presentation, and that the complaints of 95% of professionals web developers are the result of their own misunderstanding of it? Can you imagine taking such a position on user complaints as the CTO of a private software company?
ams6110 11y ago
Honestly I can't say that modern html with its clutter of div and span tags is really any more readable than old style table-based layout.

by pault 11y ago

jonahx 11y ago

The irony is that what we are doing, semantically, is "centering." Yet to express that concept we are forced to refer to the entirely unrelated concepts of tables and cells, only because of the historical accident that table elements were the only way you could do many types of centering because CSS lacked basic facilities for layout. Also, naming issues aside, we are forced to pollute our markup with pointless, unsemantic container divs simply to achieve a basic style on the contained div.

rimantas 11y ago
I doubt you understand what the word "semantically" means. I don't see how polluting markup with <table> (and tables were often nested), <tr> and <td> is any better, not to mention that often already existing markup was sufficient and no extra was needed. Also, div's by definition have no semantic meaning, and that's a good thing—those who bothered to care know that tables for layout had their share of accessibility issues. Alas, now when most race to stuff as much anuglar bootstraps ino their SPA nobody cares about semantics and accessibility any more.
- Udik 11y ago
  I think he's right. The syntax says "display this stuff as a table and a table cell", but what in fact we mean is "center this thing". The fact that both "style as a table" and "center" attain to the visual aspect doesn't change the fact there is a semantic difference between the two. Also, if divs have no semantic meaning in the context of the document's structure, it means they serve some other purpose: and that purpose is visual styling (not directly but through a css applied to them). How is this not a violation of the separation between document structure and presentation?
  - extra88 11y ago
    There can be reasons for grouping a set of elements in the DOM with a parent div besides styling. But sure, it's a "violation" but web standards do not say "you must only use elements that are essential to the semantic structure of the document." I'd say the guideline is "start with semantic elements, add others as needed for styling, programmatic access, componentization, etc."
  - olavk 11y ago
    It is in principle a violation of the separation between structure and presentation, but it is not a violation of the semantics of HTML which is a bigger issue. Since div's are semantically neutral in HTML, a multitude of "presentational divs" will not confuse screen readers and so on, as the use of <table>-elements will. That said, separation between structure and presentation is desirable, and the necessity to use multiple divs to achieve a layout effect means CSS 2 is not as powerful as we could want. The grid model in CSS 3 is much more powerful, and allows things like separating the presentation order from the structural order.
extra88 11y ago
Cute, but in discussing the web, its the semantics of the HTML to be concerned with, not CSS properties or values. There are tons of examples of CSS where a naive reading would not suggest the desired outcome. Maybe that should be improved but generally it's better to have the mess there than in the HTML (or JavaScript). Yes, it's better to have fewer divs that serve no purpose but to create the desired visual effect. As someone else suggested, in your example you probably don't need <div style="display:table;"> so it only requires adding one container div.
- jonahx 11y ago
  > Cute, but in discussing the web, its the semantics of the HTML to be concerned with, not CSS properties or values. Why wouldn't the principle be applied everywhere? Expressing your intent -- writing semantically -- is a general principle of clean code, and of clear communication in general. It's fine if you want to argue it's more important in html than in css, but that doesn't grant a pass to the creators and proponents of pure CSS who peddle the ideal of semantics with religious zeal and then fail to apply the principle to their own language, or even to realize that they've failed to do so because, I suspect, many of them don't actually grasp the true goal of the principle -- clarity and usability. If they did, CSS wouldn't be the unusable mess of quirks that it is.
  - olavk 11y ago
    You are comparing apples to oranges. Semantic HTML is important because it is a publicly defined semantics and various consumers and user agents are programmed against this semantics. Semantics in class-names, the choice of inline styles vs style sheet etc. are purely for maintainability, e.g. you don't reduce accessibility for anybody if don't use semantic class names, at worst you make it more difficult for yourself, but that might depend on your workflow etc.
    - jonahx 11y ago
      There is nothing in your response which is an argument against what I wrote. I grant everything you said is true -- it does not minimize my argument at all.
olavk 11y ago
I think you have the causality backwards though. Tables were used for layout before CSS existed. When CSS was created, it was designed to mimic exactly what was possible to do in HTML, in order to ease the transition to CSS. This is why CSS has a blink-attribute, and why the float and vertical-align properties based exactly on the layout model of Netscapes presentation html (which was defacto standard at the time). Hence the display:table-* properties which mimics the layout of html tables as designed by Netscape.
- jonahx 11y ago
  > I think you have the causality backwards though. Tables were used for layout before CSS existed. When CSS was created, it was designed to mimic exactly what was possible to do in HTML That's exactly what I said. I think the difference is in our interpretation of that causality: you see it as an intentional concession in the name of backwards compatibility; I see it as a failure of imagination.
  - olavk 11y ago
    Or maybe the ability to imagine the fate of CSS if it wasn't backwards compatible with the HTML layout model :) That said, I look forward to when CSS3 flexbox becomes widely supported. Still I'm happy that we at least don't need presentational HTML anymore.
    - jonahx 11y ago
      > Or maybe the ability to imagine the fate of CSS if it wasn't backwards compatible with the HTML layout model :) You seem to be misinterpreting my arguments -- I'll assume not deliberately. They could have easily provided the same facilities for backwards compatibility of table behavior while also providing clearly-named and usable methods for doing things as basic as centering. Is your position that CSS is a thoughtfully, well-designed system for presentation, and that the complaints of 95% of professionals web developers are the result of their own misunderstanding of it? Can you imagine taking such a position on user complaints as the CTO of a private software company?

ams6110 11y ago

Honestly I can't say that modern html with its clutter of div and span tags is really any more readable than old style table-based layout.