MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

This translation is incomplete. Please help translate this article from English.

Estilitzar una taula HTML no és la feina més glamurosa del món, però de vegades hem de fer-ho. Aquest article proporciona una guia per fer que les taules HTML es vegin bé, amb algunes de les característiques detallades en els articles anteriors.

Requisits previs: Conceptes bàsics d'HTML (estudi Introducció a HTML), taules HTML (vegeu el mòdul de taules HTML (TBD)) i una idea de com funciona CSS (estudi Introducció a CSS.)
Objectiu: Aprendre a dissenyar amb eficàcia taules HTML.

Una taula HTML típica

Comencem mirant una taula HTML típica. Bé, dic que és típic - ja que la majoria d'exemples de taula HTML són sobre les sabates, el clima o els empleats; hem decidit fer les coses més interessants, fent-les sobre les famoses bandes punk del Regne Unit. El marcat sembla així:

<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>

La taula està ben marcada, fàcilment estilitzable i accessible, gràcies a funcions com scope, , summary, <thead>, <tbody>, etc. Desafortunadament, no es veu bé quan es representa a la pantalla (vegeu-la en viu a punk-bands-unstyled.html):

Sembla apretat, difícil de llegir i avorrit. Hem d'utilitzar CSS per solucionar-ho.

Aprenentatge actiu: Estilitzar la nostra taula

En aquesta secció d'aprenentatge actiu, treballarem amb l'estil del nostre exemple de taula junts.

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

Espaiat i disseny

El primer que hem de fer és ordenar l'espaiat/disseny - l'estil de taula predeterminat és tan estret!. Per a això, afegiu el següent CSS al vostre 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 a destacar són les següents:

  • Un valor fixed a table-layout, generalment és una bona idea per establir a la taula, ja que fa que la taula es comporti una mica més de manera predeterminada per defecte. Normalment, les columnes de la taula tendeixen a ser dimensionades segons la quantitat de contingut que contenen, el que produeix resultats estranys. Amb table-layout: fixed, podeu dimensionar les columnes segons l'ample dels seus encapçalaments i, a continuació, tractar el seu contingut segons correspongui. Per aquest motiu, hem seleccionat els quatre encapçalaments diferents amb el selector th:nth-child(n) (:nth-child) ("Seleccioneu el nth fill que es un element <th> en una seqüència, dins d'un element <thead> i se'ls assigna un percentatge d'ample. L'ample de la columna sencera segueix l'amplada del seu encapçalament, el que fa que sigui una bona forma de dimensionar les columnes de la taula. Chris Coyier analitza aquesta tècnica amb més detall en Fixed Table Layouts.

    Ho hem fet juntament amb un width del 100%, el que significa que la taula omplirà qualsevol contenidor que s'hi inclogui i que sigui molt sensible (tot i que encara necessitaríeu més treball per conseguir un bon aspecte en l'ample de pantalla estreta).
  • Un valor collapse a border-collapse és una pràctica estàndard recomanada per a qualsevol esforç d'estil de taula. De manera predeterminada, quan es configuran les vores dels elements de la taula, totes tindran espai entre elles, tal com es mostra a la imatge de sota: Això no sembla molt agradable (encara que potser sigui l'aspecte que vulgueu, qui sap?) Amb border-collapse: collapse; establert, les vores colapsen en una, que es veu molt millor:
  • Hem posat una border al voltant de tota la taula, la qual cosa és necessària perquè farem unes quantes vores al voltant de la capçalera de la taula i del peu de pàgina més endavant - sembla molt estrany i inconnex quan no té tota la vora exterior de la taula i acabar amb llacunes.
  • Hem establert alguns padding en els elements <th> i <td> - això proporciona als elements de dades un espai per respirar, fent que la taula es vegi molt més llegible.

En aquest punt, la nostra taula sembla molt millor:

Algunes tipografies senzilles

Ara farem que el nostre tipus se solucioni una mica.

Abans de res, hem trobat una font a Google Fonts adequada per a una taula sobre bandes punk. Podeu anar-hi i trobar-ne un altre si ho voleu; Simplement haureu de reemplaçar l'element <link> proporcionat i la declaració personalitzada font-family amb les fonts de Google que us ofereix.

Primer, afegiu el següent element <link> a la capçalera HTML, just a sobre de l'element <link> existent:

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

Ara afegiu el següent CSS al vostre fitxer style.css, per sota de l'anterior afegit:

