Taules – Desenvolupament web amb HTML i CSS

Les taules s’han fet servir molt en el desenvolupament web per a maquetar contingut, tal i com faríem en un Word per posar coses a dreta i esquerra. Però aquesta no és la seva finalitat i, per tant, no les farem servir mai amb la finalitat de canviar la disposició dels elements, sinó amb una finalitat informativa, semàntica.

Semànticament, les taules permeten mostrar informació de manera estructurada i accessible.

El navegador llegeix l’HTML de les taules i les representa visualment, però podem controlar-ne l’aparença amb CSS. A les cel·les de les taules podem afegir qualsevol tipus de contingut: text, imatges, altres taules,…

Per crear taules farem servir les següent etiquetes:

table – per indicar on comença i on acaba la taula
tr – table row: per indicar on comença i on acaba cada fila
td – table description: per indicar on comença i acaba un text descriptiu (cel·la)
th – table heading: per indicar on comença i on acaba un text que fa de capçalera (cel·la d’encapçalament)

A més, podem fer servir altres etiquetes com:

thead – per indicar on comennça i on acaba aquella fila o files que formen la capçalera de la taula
tbody – per indicar on comença i on acaba aquella fila o files que formen el cos de la taula
tfoot – per indicar on comença i on acaba aquella fila o files que formen el peu de la taula
caption – per posar un text descriptiu del contingut de la taula (un resum)

<table>
   <caption>Horaris</caption>
   <thead>
      <tr>
          <th>Línia</th>
          <th>Destí</th>
          <th>Hora</th>
          <th>Preu</th>
      </tr>
   </thead>
   <tbody>
        <tr>
           <td>S1</td>
           <td>Barcelona</td>
           <td>09:00</td>
           <td>1€</td>
       </tr>
       <tr>
          <td>S2</td>
          <td>Sabadell</td>
          <td>09:10</td>
          <td>0,5€</td>
       </tr>
    </tbody>
</table>

Horaris
Línia	Destí	Hora	Preu
S1	Barcelona	09:00	1€
S2	Sabadell	09:10	0,5€

Podem estilar les taules com ho fem amb qualsevol altre element d’HTML. Hauràs de tenir en compte:

Les taules (table) tenen, per defecte, el tipus de display «table» i la propietat «border-collapse» amb el valor «separate» (això fa que les cel·les estiguin separades unes de les altres). La majoria de reset de CSS estableixen el valor de border-collapse a «collapse»
Les files (tr) tenen, per defecte, el tipus de display «table-row»
Les cel·les (td i th) tenen, per defecte, el tipus de display «table-cell»
La capçalera (thead) té per defecte el tipus de display «table-header-group»
El cos (tbody) té per defecte el tipus de display «table-row-group»
El resum (caption) té per defecte el tipus de diplay «table-caption»

Això ho has de tenir en compte, perquè hi haurà algunes propietats que no podràs aplicar a aquests elements. Per exemple: Les files no podran tenir ni border ni margin

El número de cel·les de cada fila ha de ser sempre el mateix per a que el navegador sigui capaç de fer-la visible. Si necessitem fusionar cel·les podem fer servir els atributs «colspan» i «rowspan«

colspan indica que una cel·la s’expandeix a altres columnes
rowspan indica que una cel·la s’expandeix a altres files

<table>
   <caption>Horaris</caption>
   <thead>
      <tr>
          <th>Línia</th>
          <th>Destí</th>
          <th>Hora</th>
          <th>Preu</th>
          <th colspan="2">Descomptes</th>
      </tr>
   </thead>
   <tbody>
        <tr>
           <td rowspan="2">S1</td>
           <td>Barcelona</td>
           <td>09:00</td>
           <td>1€</td>
           <td>CJ* - 50%</td>
           <td>FM** - 33%</td>
       </tr>
       <tr>
          <!--<td>aquesta cel·la no cal</td>--> 
          <td>Sabadell</td>
          <td>09:10</td>
          <td>0,5€</td>
          <td colspan="2">Sense descomptes</td>
          <!--<td>aquesta cel·la no cal</td>-->
       </tr>
    </tbody>
    <tfoot>
       <tr>
         <td colspan="6">* CJ: Carnet Jove | ** FM: Familia nombrosa</td>
       </tr>
    </tfoot>
</table>

Horaris
Línia	Destí	Hora	Preu	Descomptes
S1	Barcelona	09:00	1€	CJ* – 50%	FM** – 33%
S1	Sabadell	09:10	0,5€	Sense descomptes
* CJ: Carnet Jove \| ** FM: Familia nombrosa

En aquest exemple, hem fet servir rowspan a la columna «Línia» i colspan a la fila del tren de les 9.10 i a la capçalera. També hem fusionat les cel·les del tfoot fent servir colspan.

Exercici

Descarrega’t aquest arxiu zip: http://user0.gesem.es/taules.zip. A dins trobaràs un document html, una fulla d’estils i un reset. Fes una taula en el document HTML amb la informació de cursos d’aquesta pàgina:

https://www.golferichs.org/categoria-curs/estiu/

Si us indica que el fitxer no és segur, és perquè no hi ha un certificat de seguretat, però podeu dir-li que el descarregui tranquilament.

Fer taules responsive

Les taules són molt útils per poder consultar informació, però a vegades s’adapten malament a dispositius petits. Una mica de CSS i alguns canvis a l’HTML són suficients per a solucionar això.

Aquest és un exemple de visualització d’una taula adaptada a diferents mides de dispositiu (el trobaràs a https://codepen.io/AllThingsSmitty/pen/MyqmdM):

Quina diferència hi ha entre una pàgina i una altra?

Primer de tot, cal tenir en compte que el codi HTML és el mateix per a les dues visualitzacions. Tota la feina la fa el CSS:

Fent canvis al display (display:block) s’ha fet que les cel·les es vegin una a sota de l’altre i que les files es puguin separar entre elles (display:block; margin-bottom:10px)
Fent servir pseudo-elements (::before o ::after) han posat a cada cel·la (mitjançant la propietat content) informació de la columna a la que pertany («Account», «Due Date»,…). Aquesta informació la obtenen de l’atribut data de cada cel·la.
Eliminant el display (display:none) de la capçalera de la taula (thead) l’han amagat en mòbils (bé, a l’exemple ho fan una mica més complicat, però això ja serviria)

Atribut data

Un atribut que es fa servir molt en desenvolupament web és l’atribut «data». Aquest atribut es forma amb el prefix «data» i un sufix amb una paraula clau. Aquesta paraula clau ens la podem inventar, només hem de tenir en compte que ens hem de limitar a caràcters anglesos (ni ç, ni ñ,…). Exemple: data-content, data-label, data-id,…

L’atribut data el fem servir molt quan programem amb javascript. També el fem servir en CSS per recuperar informació de l’HTML i estilar-la.

En el HTML podem afegir aquest atribut a qualsevol element. A l’exemple ho fan així:

En aquest cas han fet servir l’atribut data amb el sufix «label» (data-label)

Al CSS podem recuperar aquest valor. A l’exemple ho fan així:

El valor d’un atribut es pot obtenir amb la funció attr(). Entre parèntesi posem el nom de l’atribut, en aquest cas *attr(data-label)*

Mitjançant media queries podem limitar els dispositius on volem que la taula canvii de format:

Exercici

Fes que la teva taula s’adapti correctament a dispositius mòbils fent servir aquest mètode