You are on the editable version of MDN Web Docs

View as an MDN Web Docs user: https://developer.mozilla.org/ca/docs/Learn/CSS/Building_blocks/Styling_tables

Aplicar estil a una taula HTML no és la feina més glamurosa del món, però tots ho hem de fer en algun moment. Aquest article proporciona una guia d’aplicació d’estil a les taules HTML per a donar-los un aspecte presentable.

Requisits previs: Conceptes bàsics d'HTML (consulta la Introducció a l’HTML), coneixements de taules HTML (consulta el mòdul de taules HTML (TBD)) i nocions de com funciona el CSS (consulta la Introducció al CSS.)
Objectiu: Aprendre a aplicar estil a una taula HTML.

Una taula HTML típica

Comencem amb una taula HTML típica. Bé, diem que és típica, tot i que la majoria d'exemples de taula HTML són sobre sabates, dades climàtiques o empleats, i nosaltres, en canvi, hem decidit fer-ne una de més interessant, sobre bandes punk famoses del Regne Unit. El codi d’etiquetatge presenta aquesta aspecte:

<table summary="The most famous UK punk bands">
  <caption>A summary of the UK's most famous punk bands</caption>
  <thead>
    <tr>
      <th scope="col">Band</th>
      <th scope="col">Year formed</th>
      <th scope="col">No. of Albums</th>
      <th scope="col">Most famous song</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Buzzcocks</th>
      <td>1976</td>
      <td>9</td>
      <td>Ever fallen in love (with someone you shouldn't've)</td>
    </tr>
    <tr>
      <th scope="row">The Clash</th>
      <td>1976</td>
      <td>6</td>
      <td>London Calling</td>
    </tr>
       
      ... some rows removed for brevity

    <tr>
      <th scope="row">The Stranglers</th>
      <td>1974</td>
      <td>17</td>
      <td>No More Heroes</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Total albums</th>
      <td colspan="2">77</td>
    </tr>
  </tfoot>
</table>

El codi d’etiquetatge de la taula és correcte, permet aplicar-hi estil sense problemes i és accessible, gràcies a funcions com scope, <caption>, summary, <thead>, <tbody>, etc. Malauradament, presenta un aspecte poc agradable quan es representa a la pantalla (observa-la en viu en el fitxer punk-bands-unstyled.html):

Amb l’estil per defecte que hi aplica el navegador, la taula presenta un aspecte atapeït i poc llegible, i resulta més aviat avorrida. Per a posar-hi remei, hem d'utilitzar una mica de CSS.

Aprenentatge actiu: Aplica estil a la taula

En aquesta secció d'aprenentatge actiu, treballarem junts per a aplicar estil a la nostra taula d’exemple.

  1. Per començar, fes una còpia local del fitxer amb el codi d’etiquetatge d'exemple, descarrega’t les dues imatges (noise i leopardskin), i posa els tres fitxers resultants en un directori de treball en algun lloc del teu ordinador local.
  2. A continuació, crea un fitxer nou anomenat style.css i desa’l al mateix directori que els altres fitxers.
  3. Enllaça el CSS amb l'HTML, i posa-hi la línia de codi HTML següent dins de l’element <head>:
    <link href="style.css" rel="stylesheet" type="text/css">

Espaiat i disseny de la pàgina

El primer que cal és organitzar l'espaiat i el disseny de la pàgina, perquè l'estil de taula predeterminat és molt atapeït. Afegeix, doncs, el codi CSS següent al teu fitxer style.css:

/* spacing */

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th, td {
  padding: 20px;
}

