StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Simple rule - <em>Use tables for tabular data, use other elements for presentation(designing layouts using css) like <code>div</code>, <code>section</code>, <code>aside</code>, <code>nav</code> etc . which provides meaning to the content they hold rather than using <code>table</code> for everything</em></p> <p>The fact is, developers used tables in 90s for ddrafting their layouts, but now, new CSS3 spec is amazing, it gives you so much hold on designing layouts like Flex Box, <code>column-count</code>, behavior of the box model can be altered by using <code>box-sizing</code> property, responsive designs are getting better and better using <code>@media</code> queries, grids etc.. which you cannot achieve with <code>table</code> element... and hence, <code>table</code> is only used for storing tabular data.</p> <p>I've seen many developers having an impression that <code>table</code> should be <em>completely ignored</em>, and instead they use a whole lot of <code>div</code> with 100 lines of CSS, applying <code>display: table;</code> <code>table-cell</code> <code>table-row</code> properties just to get a single table straight.</p> <p><em>So even in HTML5 it is COMPLETELY OK if you use tables for <strong>tabular data</em></strong>..</p> <hr> <p><a href="http://www.w3.org/TR/html401/struct/tables.html#h-11.1">From W3 Org : (v4.01)</a></p> <blockquote> <p>Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use <a href="http://www.w3.org/TR/html401/present/styles.html">style sheets</a> to control layout rather than tables.</p> </blockquote> <hr> <p><a href="http://www.w3.org/TR/html5/tabular-data.html#the-table-element">From (HTML 5)</a></p> <blockquote> <p>Tables should not be used as layout aids. Historically, many Web authors have tables in HTML as a way to control their page layout making it difficult to extract tabular data from such documents. In particular, users of accessibility tools, like screen readers, are likely to find it very difficult to navigate pages with tables used for layout. If a table is to be used for layout it must be marked with the attribute <code>role="presentation"</code> for a user agent to properly represent the table to an assistive technology and to properly convey the intent of the author to tools that wish to extract tabular data from the document.</p> <p><em>There are a variety of alternatives to using HTML tables for layout, primarily using CSS positioning and the CSS table model. <a href="http://www.w3.org/TR/html5/references.html#refsCSS">[CSS]</a></em></p> </blockquote>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload