IMPORTANT: Per accedir als fitxer de subversion: (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

Guia recomanada amb tot el que cal saber sobre les taules:

When To Use Tables

It's a good time to take a break and discuss the when of tables. Perhaps you've heard the generic advice: tables are for tabular data (see the first sentence of this blog post). The "would this make sense in a spreadsheet?" test is usually appropriate.

What kinds of things are appropriate in tables? Here are some: a plan/pricing/features comparison, bowling scores, an internal grid of employee data, financial data, a calendar, the nutrition facts information panel, a logic puzzle solver, etc.

You might occasionally hear: tables are unsemantic. That's not true - they semantically indicate tabular data. Tables are the right choice when that is the case.

When NOT To Use Tables

An inappropriate use for tables is for layout. That may seem counter-intuitive. At a glance at how tables work may make them seem ideal for layout. Easy to control, extremely logical, predictable, and not-at-all fragile.

There are some significant problems with using tables for layout though. First, HTML tags mean things. As we covered, table elements semantically describe tabular data. Using them for anything else is a breach of semantic duty. You aren't going to get a fine in the mail, but you aren't getting as much value from your HTML as you could.

Talking about semantics is a little difficult sometimes (some reads: 1, 2, 3, 4, 5), so let's talk about something we all generally agree on (even if we aren't as good as it as we want to be): websites should be accessible. One part of accessibility is screen readers. Screen readers read tables from top to bottom, left to right. That means the order of how your site is presented is dictated by the table structure, which is dictated by visual choices not accessibility choices. Not to mention a screen reader may even announce the start of tabular data which would be worse than useless.

Speaking of source order, that affects more than accessibility. Imagine a "sidebar on the left" layout. A table would dictate that table comes first in the source order, which while also being bad for accessibility, is likely bad for SEO as well, potentially valuing your ancillary content above primary content.

Could you fix the SEO issues by using semantic tags within the table tags? Possibly somewhat, but now you're using double the HTML. If you really need the layout abilities of a table but want to use semantic tags, see the next section. If you are somehow absolutely stuck using table tags for layout, use the ARIA role="presentation" on the table to indicate it as such.

As I write this in the latter half of 2013, tables have become far less prevalent and even appealing as a layout choice. We're seeing a lot more use of fixed and absolute positioning which you cannot do inside a table. We're seeing flexbox being awesome and being right on the edge of mainstream usability. We're seeing grid layout starting to grow up. We're seeing inline-block be used powerfully. We're seeing the fragility of floats in the olden days fade away.

Rarely do you see modern websites touch tables for layout. The last holdout is HTML emails. The landscape of what renders emails is super wide. It is everything we deal with on the web, plus the world of native apps on both mobile and desktop on operating systems new and ancient. You can do some progressive enhancement for emails, but the layout itself is still generally regarded as being safest done in tables. That is substantiated by the fact that the major email sending services still all offer templates as tables.

Presentació, estil i CSS


Boostrap/Bootstrap tables


Responsive tables

Per a un mobile first world el primer a tenir en compte és que les taules cal adaptar-les a disseny responsive (vegeu RWD). Vegem algunes qüestions a tenir en compte:


Exemple de taula responsive amb media query canviar el tipus de layout quan no hi ha prou espai:


Foundation Zurb – Lock first column

Foundation ZurbLock first column

Stack tables

Una tècnica és apilar les taules quan hi ha poc ampla de pantalla. Vegeu Stacktable.js

o altres alternatives com tablesaw:

Datatables té plugins per a suportar RWD

I concretament hi ha un per Wordpress:


Plantilles Boostrap

Plantilla AdminLTE


Vegeu article sobre Datatables


Utilitzar divs (o semantic elements) com a taules

CSS has properties to make any element you wish behave as if it was a table element. You'll need to structure them essentially as you would a table, and it will be subject to the same source-order-dependency as a table, but you can do it. I'm not crapping on it either, it's genuinely useful sometimes. If that layout style solves a problem and has no negative order implications, use it.

Don't use inline styles, but just for understanding here's how that would go:

<section style="display: table;">
  <header style="display: table-row;">
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
  <div style="display: table-row;">
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>

A handy trick here is that you don't even need the table-row element in there if you don't want. A bunch of display: table-cell; elements that are children of a display: table; element will behave like they are all in one row.

You always alter the display property of the element to get the table-style behavior. Here's the values:

display: table                /* <table>     */
display: table-cell           /* <td>        */
display: table-row            /* <tr>        */
display: table-column         /* <col>       */
display: table-column-group   /* <colgroup>  */
display: table-footer-group   /* <tfoot>     */
display: table-header-group   /* <thead>     */

Notice there is no <th> alternative. That is for semantic value only. It otherwise behaves just like a <td>, so, no need to replicate it in CSS.

There is also display: inline-table; which is pretty interesting. Remember we talked about how weird table elements widths are above. They are only as wide as they need to be, yet break onto new lines. It's almost like they are inline-block elements which happen to break. This makes them literally like inline-block elements, without the breaking.


Opció preferida:


i tabuleu:


Emmet is a great tool for a bunch of reasons. One of which is writing HTML abbreviations and having them expand out into real HTML. Since tables are so repetitive and verbose, Emmet is perfect for them. Emmet works on CodePen too =)

Simple four rows and four columns


Five rows with the header on the left


A row of headers on the top


Employees with incrementing IDs

table>tr>th{Name}+th{ID}+th{Favorite Color}^tr*3>td{Name}+td{$$$$$}+td{Blue}

Table with header, footer, and content


Same but with cell content in each cell

table>thead>tr>th{Header Cell}*5^^tfoot>tr>th{Footer Cell}*5^^tbody>tr*1



Normalització de taules

Els fulsl d'estil per defecte de cada navegador no implementen exactament igual les taules. Cal recordar però que eines com Bootstrap utilitzen Normalize.css per normalitzar els estils

Pricing tables

Vegeu Pricing tables

Vegeu també

Enllaços externs