Taules

Aquesta és la 13th secció del tutorial CSS Getting Started tutorial; descriu selectors més avançats, i algunes formes específiques en el disseny de taules. Es crea un nou document d'exemple que conté una taula, i un full d'estil per a això.

Informació: Taules

Una taula és una disposició de la informació en una reixeta rectangular. Algunes taules poden ser complexes, i per a taules complexes, diferents navegadors poden donar resultats diferents.

En dissenyar el vostre document, utilitzeu una taula per expressar les relacions entre els elements d'informació. Llavors no importa si els diferents navegadors presenten la informació de manera lleugerament diferent, ja que el significat segueix sent clar.

No utilitzeu taules en formes inusuals per produir determinats dissenys visuals. Les tècniques de la pàgina anterior d'aquest tutorial (Disseny) són millors per a aquest propòsit.

Estructura de la taula

En una taula, cada peça d'informació es mostra en una cel·la.

Les cel·les en una línia de la pàgina constitueix una fila.

En algunes taules, les files poden ser agrupades. Un grup especial de files en l'inici de la taula és la capçalera (header). Un grup especial de files al final de la taula és el peu de pàgina (footer). Les principals files de la taula són el cos (body), i que també podrien estar en grups.

Les cel·les en una línia de la pàgina conformen una columna, però les columnes tenen un ús limitat en la CSS de les taules.

Exemple

La taula de Selectors basats en relacion en la pàgina Selectors té deu cel·les en cinc files.

La primera fila és la capçalera. Les altres quatre files són el cos. No hi ha peu de pàgina.

Té dues columnes.

Aquest tutorial només cobreix taules simples, on els resultats són bastant predictibles. En una taula simple, cada cel·la ocupa només una fila i columna. Es pot utilitzar CSS per a taules complexes en les cel·les que s'estenen (s'estenen a través) més d'una fila o columna, però les taules com aquestes estan més enllà de l'abast d'aquest tutorial bàsic.

Vores

Les cel·les no tenen marges.

Les cel·les tenen vores i farciment. Per defecte, les vores estan separades pel valor de la propietat border-spacing de la taula. També podeu eliminar completament l'espai mitjançant l'establiment de la propietat border-collapse de la taula a col·lapsar (collapse).

Exemple

Aquí hi ha tres taules.

La taula de l'esquerra té 0,5 em espaiat de vores. La taula del centre té espaiat de vores zero. La taula de la dreta ha col·lapsat les vores:

Llegendes

Un element <caption> és una etiqueta que s'aplica a tota la taula. Per defecte, es mostra a la part superior de la taula.

Per moure'l a la part inferior, establiu la seva  propietat caption-side a baix. La propietat s'hereta, de manera que, alternativament, es pot establir sobre la taula o un altre element antecessor.

Per l'estil del text de la Llegenda, utilitzeu qualsevol de les propietats usuals de text.

Exemple

Aquesta taula té una llegenda a la part inferior.

#demo-table > caption {
  caption-side: bottom;
  font-style: italic;
  text-align: right;
}

Cel·les buides

Es poden mostrar cel·les buides (és a dir, les seves vores i fons) especificant empty-cells: show; per a l'element de la taula.

Es poden amagar mitjançant l'especificació empty-cells: hide;. Llavors, si l'element pare d'una cel·la té un fons, es mostra a través de la cel.la buida.

Exemple

Aquestes taules tenen un fons de color verd pàl·lid. Les seves cel·les tenen un fons gris clar i unes vores gris fosc.

A la taula de l'esquerra, es mostra la cel·la buida. A la dreta, està oculta:

  Hearts
Diamonds Spades
  Hearts
Diamonds Spades
Detalls

Per obtenir informació detallada sobre les taules, vegeu Taules en l'especificació CSS.

La informació no va més enllà d'aquest tutorial, però no cobreix les diferències entre els navegadors que poden afectar a taules complexes.

Acció: Estil d'una taula

  1. Feu un nou document HTML, doc3.html. Copieu i enganxeu el contingut d'aquí, assegurant-se que es desplaça per obtenir tota ella; 
    <!DOCTYPE html>
