9 ms·

What, exactly, is the problem with the <table> tag in the first place? Been a long, long time since I last touched HTML

by orbat 10y ago

DavidSJ 10y ago
There's no problem. But sometime around 2003 it became trendy to do all layout in CSS, even when a table or a <center> tag would do just fine.
- aplummer 10y ago
  No there is, try using a screen reader, it reads out the header in front of every cell, its really hard to understand vs a semantic document with css styling for people not living with disability.
  - rimantas 10y ago
    Accessibility is dead, alas. It is extremely sad to watch what is happening with the web right now. All the good initiatives are being forgotten in the chase for the latest fad. "You were so excited that you could that you've forgotten to think if you should" can describe a lot of movement in this space. Even without the accessibility in mind, go to http://csszengarden.com/ http://csszengarden.com/ and try to replicate that with tables. Barely ten years have passed and the idea that not everything on the web is an app and sometimes it is nice to have ability to change the presentation without even touching the markup.
    - milesrout 10y ago
      Web apps are all slow and crap anyway.
- liveoneggs 10y ago
  <center> was never even replaced properly :)
  - recursive 10y ago
    Between text-align: center; and margin: 0 auto; what's missing?
leppr 10y ago
It's neither flexible nor semantic. Flexibility is what allowed webpages to be "responsive" before media-queries even existed, and semantics is what allows accessibility, search engines, and other html parsing tools ("readability" in Firefox and Safari, ...) to function better. The only advantage it has is that it's old and predictable. That's why it's still used to format emails for instance, it's reliable and works on most supports.
- dom0 10y ago
  Most divsoup-layouts are not semantic at all, either.
  - monk_e_boy 10y ago
    Exactly this. How are DIVs more semantic than TABLE? And who is reading the source? Your developers and a web spider. The web spider doesn't care (I wrote one and getting it to parse DIV content and TABLE content wasn't much effort) As far as I am aware no spider is looking at the DIV and gathering semantic information from it. Sure, it may look at the TABLE and initially assume it has tabular data in it, but a tiny bit of logic fixes that.
    - recursive 10y ago
      Which tiny bit of logic can distinguish between tabular and non-tabular tables? DIVs are not actively anti-semantic. They are just a-semantic. So they're not particularly right, they're just not actively wrong.
    - squeaky-clean 10y ago
      > And who is reading the source? Your developers and a web spider. Or blind people using a screenreader? DIVs aren't entirely semantic, but table is semantically wrong for how it's being used. It'd be like if I asked you to "get me the pencil off that thingie" and pointed at a chair with a pencil on it. As opposed to "get me the pencil off that table" while pointing at the same chair with a pencil on it.
    - 10y ago
mattmanser 10y ago
<table> <tr> <td> <table> <tr> <td> <table> <tr> <td> That's the problem. This argument was over a decade ago and it's because it's a nightmare to work in tag soup. I still have to deal with tables for layout on mail templates, bloody Outlook, and that extra 2 layers of tag nesting you have to do on every level quickly turns the code into an incomprehensible mess, even with careful indentation. And if you're not very careful with indentation it turns into an utter nightmare.
- einr 10y ago
  That's a problem to be sure, but sometimes I wonder if this is much better: <div class="container"> <div class="maincontent"> <div class="col-md-4"> <div class="row"> <div class="col-md-8"> <div class="row"> <div class="header"> <div class="text-center"> <div class="brand-text">
  - e12e 10y ago
    It's not. There were a few arguments against "table layout", some of which apply to hn as well IMNHO. Added tags without semantic value (just as your div-soup above also illustrates). Layout speed (in reality not much of an issue now - and also an issue with deeply nested tags with complex layout). Both are fixed in modern html5 which moves (back) towards simple, semantic, document layout (html-body-article-heading-etc). With flex-box layout it's also quite easy to have the article/main content come first (possibly preceded by a header) - followed by sidebars and footer -- all as their own "top-level" boxes/containers. In a classic table layout, there's an extra top level element in addition to "body" - the surrounding table. And finally table layout is generally verbose and messy for other types of content than tabular data.
    - einr 10y ago
      I look forward to trying modern flexbox and grid layouts. I have not had the privilege (?) to work with either yet; our customers are not necessarily on the bleeding edge of browser releases so I have to stay a little behind the curve. Hence, a lot of div soup and ridiculous indentation levels. Honestly, for what I'm doing (a pretty complex web app with an almost desktop-style GUI with a bunch of buttons, text inputs and checkboxes everywhere) a Bootstrap-style div layout gets at least as verbose and messy as a table layout would. I especially hate having to always do HTML comments with class/id names after every </div> so I know what closes what when I'm near the bottom of the file. At least with tables you get </td></tr></table> instead of </div></div></div>. But of course a div layout is at least partially semantic and mobile/small screen friendly. In a classic table layout, there's an extra top level element in addition to "body" - the surrounding table. In practice, any bog-standard div layout today has a <div class="container"> at top level which contains nothing but other divs and sets size and positioning for the whole page. This is roughly equal to a <table>, no?
