6 ms·

It is a weird myth that CSS somehow discourages tables. CSS have supported styling html tables and ‘display:table’ (allowing a table-like layout without html-ta

It is a weird myth that CSS somehow discourages tables. CSS have supported styling html tables and ‘display:table’ (allowing a table-like layout without html-tables) for 25 years. Float and clear was grandfathered into CSS since they were added to HTML by Netscape. They are fine for their intended purpose: placing images in a text and have the text flow around. Other positioning systems you mention does not solve the same problem as CSS. CSS has to support viewports of any size and dimensions and allow text to scale independently of the viewport size and still remain readable.

dumbo-octopus 3y ago
This very website is built entirely on tables. (which, unfortunately, is why is has terrible zoom support)
- silon42 3y ago
  Tables usually have much better zoom support than css hacks of old... Also, I often use 'zoom text only' in Firefox... that causes havoc on some sites. Also, I disable web site fonts by default.
Moru 3y ago
When people say not to use tables they mean <table><tr><td>for layout of the entire page</td></tr></table>
- justsomehnguy 3y ago
  > they mean They shouldn't had mean, they should had said that. Because 99% of time we have a bunch of <p> in assortments of <div> representing a tabular data. Dozens of "web" "front-end" "frameworks" doesn't help it in any way, too.
  - Moru 3y ago
    Yes, table for layout and table for tabular data is different things. This was usually very clear in advices. Don't use <table> for layout. DO use <table> for tables.
- coldtea 3y ago
  They should not have advised against that either. It was a much saner, simpler, and more efficient mechanism that the clear/float monstrocities imposed upon people in the period before grid, which reinvented the same thing (table layout) just without the actual tags.
  - bazoom42 3y ago
    You could use ‘display:table’ in CSS if you wanted a tabular layout without using the table-tags. This has been part of CSS for 25 years. Grid is newer and more powerful.
    - zaphar 3y ago
      display:table was never really evangelized for tabular layout. They were pretty much ignored and the literature and documentation missed the point. Tabular layout is really just another word for grid layouts. Grid layouts took forever to arrive. Tables were the only reliable way lay things out in a grid for a very long time and yet were discouraged regardless. There were people who knew about display:table and used it and some of us were nevertheless told we were doing it wrong because people got hung up on the word table. Like many things in CSS features that should have been present in the original 2.0, when it became clear that the web wanted to be laid out like a magazine, Took multiple decades to actually appear. As a result we are still seeing the fallout of those failures in our ecosystem.
      - bazoom42 3y ago
        Sorry are you saying ‘display:table’ was not viable for grid-like layouts because someone might confuse it with the html <table> tag? That is like saying Go is not a viable programming language because someone might confuse it with GOTO and consider it harmful.
        zaphar 3y ago
        I'm saying that CSS has always had really confusing messaging around what is considered good practice and what is considered bad. If CSS had actually had the equivalent of Go's stdlib and documentation with well established good practices that were pragmatic we would be having a very different conversation right now.
- est 3y ago
  and instead we have a clusterfuck of <div> with tons of attrs.
outop 3y ago
Before CSS people used to use tables, often nested, for all kinds of layout. Eg if your page had a header, a sidebar and a main text area, you would create a table with cells of the right relative widths, with invisible borders, and put each layout element in one possibly merged cell. This was essentially standard practice for a while. CSS allowed layouts like this to be done without tables. It still supported tables, but for the case when you actually want to show tabular data which would appear like a table on the page.
- TeMPOraL 3y ago
  And then it took some 20-ish years for CSS to finally realize that aligning to a grid is a good idea and, through a long, painful, incremental process, eventually reinvent tables for layout.
  - yurishimo 3y ago
    I mean, semantics are also good! Yes, CSS grids are a lot like tables in some ways, but not having to add 25% more DOM elements to fake a table layout (display: table/table-row/table-cell; that's 3 divs for one row!) is also a thing to be celebrated. Plus, in practice, grid is a lot more powerful than doing a few common layouts. Grid took so long precisely because they were trying to think a little further ahead rather than just pushing something out into the world and hoping it works out. Thankfully web standards have matured and are more careful not to repeat mistakes like the debacle that was CSS property prefixes.
    - mike_hearn 3y ago
      Nah, semantics are worthless. The whole semantic web idea never took off for good reasons, HTML5 semantic tags don't have any meaningful semantics and you can't even reliably remove boilerplate from HTML without ML pipelines (a basic use case you'd expect any "semantic" document format to nail easily). Then the invention of LLMs killed it twice over. HTML is a graphics rendering language in denial about its true nature. Grid took a long time because everything takes a long time when you have to align mutually competing organizations and there's no profit motive involved with the actual work itself. There's no real technical benefits to CSS layout over table tags. A table tag isn't a heavy object. CSS cascade calculations on the other hand ...
coldtea 3y ago
>It is a weird myth that CSS somehow discourages tables. CSS have supported styling html tables and ‘display:table’ (allowing a table-like layout without html-tables) for 25 years. Not a myth in any way shape or form. Tables for layout (not tables in general) were discouraged with various arguments in favor of "float/clear", even decades before a sane substitute (grid/flex) was available. >Other positioning systems you mention does not solve the same problem as CSS. CSS has to support viewports of any size and dimensions and allow text to scale independently of the viewport size and still remain readable. None of those requirements is unique to CSS, and none of those requirements necessitates the stupid float/clear mechanisms that were shoved into people's throats for 15 years. We're talking about the style language that had layout shoe-horned into it, and which tool decades to develop the most basic layout mechanisms available in GUIs for decades, grid layout and flex layout. And even when it did, it didn't it badly.
- bazoom42 3y ago
  CSS never recommended float/clear as an alternative to table-based layout. CSS had ‘display:table’ for when you needed a tabular layout without the semantic baggage of the table-tag.
  - thejohnconway 3y ago
    "CSS" (not sure what you're referring to here, the standards bodies?). Endless articles from the mid 2000s kept saying tables bad, here's how you layout without tables. All of them used floats for layout, not display:table. Partly I suppose this was because IE didn't support it until 2009, I think. Nearly all layouts people actually want are table-like, and I think CSS really was misguided in its text-flow as layout approach.
    - winternewt 3y ago
      The reason for the advice against tables was that the "semantic web" was all the rage (probably mostly because Google wanted to make it easier to index stuff). If you have tabular data, using tables was just fine. The issue was with using it solely to control the graphical presentation without any semantic basis for putting it in the table. Same reason you don't use <H1> just to make the text bigger.
bandrami 3y ago
I absolutely remember a ton of pieces about how we all needed to stop using tables (and 1x1 transparent gifs, too) for page layout because CSS was The Right Way
- bazoom42 3y ago
  There is always a lot of confusion about this because “tables” can mean different things - it is both a set of structual elements in HTML and a layout model in CSS. CSS is “the right way” to control styling and layout, but that does not mean you can’t use tables. In the early days of the web people used the BLOCKQUOTE element to create margins since this was the only way. When CSS arrived, it became “the right way” to create margins - but that does not mean you can’t use blockquotes! You just need to distinguish beteen the semantics of a quote and the layou effect of margins. But I’m sure someone understod this to mean that quoting things were bad.
  - TeMPOraL 3y ago
    But that is the point. CSS arrived, and people started saying you "just need to distinguish beteen the semantics of" a table "and the layout effect". Back then, the chant of the day was, "blood for the blood god, tabular data for the <table> god, layout for the CSS god". And then it spiraled into general "separation of content and presentation" nonsense that, like in any good cult, people believed with their whole hearts, preached to make new converts, then did the opposite because reality demanded it, and couldn't see the problem. CSS Zen Garden notwithstanding, we ended up with div soups (later, semantic div-equivalent soups) inseparable from complex CSS, because form is function; your content is always designed with a particular form in mind.
    - bazoom42 3y ago
      Is accessibility for the visually impaired a cult? How could Google even work if content could not be seperated from its visual presention?
      - 3y ago

dumbo-octopus 3y ago

This very website is built entirely on tables. (which, unfortunately, is why is has terrible zoom support)

silon42 3y ago
Tables usually have much better zoom support than css hacks of old... Also, I often use 'zoom text only' in Firefox... that causes havoc on some sites. Also, I disable web site fonts by default.

Moru 3y ago

When people say not to use tables they mean <table><tr><td>for layout of the entire page</td></tr></table>

justsomehnguy 3y ago
> they mean They shouldn't had mean, they should had said that. Because 99% of time we have a bunch of <p> in assortments of <div> representing a tabular data. Dozens of "web" "front-end" "frameworks" doesn't help it in any way, too.
- Moru 3y ago
  Yes, table for layout and table for tabular data is different things. This was usually very clear in advices. Don't use <table> for layout. DO use <table> for tables.
coldtea 3y ago
They should not have advised against that either. It was a much saner, simpler, and more efficient mechanism that the clear/float monstrocities imposed upon people in the period before grid, which reinvented the same thing (table layout) just without the actual tags.
- bazoom42 3y ago
  You could use ‘display:table’ in CSS if you wanted a tabular layout without using the table-tags. This has been part of CSS for 25 years. Grid is newer and more powerful.
  - zaphar 3y ago
    display:table was never really evangelized for tabular layout. They were pretty much ignored and the literature and documentation missed the point. Tabular layout is really just another word for grid layouts. Grid layouts took forever to arrive. Tables were the only reliable way lay things out in a grid for a very long time and yet were discouraged regardless. There were people who knew about display:table and used it and some of us were nevertheless told we were doing it wrong because people got hung up on the word table. Like many things in CSS features that should have been present in the original 2.0, when it became clear that the web wanted to be laid out like a magazine, Took multiple decades to actually appear. As a result we are still seeing the fallout of those failures in our ecosystem.
    - bazoom42 3y ago
      Sorry are you saying ‘display:table’ was not viable for grid-like layouts because someone might confuse it with the html <table> tag? That is like saying Go is not a viable programming language because someone might confuse it with GOTO and consider it harmful.
      - zaphar 3y ago
        I'm saying that CSS has always had really confusing messaging around what is considered good practice and what is considered bad. If CSS had actually had the equivalent of Go's stdlib and documentation with well established good practices that were pragmatic we would be having a very different conversation right now.
est 3y ago
and instead we have a clusterfuck of <div> with tons of attrs.

outop 3y ago

Before CSS people used to use tables, often nested, for all kinds of layout. Eg if your page had a header, a sidebar and a main text area, you would create a table with cells of the right relative widths, with invisible borders, and put each layout element in one possibly merged cell. This was essentially standard practice for a while. CSS allowed layouts like this to be done without tables. It still supported tables, but for the case when you actually want to show tabular data which would appear like a table on the page.

TeMPOraL 3y ago
And then it took some 20-ish years for CSS to finally realize that aligning to a grid is a good idea and, through a long, painful, incremental process, eventually reinvent tables for layout.
- yurishimo 3y ago
  I mean, semantics are also good! Yes, CSS grids are a lot like tables in some ways, but not having to add 25% more DOM elements to fake a table layout (display: table/table-row/table-cell; that's 3 divs for one row!) is also a thing to be celebrated. Plus, in practice, grid is a lot more powerful than doing a few common layouts. Grid took so long precisely because they were trying to think a little further ahead rather than just pushing something out into the world and hoping it works out. Thankfully web standards have matured and are more careful not to repeat mistakes like the debacle that was CSS property prefixes.
  - mike_hearn 3y ago
    Nah, semantics are worthless. The whole semantic web idea never took off for good reasons, HTML5 semantic tags don't have any meaningful semantics and you can't even reliably remove boilerplate from HTML without ML pipelines (a basic use case you'd expect any "semantic" document format to nail easily). Then the invention of LLMs killed it twice over. HTML is a graphics rendering language in denial about its true nature. Grid took a long time because everything takes a long time when you have to align mutually competing organizations and there's no profit motive involved with the actual work itself. There's no real technical benefits to CSS layout over table tags. A table tag isn't a heavy object. CSS cascade calculations on the other hand ...

coldtea 3y ago

>It is a weird myth that CSS somehow discourages tables. CSS have supported styling html tables and ‘display:table’ (allowing a table-like layout without html-tables) for 25 years. Not a myth in any way shape or form. Tables for layout (not tables in general) were discouraged with various arguments in favor of "float/clear", even decades before a sane substitute (grid/flex) was available. >Other positioning systems you mention does not solve the same problem as CSS. CSS has to support viewports of any size and dimensions and allow text to scale independently of the viewport size and still remain readable. None of those requirements is unique to CSS, and none of those requirements necessitates the stupid float/clear mechanisms that were shoved into people's throats for 15 years. We're talking about the style language that had layout shoe-horned into it, and which tool decades to develop the most basic layout mechanisms available in GUIs for decades, grid layout and flex layout. And even when it did, it didn't it badly.

bazoom42 3y ago
CSS never recommended float/clear as an alternative to table-based layout. CSS had ‘display:table’ for when you needed a tabular layout without the semantic baggage of the table-tag.
- thejohnconway 3y ago
  "CSS" (not sure what you're referring to here, the standards bodies?). Endless articles from the mid 2000s kept saying tables bad, here's how you layout without tables. All of them used floats for layout, not display:table. Partly I suppose this was because IE didn't support it until 2009, I think. Nearly all layouts people actually want are table-like, and I think CSS really was misguided in its text-flow as layout approach.
  - winternewt 3y ago
    The reason for the advice against tables was that the "semantic web" was all the rage (probably mostly because Google wanted to make it easier to index stuff). If you have tabular data, using tables was just fine. The issue was with using it solely to control the graphical presentation without any semantic basis for putting it in the table. Same reason you don't use <H1> just to make the text bigger.

bandrami 3y ago

I absolutely remember a ton of pieces about how we all needed to stop using tables (and 1x1 transparent gifs, too) for page layout because CSS was The Right Way

bazoom42 3y ago
There is always a lot of confusion about this because “tables” can mean different things - it is both a set of structual elements in HTML and a layout model in CSS. CSS is “the right way” to control styling and layout, but that does not mean you can’t use tables. In the early days of the web people used the BLOCKQUOTE element to create margins since this was the only way. When CSS arrived, it became “the right way” to create margins - but that does not mean you can’t use blockquotes! You just need to distinguish beteen the semantics of a quote and the layou effect of margins. But I’m sure someone understod this to mean that quoting things were bad.
- TeMPOraL 3y ago
  But that is the point. CSS arrived, and people started saying you "just need to distinguish beteen the semantics of" a table "and the layout effect". Back then, the chant of the day was, "blood for the blood god, tabular data for the <table> god, layout for the CSS god". And then it spiraled into general "separation of content and presentation" nonsense that, like in any good cult, people believed with their whole hearts, preached to make new converts, then did the opposite because reality demanded it, and couldn't see the problem. CSS Zen Garden notwithstanding, we ended up with div soups (later, semantic div-equivalent soups) inseparable from complex CSS, because form is function; your content is always designed with a particular form in mind.
  - bazoom42 3y ago
    Is accessibility for the visually impaired a cult? How could Google even work if content could not be seperated from its visual presention?
    - 3y ago