<html>
  <head>
    <title>Sample document 3</title>
    <link rel="stylesheet" href="style3.css">
  </head>
  <body>
    <table id="demo-table">
      <caption>Oceans</caption>
      <thead>
        <tr>
          <th></th>
          <th>Area</th>
          <th>Mean depth</th>
        </tr>
        <tr>
          <th></th>
          <th>million km<sup>2</sup></th>
          <th>m</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Arctic</th>
          <td>13,000</td>
          <td>1,200</td>
        </tr>
        <tr>
          <th>Atlantic</th>
          <td>87,000</td>
          <td>3,900</td>
        </tr>
        <tr>
          <th>Pacific</th>
          <td>180,000</td>
          <td>4,000</td>
        </tr>
        <tr>
          <th>Indian</th>
          <td>75,000</td>
          <td>3,900</td>
        </tr>
        <tr>
          <th>Southern</th>
          <td>20,000</td>
          <td>4,500</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>Total</th>
          <td>361,000</td>
          <td></td>
        </tr>
        <tr>
          <th>Mean</th>
          <td>72,000</td>
          <td>3,800</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>
  2. Feu un nova fulla d'estil, style3.css. Copieu i enganxeu el contingut d'aquí, assegurant-se que es desplaça per obtenir tota ella; 
    /*** Style for doc3.html (Tables) ***/

#demo-table {
  font: 100% sans-serif;
  background-color: #efe;
  border-collapse: collapse;
  empty-cells: show;
  border: 1px solid #7a7;
}

#demo-table > caption {
  text-align: left;
  font-weight: bold;
  font-size: 200%;
  border-bottom: .2em solid #4ca;
  margin-bottom: .5em;
}


/* basic shared rules */
#demo-table th,
#demo-table td {
  text-align: right;
  padding-right: .5em;
}

#demo-table th {
  font-weight: bold;
  padding-left: .5em;
}


/* header */
#demo-table > thead > tr:first-child > th {
  text-align: center;
  color: blue;
}

#demo-table > thead > tr + tr > th {
  font-style: italic;
  color: gray;
}

/* fix size of superscript */
#demo-table sup {
  font-size: 75%;
}

/* body */
#demo-table td {
  background-color: #cef;
  padding:.5em .5em .5em 3em;
}

#demo-table tbody th:after {
  content: ":";
}


/* footer */
#demo-table tfoot {
  font-weight: bold;
}

#demo-table tfoot th {
  color: blue;
}

#demo-table tfoot th:after {
  content: ":";
}

#demo-table > tfoot td {
  background-color: #cee;
}

#demo-table > tfoot > tr:first-child td {
  border-top: .2em solid #7a7;
}
  3. Obriu el document en el navegador. Ha de tenir un aspecte molt similar a aquest:
  4. Compareu les regles de la fulla d'estil amb la taula que es mostra, per assegurar-se que compreneu l'efecte de cada regla. Si trobeu una regla que no esteu segur sobre ella, comentar-la i refresqueu el navegador per veure què passa. Aquí hi ha algunes notes sobre aquesta taula:
    • La llegenda es troba fora de la vora de la taula.
    • Si teniu una mida de punt mínim establert en les Opcions, podria afectar el superíndex en km2.
    • Hi ha tres cel·les buides. Dos d'elles permeten mostrar el fons de la taula a través. El tercer té un fons i una vora superior.
    • Els dos punts son afegits per la fulla d'estil.
Repte

Modifiqueu la fulla d'estils per fer que la taula tingui aquest aspecte:

  Area Mean depth
  million km2 m
Arctic: 13,000 1,200
Atlantic: 87,000 3,900
Pacific: 180,000 4,000
Indian: 75,000 3,900
Southern: 20,000 4,500
Total: 361,000  
Mean: 72,000 3,800

Oceans

Veure la solució per el repte.

I ara què?

Aquesta és l'última pàgina d'aquest tutorial que se centra en les propietats i els valors CSS. Per a un resum complet de les propietats i valors, vegeu Taula de propietats completa en l'especificació CSS

En la següent pàgina es veu de nou el propòsit i l'estructura de les fulles d'estil CSS.