/* 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;
}

Aquí no hi ha res específic de taules; en general estem ajustant l'estil de les fonts per facilitar-ne la lectura:

  • Hem establert una pila de fonts sans-serif global ; Aquesta és una elecció purament estilística. També hem establert la nostra font personalitzada als encapçalaments dins dels elements <thead> i <tfoot>, per un aspecte simpàtic grungy, punky.
  • Hem establert letter-spacing als encapçalaments i cel·les, ja que considerem que és útil per a la llegibilitat. Una vegada més, la majoria és una elecció estilística.
  • Hem alineat el centre del text en les cel·les de la taula dins de <tbody> perquè s'alineïn amb els encapçalaments. De forma predeterminada, les cel·les reben un valor text-align left, i els encapçalaments reben un valor center, però en general sembla millor tenir les alineacions iguals per a tots dos. El pes en negreta predeterminat a les fonts dels encapçalaments és suficient per diferenciar-ne l'aspecte.
  • Hem alineat a la dreta l'encapçalament dins de <tfoot> de manera que s'associï visualment millor amb el seus punts de dades.

El resultat sembla una mica més net:

Gràfics i colors

Ara en gràfics i colors! Com que la taula està plena de punk i actitud, hem de donar-li un estil imponent brillant per adaptar-se. No us preocupeu, no haureu de fer les vostres taules sorolloses - podeu optar per alguna cosa més subtil i de bon gust.

Comenceu afegint el següent CSS al vostre fitxer style.css, de nou, a la part inferior:

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;
}

De nou, aquí no hi ha res específic de taules, però val la pena observar algunes coses.

Hem afegit una background-image a <thead> i <tfoot> i hem canviat el color de tot el text dins de la capçalera i el peu de pàgina a blanc (i li hem donat un text-shadow) pel que és llegible. Sempre heu d'assegurar-vos que el text contrasta bé amb el fons, de manera que es pogui llegir.

També hem afegit un gradient lineal als elements <th> i <td> dins de l'encapçalat i el peu de pàgina per obtenir una bona textura, a més d'oferir aquests elements, una vora porpra brillant. És útil tenir diversos elements niats disponibles perquè pugueu superposar els estils de capa un damunt de l'altre. Sí, podríem haver posat la imatge de fons i el gradient lineal en els elements <thead> i <tfoot> utilitzant múltiples imatges de fons, però vam decidir fer-ho per separat en benefici dels navegadors antics que no admeten diverses imatges de fons o degradats lineals.

Ratlles de zebra

Volíem dedicar una secció separada per mostrar-vos com implementar ratlles de zebra (zebra stripes) - alternant files de color que facin més fàcil d'analitzar i llegir les diferents files de dades de la vostra taula. Afegiu el següent CSS a la part inferior del vostre 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;
}
  • Anteriorment veieu el selector :nth-child utilitzat per seleccionar elements fills específics. També es pot donar una fórmula com a paràmetre, de manera que es selecciona una seqüència d'elements. La fórmula 2n-1 podria seleccionar tots els fills imparells (1, 3, 5, etc.) i la fórmula 2n seleccionaria a tots els fills de nombres parells (2, 4, 6, etc.). Hem utilitzat les paraules clau odd i even en el nostre codi, que fan exactament les mateixes coses que les fórmules abans esmentades. En aquest cas estem donant a les files paris i imparells diferents colors (sensacional)..
  • També hem afegit un mosaic de fons que es repeteix a totes les files del cos, que és només una mica de soroll (un semi-transparent .png amb una mica de distorsió visual en ell) per proporcionar una mica de textura.
  • Finalment, hem donat a la taula sencera un color de fons sòlid perquè els navegadors que no admetin el selector :nth-child encara tinguin un fons per a les files del cos.

Aquesta explosió de color dóna com a resultat:

Ara, això pot ser una mica excessiu i no al vostre gust, però el punt que estem tractant de fer aquí és que les taules no han de ser avorrides i acadèmiques.

Estilitzar el títol (caption)

Hi ha una última cosa per fer amb la nostra taula - estil de títol. Per fer-ho, afegiu el 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 excepcional, tret de la propietat caption-side, a la qual se li ha donat un valor bottom. Això fa que el títol (caption) es posicioni a la part inferior de la taula, que juntament amb les altres declaracions ens ofereix aquest aspecte final (veure-ho en directe a punk-bands-complete.html):

Aprenentatge actiu: Dissenyar la vostra pròpia taula

En aquest punt, ens agradaria que prenguéssiu el nostre HTML d'exemple (o feu servir el vostre pròpi!) i estilitzar-ho per fer alguna cosa molt millor dissenyat i menys cridanera que la nostra taula.

Consells ràpids d'estil de taula

Abans de continuar, hem pensat proporcionar-vos una llista breu dels punts més útils que s'il·lustren a dalt:

  • Feu que el marcatge de la taula sigui el més senzill possible i que les coses siguin flexibles, p. ex. utilitzant percentatges, de manera que el disseny és més sensible.
  • Utilitzeu table-layout: fixed per crear un disseny de taula més predictible que us permeti establir fàcilment els amples de columna configurant width en els seus encapçalaments (<th>).
  • Utilitzeu border-collapse: collapse per fer que les vores dels elements de la taula es colapsin entre si, produint un aspecte més net i fàcil de controlar.
  • Utilitzeu <thead>, <tbody> i <tfoot> per dividir la taula en trossos lògics i proporcionar llocs addicionals per aplicar CSS, de manera que és més fàcil per als estils de capa, unes sobre les altres si és necessari.
  • Utilitzeu les ratlles de zebra per fer que les files alternatives siguin més fàcils de llegir.
  • Utilitzeu text-align per alinear el text <th> i <td>, per fer les coses més netes i fàcils de seguir.

Resum

Amb les emocionants vertiginoses altures de les taules d'estil, ara darrere nostre, necessitem una altra cosa per ocupar el nostre temps. No tingueu por - el proper capítol ofereix una ullada a alguns efectes avançats de la caixa, alguns dels quals només han desembarcat en navegadors mes recents (com ara modes de combinació i filtres), i alguns d'ells estan més establerts (com ara ombres de caixa).

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,