Les parts més importants que destaquem són les següents:

  • Assignar el valor fixed a la propietat table-layout de la taula en general és una bona idea perquè fa el comportament per defecte de la taula més previsible. Normalment, les columnes de la taula adquireixen una mida segons la quantitat de contingut que inclouen, i això pot provocar resultats estranys. Amb la propietat table-layout: fixed pots donar a les columnes una mida segons l'amplada de les capçaleres, i a continuació tractar-ne el contingut com sigui necessari. Per aquest motiu hem seleccionat les quatre capçaleres amb el selector thead th:nth-child(n) (:nth-child) («selecciona l’n-èsim fill d’una seqüència que és un element <th> que hi ha dins d'un element <thead>») i els hem assignat una amplada en percentatge. L'amplada de la columna sencera segueix l'amplada de la capçalera, de manera que és una bona manera de configurar la mida de les columnes de la taula. Chris Coyier analitza aquesta tècnica amb més detall en Fixed table layouts.

    Hem emparellat això amb una amplada (width) del 100%, que significa que la taula ocuparà tota l’amplada del contenidor en què estigui continguda i serà molt adaptativa (tot i que encara t’ho hauries de treballar una mica si vols aconseguir que la taula presenti un bon aspecte amb amplades de pantalla estretes).
  • Assignar un valor collapse a la propietat border-collapse és una bona pràctica habitual en qualsevol intent d’aplicació d’estil a una taula. Quan es configuren les vores dels elements de la taula, per defecte totes deixen un espai entre elles, com es mostra a la imatge següent: Això no resulta gaire agradable (o potser és l'aspecte que cerques, qui sap?). Amb la declaració border-collapse: collapse;, les vores s’ajunten en una de sola, i l’aspecte és més polit:
  • Hem afegit una vora (border) al voltant de tota la taula, i més endavant també posarem vores al voltant de la capçalera de la taula i del peu de pàgina; ho fem perquè fa molt estrany si no hi ha una vora exterior que englobi tota la taula; pot resultar descontextualitzada i poden quedar-hi buits.
  • Hem establert una mica d’àrea de farciment (padding) en els elements <th> i <td>; això proporciona als elements de dades un espai perquè respirin, i millora força la llegibilitat de la taula.

En aquest punt, la nostra taula presenta un aspecte molt més polit:

Alguns tipus de lletra senzills

Ara organitzarem una mica el nostre text.

En primer lloc hem trobat un tipus de lletra a Google Fonts que resulta adequat per a una taula sobre bandes punk. Si vols, hi pots anar i en tries una altra; només cal que substitueixis l'element <link> que et proporcionem i la declaració font-family particularitzada que Google Fonts et proporciona.

Afegeix l’element <link> següent a la capçalera (head) de l’HTML, just a sobre de l'element <link>:

<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>

A continuació afegeix al teu fitxer style.css el CSS següent, a sota del que has afegit abans:

/* typography */

html {
  font-family: 'helvetica neue', helvetica, arial, sans-serif;
}

thead th, tfoot th {
  font-family: 'Rock Salt', cursive;
}

th {
  letter-spacing: 2px;
}

td {
  letter-spacing: 1px;
}

tbody td {
  text-align: center;
}

tfoot th {
  text-align: right;
}

Fins aquí no hi ha res que sigui específicament de taules; en general, configurem un estil de lletra que en faciliti la lectura:

  • Hem configurat una llista de tipus de lletra sans-serif per al text general; aquesta elecció és purament d’estil. També hem configurat el tipus de lletra personalitzat per als elements de capçalera <thead> i <tfoot>, que hi dona un simpàtic aspecte grungy punky.
  • Hem establert un espai d’interlineat (letter-spacing) a les capçaleres i les cel·les, perquè creiem que afavoreix la llegibilitat. Una vegada més, es tracta sobretot d’una elecció d’estil.
  • Hem centrat el text de les cel·les de la taula que hi ha dins de <tbody> perquè estiguin alineats amb els de les capçaleres, perquè de manera predeterminada les cel·les tenen assignat un valor text-align left, i les capçaleres un valor center; però en general sembla que té un aspecte més agradable si els textos dels dos tipus d’element estan alineats de la mateixa manera; el gruix de la negreta que té la lletra de les capçaleres per defecte és prou per a diferenciar-ne l'aspecte.
  • Hem alineat a la dreta el text de la capçalera <tfoot> perquè tingui una associació visual més adequada amb la dada que s’hi correspon.

El resultat presenta un aspecte una mica més net:

Gràfics i colors

Ara passem als gràfics i els colors! Com que la taula desprèn un aire i una actitud punk, hi hem de donar un potent estil marcat. Ara bé, no totes les teves taules hauran de tenir un aspecte tan extrem, també pots fer alguna cosa més subtil i amb més bon gust.

Comença per afegir al teu fitxer style.css el CSS següent, també al final de tot:

thead, tfoot {
  background: url(leopardskin.jpg);
  color: white;
  text-shadow: 1px 1px 1px black;
}

thead th, tfoot th, tfoot td {
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
  border: 3px solid purple;
}

Fins aquí tampoc no hi ha res que sigui específicament de taules, però val la pena observar alguns aspectes.

Hem afegit una imatge de fons amb la propietat background-image a les capçaleres <thead> i <tfoot> i hem canviat el color (color) de tot el text de les capçaleres i el peu de pàgina pel blanc (i hi hem afegit una ombra amb text-shadow), i així resulta més llegible. Sempre t’has d’assegurar que el text contrasta prou amb el fons i es pot llegir bé.

També hem afegit un degradat lineal en els elements <th> i <td> de les capçaleres i el peu de pàgina per a obtenir-hi una mica de textura, i hem donat a aquests elements una fantàstica vora porpra. Resulta útil disposar diversos elements imbricats i poder superposar els estils de capa un damunt de l'altre. Sí, hauríem pogut posar la imatge de fons i el degradat lineal dels elements <thead> i <tfoot> amb la tècnica de les múltiples imatges de fons, però hem decidit fer-ho per separat perquè els navegadors antics no admeten imatges de fons múltiples ni degradats lineals.

Ratlles de zebra

Hem volgut dedicar una secció independent a mostrar-te com s’implementen les ratlles de zebra (zebra stripes), que alternen files de color que faciliten l’anàlisi i la llegibilitat de les diferents files de dades de la taula. Afegeix el CSS següent a la part inferior del teu fitxer style.css:

tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}

