Artikelformat

Proper Use of Tables – Noupe Design Blog

Hinterlasse eine Antwort

Don???t Use Faux Tables!

I don???t know how many websites I???ve seen that have created mock-ups of data tables using countless DIVs and CSS styles, rather than actual HTML tables. This is a bad idea for a couple of reasons: First of all, HTML tables are infinitely more accessible for those people who are using screen readers. Screen readers understand data arranged into tables. They don???t understand data arranged to look like a table when in fact it???s just a bunch of DIVs.

Recetasderechupete in Better UI Design: Proper Use of Tables

The second reason is that it???s just a lot more work, especially if your table is large, and you???re very limited in how you can manipulate the data inside a bunch of DIVs, compared to an actual table. There are scripts out there, already in existence, that allow you (or your visitors) to reorganize the data in your tables. Of course, most of these won???t work properly with DIVs.

Of course, you will want to use CSS to style your tables, but that???ll be covered below. The main thing you need to remember is that CSS should not be used to organize the data (that???s where HTML tables come in), only to style the data once it???s organized. Tables might seem like presentation (which, according to web standards, should always be done with CSS, not HTML), but in reality they???re organization. Organization of content is still part of content.

Still not convinced? Think of it this way: no one would propose you create faux-paragraphs with DIVs, would they? Paragraph tags exist to enclose paragraphs. So why wouldn???t you put tabular data within tags that exist specifically to enclose tabular data?

yep… no one ever said „do not use tables at all, it’s bad“ – it’s just not a good idea to use layout-tables like ..well, back then. Using tables for pure data i.e. is perfect. Do it!

more links:
http://www.noupe.com/javascript/jquery-html-table-toolbox.html
http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
http://www.w3.org/TR/CSS2/tables.html

Magst Du diesen Artikel?
0

Schreibe eine Antwort

Pflichtfelder sind mit * markiert.