keypress 10y ago
One was that you once had to wait for the deepest nested table to render before the rest. And there used to be tables in tables in tables.
keypress 10y ago
Little irritations like: A form is not allowed to be a child element of a table, tbody or tr. There are workarounds.
- tbarbugli 10y ago
  <table> <tr> <td> <form> <table> ? Edit: this is meant to be ironic
  - marcosdumay 10y ago
    You meant it ironically, but people did write things like that. (And it was the only way to get the intended result by the time.)
    - SippinLean 10y ago
      Did and do, this very site uses nested <tables>
iamben 10y ago
Nothing. But tables are for tabular data. Laying out a page using a table to divide it up and make it look pretty (or in lots of cases, lay it out so it performs some kind of sales based task) doesn't make much sense. Hence the preferred CSS route, even if the markup is just as verbose (as mentioned in this thread). Web apps aside [sigh], if one was to disable CSS (and thus all the blocks making it look pretty), the page should still make sense. An H1 as the main header, copy in paragraphs, headers dividing up the content, blockquotes, navigation in lists - and tabular data in tables (etc, etc). It doesn't always work like that in practice, but that's the aim.
- umanwizard 10y ago
  But why is that beneficial?
  - andreareina 10y ago
    I'm on a crap connection, and it's not unusual for the styling content to not make it (whether it's CSS or javascript). The ones that follow these principles remain usable, the ones that don't, don't.
  - shakna 10y ago
    Bad connections, slow connections and naive screen readers are all common.
  - iamben 10y ago
    Along with what the others have mentioned (connection, screen readers), it's good for your SEO as well.
- forgottenpass 10y ago
  Nothing. But tables are for tabular data. And webpages are a document presentation format. If jamming applications into documents made the web an application platform, than jamming grid layouts into tables made them a grid widget. Calling a SPA a "page" is a larger and more ridiculous lie than calling the table tag a grid layout widget. Anyone still committed to the table tag lie should move all their apps out of the browser today. Web developers can work around the table tag, but not the fact they're jamming apps into documents. So one of these lies is taken more seriously than the other.
Joeboy 10y ago
The problem is that other web designers will laugh at you and kick sand in your face. Possibly in front of your clients.

What, exactly, is the problem with the <table> tag in the first place? Been a long, long time since I last touched HTML

by orbat 10y ago

What, exactly, is the problem with the <table> tag in the first place? Been a long, long time since I last touched HTML

There's no problem. But sometime around 2003 it became trendy to do all layout in CSS, even when a table or a <center> tag would do just fine.

aplummer 10y ago
No there is, try using a screen reader, it reads out the header in front of every cell, its really hard to understand vs a semantic document with css styling for people not living with disability.
- rimantas 10y ago
  Accessibility is dead, alas. It is extremely sad to watch what is happening with the web right now. All the good initiatives are being forgotten in the chase for the latest fad. "You were so excited that you could that you've forgotten to think if you should" can describe a lot of movement in this space. Even without the accessibility in mind, go to http://csszengarden.com/ http://csszengarden.com/ and try to replicate that with tables. Barely ten years have passed and the idea that not everything on the web is an app and sometimes it is nice to have ability to change the presentation without even touching the markup.
  - milesrout 10y ago
    Web apps are all slow and crap anyway.
liveoneggs 10y ago
<center> was never even replaced properly :)
- recursive 10y ago
  Between text-align: center; and margin: 0 auto; what's missing?

leppr 10y ago

It's neither flexible nor semantic. Flexibility is what allowed webpages to be "responsive" before media-queries even existed, and semantics is what allows accessibility, search engines, and other html parsing tools ("readability" in Firefox and Safari, ...) to function better. The only advantage it has is that it's old and predictable. That's why it's still used to format emails for instance, it's reliable and works on most supports.

dom0 10y ago
Most divsoup-layouts are not semantic at all, either.
- monk_e_boy 10y ago
  Exactly this. How are DIVs more semantic than TABLE? And who is reading the source? Your developers and a web spider. The web spider doesn't care (I wrote one and getting it to parse DIV content and TABLE content wasn't much effort) As far as I am aware no spider is looking at the DIV and gathering semantic information from it. Sure, it may look at the TABLE and initially assume it has tabular data in it, but a tiny bit of logic fixes that.
  - recursive 10y ago
    Which tiny bit of logic can distinguish between tabular and non-tabular tables? DIVs are not actively anti-semantic. They are just a-semantic. So they're not particularly right, they're just not actively wrong.
  - squeaky-clean 10y ago
    > And who is reading the source? Your developers and a web spider. Or blind people using a screenreader? DIVs aren't entirely semantic, but table is semantically wrong for how it's being used. It'd be like if I asked you to "get me the pencil off that thingie" and pointed at a chair with a pencil on it. As opposed to "get me the pencil off that table" while pointing at the same chair with a pencil on it.
  - 10y ago

mattmanser 10y ago

<table> <tr> <td> <table> <tr> <td> <table> <tr> <td> That's the problem. This argument was over a decade ago and it's because it's a nightmare to work in tag soup. I still have to deal with tables for layout on mail templates, bloody Outlook, and that extra 2 layers of tag nesting you have to do on every level quickly turns the code into an incomprehensible mess, even with careful indentation. And if you're not very careful with indentation it turns into an utter nightmare.

einr 10y ago
That's a problem to be sure, but sometimes I wonder if this is much better: <div class="container"> <div class="maincontent"> <div class="col-md-4"> <div class="row"> <div class="col-md-8"> <div class="row"> <div class="header"> <div class="text-center"> <div class="brand-text">
- e12e 10y ago
  It's not. There were a few arguments against "table layout", some of which apply to hn as well IMNHO. Added tags without semantic value (just as your div-soup above also illustrates). Layout speed (in reality not much of an issue now - and also an issue with deeply nested tags with complex layout). Both are fixed in modern html5 which moves (back) towards simple, semantic, document layout (html-body-article-heading-etc). With flex-box layout it's also quite easy to have the article/main content come first (possibly preceded by a header) - followed by sidebars and footer -- all as their own "top-level" boxes/containers. In a classic table layout, there's an extra top level element in addition to "body" - the surrounding table. And finally table layout is generally verbose and messy for other types of content than tabular data.
  - einr 10y ago
    I look forward to trying modern flexbox and grid layouts. I have not had the privilege (?) to work with either yet; our customers are not necessarily on the bleeding edge of browser releases so I have to stay a little behind the curve. Hence, a lot of div soup and ridiculous indentation levels. Honestly, for what I'm doing (a pretty complex web app with an almost desktop-style GUI with a bunch of buttons, text inputs and checkboxes everywhere) a Bootstrap-style div layout gets at least as verbose and messy as a table layout would. I especially hate having to always do HTML comments with class/id names after every </div> so I know what closes what when I'm near the bottom of the file. At least with tables you get </td></tr></table> instead of </div></div></div>. But of course a div layout is at least partially semantic and mobile/small screen friendly. In a classic table layout, there's an extra top level element in addition to "body" - the surrounding table. In practice, any bog-standard div layout today has a <div class="container"> at top level which contains nothing but other divs and sets size and positioning for the whole page. This is roughly equal to a <table>, no?

keypress 10y ago

One was that you once had to wait for the deepest nested table to render before the rest. And there used to be tables in tables in tables.

keypress 10y ago

Little irritations like: A form is not allowed to be a child element of a table, tbody or tr. There are workarounds.

tbarbugli 10y ago
<table> <tr> <td> <form> <table> ? Edit: this is meant to be ironic
- marcosdumay 10y ago
  You meant it ironically, but people did write things like that. (And it was the only way to get the intended result by the time.)
  - SippinLean 10y ago
    Did and do, this very site uses nested <tables>

iamben 10y ago

Nothing. But tables are for tabular data. Laying out a page using a table to divide it up and make it look pretty (or in lots of cases, lay it out so it performs some kind of sales based task) doesn't make much sense. Hence the preferred CSS route, even if the markup is just as verbose (as mentioned in this thread). Web apps aside [sigh], if one was to disable CSS (and thus all the blocks making it look pretty), the page should still make sense. An H1 as the main header, copy in paragraphs, headers dividing up the content, blockquotes, navigation in lists - and tabular data in tables (etc, etc). It doesn't always work like that in practice, but that's the aim.

umanwizard 10y ago
But why is that beneficial?
- andreareina 10y ago
  I'm on a crap connection, and it's not unusual for the styling content to not make it (whether it's CSS or javascript). The ones that follow these principles remain usable, the ones that don't, don't.
- shakna 10y ago
  Bad connections, slow connections and naive screen readers are all common.
- iamben 10y ago
  Along with what the others have mentioned (connection, screen readers), it's good for your SEO as well.
forgottenpass 10y ago
Nothing. But tables are for tabular data. And webpages are a document presentation format. If jamming applications into documents made the web an application platform, than jamming grid layouts into tables made them a grid widget. Calling a SPA a "page" is a larger and more ridiculous lie than calling the table tag a grid layout widget. Anyone still committed to the table tag lie should move all their apps out of the browser today. Web developers can work around the table tag, but not the fact they're jamming apps into documents. So one of these lies is taken more seriously than the other.

Joeboy 10y ago

The problem is that other web designers will laugh at you and kick sand in your face. Possibly in front of your clients.