tbody tr:nth-child(even) {
  background-color: #e495e4;
}

tbody tr {
  background-image: url(noise.png);
}

table {
  background-color: #ff33cc;
}
  • Abans has vist el selector :nth-child, que hem utilitzat per a seleccionar elements fills específics. També hi pots donar una fórmula com a paràmetre, i aleshores es selecciona una seqüència d'elements. La fórmula 2n-1 seleccionaria tots els fills imparells (1, 3, 5, etc.), i la fórmula 2n seleccionaria tots els fills parells (2, 4, 6, etc.). En el nostre codi hem utilitzat les paraules clau odd i even, que fan exactament el mateix que aquelles fórmules. En aquest cas, donem a les files parelles i imparelles uns (esborronadors) colors diferents.
  • També hem afegit un mosaic de fons que es repeteix en totes les files del cos; només una mica de soroll (un .png semitransparent amb un xic de distorsió visual) que proporciona un pèl de textura.
  • Per acabar, hem donat a la taula sencera un color de fons sòlid perquè els navegadors que no admeten el selector :nth-child encara tinguin un fons per a les files del cos.

Aquesta explosió de color dona com a resultat el següent:

Bé, això podria resultar una mica excessiu i pot ser que no sigui del tot del teu gust, però el punt que volem tractar aquí és que les taules no tenen per què ser avorrides ni acadèmiques.

Aplicar estil al títol (caption)

Encara podem fer una darrera cosa amb la nostra taula, aplicar estil al títol (caption). Afegeix el CSS següent a la part inferior del fitxer style.css:

caption {
  font-family: 'Rock Salt', cursive;
  padding: 20px;
  font-style: italic;
  caption-side: bottom;
  color: #666;
  text-align: right;
  letter-spacing: 1px;
}

Aquí no hi ha res d’excepcional, tret de la propietat caption-side, a la qual hem donat un valor bottom. Això posa el títol (caption) a la part inferior de la taula, i amb les altres declaracions ens ofereix aquest aspecte final (consulta-ho en directe en el fitxer punk-bands-complete.html):

Aprenentatge actiu: Dissenya la teva taula

En aquest punt, volem que prenguis el nostre HTML d'exemple (o fes-ne servir un de teu propi) i aplica-hi estil per a obtenir alguna cosa no tan cridanera i més refinada que la nostra taula.

Consells ràpids d’aplicació d’estil a una taula

Abans de continuar, hem pensat de proporcionar-te una llista breu dels punts més útils que hem exposat a dalt:

  • Fes el codi d’etiquetatge de la taula tan senzill com sigui possible i empra estructures de comportament flexible (p. ex., utilitza percentatges) per a aconseguir un disseny adaptatiu.
  • Aconsegueix un comportament de la taula més previsible amb la declaració table-layout: fixed, que et permet establir amb facilitat les amplades de columna a partir de configurar l’amplada (width) de les capçaleres (<th>).
  • Fes servir la declaració border-collapse: collapse per a ajuntar les vores dels elements de la taula en una sola línia i aconseguir un aspecte més net i fàcil de controlar.
  • Utilitza els elements <thead>, <tbody> i <tfoot> per a dividir la taula en blocs lògics i obtenir més elements en què aplicar CSS, que et permetin aplicar estils per capes i sobreposar-les les unes sobre les altres, si cal.
  • Fes servir ratlles de zebra en files alternatives per a millorar la llegibilitat.
  • Utilitza la propietat text-align per a alinear el text dels elements <th> i <td>, i obtenir un aspecte més net i endreçat.

Resum

Ara que deixem enrere l’aplicació d’estil a les taules, hem d’ocupar el temps en una altra cosa. L’article següent explica com depurar el CSS, com resoldre problemes com ara dissenys de pàgines web que no presenten l’aspecte que se n’espera, o propietats que no s’apliquen quan creus que ho haurien de fer.

Document Tags and Contributors

Last updated by: editorUOC,