<story><title>Show HN: A simple lightweight CSS grid, not a bloated framework</title><url>http://thisisdallas.github.com/Simple-Grid/</url><text></text></story><parent_chain><item><author>zaidf</author><text>So I am trying extremely hard to convince myself that these css grids are much better than html tables. Yet, when I see projects like these that make the act of making two columns of arbitrary widths such a big deal, I find it hard to convince myself that css for your basic page container is worth the hacks. I really want to be convinced otherwise because I&apos;d like to believe if &lt;i&gt;so many&lt;/i&gt; people are for it, I am obviously not seeing something they can.&lt;p&gt;So dear HN, please help me convince myself that CSS and its hacks are superior than tables.&lt;p&gt;My mind&apos;s first objection: &quot;to make a simple two column layout that would typically take a few lines with the table tag and be compatible across browsers. The same thing in css would require the use of an open-source grid or bunch of hacks and testing--taking much more effort than the table tag&quot;. How do I respond to this objection?</text></item></parent_chain><comment><author>blauwbilgorgel</author><text>It isn&apos;t about which is easiest to implement. No one said CSS(3) was super-easy. This discussion is also very old by now. I am surprised to bump into this view again.&lt;p&gt;A CSS layout is better than a table-based layout, due to:&lt;p&gt;- Maintenance: Maintaining or redesigning a table-based layout is very cumbersome, especially with nested tables, because:&lt;p&gt;- Seperation of content and design: The content has to be changed, to change the design, and that is not a nice workflow.&lt;p&gt;- Accessibility: CSS designs allow much better for a user-specified stylesheet. Resize the browserwindow and tables keep sticking out, where with CSS you can change the order (put columns under each other). Screenreaders behave in a specific way for tables, they try to read the &quot;summary&quot;, or they assume the table holds tabular data, reading it row by row. A table lay-out can therefor confuse.&lt;p&gt;- SEO: CSS designs make content stacking possible, tables only allow to put the content in the order of the table cells. Webmaster guidelines ask you to check for correct use of HTML, which tables for lay-out isn&apos;t:&lt;p&gt;- Semantics/standards: Use tables for tabular data. Provide a summary and table header if relevant and possible. Using tables for lay-out semantically turns your entire page into tabular data.&lt;p&gt;- Pagespeed: CSS allows for faster, progressive rendering. HTML tables take their width from the resulting table-cell: Content will jump around while rendering or some browsers even show a blank table before all content is loaded.&lt;p&gt;A CSS framework like this is far from hacky. Using tables for layout, because CSS is deemed too complex, now that is hacky.&lt;p&gt;Also, don&apos;t forget support for &quot;display: table&quot; is in near all modern browsers. If you really want to design lay-out like you are using tables, it is possible with CSS too.&lt;p&gt;For responsive designs, much more is possible with CSS than a 100% width table. You can&apos;t just slap a few lines of table and expect it to work well on an ipad.</text></comment>
<story><title>Show HN: A simple lightweight CSS grid, not a bloated framework</title><url>http://thisisdallas.github.com/Simple-Grid/</url><text></text></story><parent_chain><item><author>zaidf</author><text>So I am trying extremely hard to convince myself that these css grids are much better than html tables. Yet, when I see projects like these that make the act of making two columns of arbitrary widths such a big deal, I find it hard to convince myself that css for your basic page container is worth the hacks. I really want to be convinced otherwise because I&apos;d like to believe if &lt;i&gt;so many&lt;/i&gt; people are for it, I am obviously not seeing something they can.&lt;p&gt;So dear HN, please help me convince myself that CSS and its hacks are superior than tables.&lt;p&gt;My mind&apos;s first objection: &quot;to make a simple two column layout that would typically take a few lines with the table tag and be compatible across browsers. The same thing in css would require the use of an open-source grid or bunch of hacks and testing--taking much more effort than the table tag&quot;. How do I respond to this objection?</text></item></parent_chain><comment><author>drhayes9</author><text>Okay, I&apos;ll bite first.&lt;p&gt;A table for layout is semantically meaningless. If you view a webpage as vaguely structured data, then using a table for layout is akin to using a String to represent an enumerated value. Sure, you can do it and it will work, but you&apos;re diminishing our ability to reason about your data and access it with our tools.&lt;p&gt;If I&apos;m working in a codebase and wanted to see where we&apos;re presenting tabular data to the user and we&apos;re using tables for layout, I now cannot know which kind of table I&apos;m looking at: presentational or structured.&lt;p&gt;If a user is using a screenreader to access a site, the screenreader will see the table and read it line-by-line. In a presentational case, that means &amp;#60;tr&amp;#62; by &amp;#60;tr&amp;#62;. This is meaningless to a non-sighted person and lowers the usability of the site.&lt;p&gt;Tables don&apos;t respond to CSS as well as other block elements. Try setting the width or height of an individual cell in relation to the container. You&apos;ll likely end up using spanning columns or spanning rows or setting the width using table attributes. Now we&apos;re breaking the abstraction between HTML (structured data, our model) and CSS (presentation, our view). We&apos;re now scattering view-related semantics inside of our model.&lt;p&gt;Are those good enough reasons?</text></comment>