La presentació de les cel·les d'una taula, es pot treballar com qualsevol altre etiqueta d'un document XHTML. Es poden aplicar també les propietats dels colors o imatges de fons, les fonts, la mida i alineació del text, així com l'amplada i els marges, etc.
L'estructura i divisions d'una taula permeten definir els estils per a tota la taula sencera; per a les files o grups de files, com els grups de la capçalera, del cos o del peu de la taula; per a les columnes o per a les diferents cel·les individualment.
A continuació s'ha fet un recull dels atributs més habituals per definir l'estil d'una taula, i s'explica breument com poden ser utilitzats. Aquests atributs, però, no són exclusius d'uns dels elements, ja que poden ser utilitzats per a més d'un tipus d'element.
Recordeu la propietat de cascada dels fulls d'estil, CSS: les característiques determinades en un element de rang superior, són heretades pels elements inferiors. Així, fàcilment, es pot determinar l'estructura i aparença general d'una taula. Posteriorment, es pot anar determinant i concretant aplicant aquestes propietats als elements de rang inferior.
<caption> ... </caption>
Determina les propietats del títol de la taula. Es tracta d'un atribut específic que no es pot aplicar a d'altres etiquetes.
caption-side
: Aliniació respecte a la taula, del nom o títol que se li ha assignat.
top
bottom
left
right
Es podria començar a escriure el codi del CSS de la taula per aquest element. Es aconsellable que mentre escriviu el codi aneu provant les diferents opcions per cada propietat i observeu el resultats per a cada opció.
caption{ caption-side: top; height: 30px; }
<table> ... </table>
width
: representa l'amplada que ocupa la taula. Es pot especificar en tant per cent o en pixels.
%
, es tracta d'una amplada variable, la taula ocuparà el %
proporcional a la mida de la finestra del navegador.px
. es crea una taula de mida fixa. Per exemple, si poseu 750px
, la taula ocupara sempre 750px
independentment de la mida de la finestra del navegador.table-layout
: Propietat que determina un algoritme per la distribució de les taules i les files.
fixed
: permet que el navegador renderitzi més ràpidament el contingut de la taula.La presentació horitzontal només depèn de l'amplada de la taula i les columnes, no del contingut de la taula. auto
: l'amplada de la columna es determina per l'amplada més gran del contingut indivisible dintre de la cel·la. El navegador ha de llegir tota la taula abans de mostrar-la.border-collapse
: Les vores a les taules són una mica més complexes que en una caixa normal. Per a donar format a totes les vores, cal aplicar la propietat de la vora a totes les cel·les de la taula.
collapse
: una línia senzilla i única, d'aquesta manera les cel·les comparteixen vores. separate
: dues línies separades, seguint la separació estàndard del llenguatge XHTML. border
: Serveix per determinar el gruix de la línia de la vora de la taula. Es pot determinar en px
o en em
.style
: determina l'estil de la línea de les vores de la taula: none
, dotted
, dashed
, solid
, double
, grove
, ridge
, inset
, outset
rgb
: combinació dels valors vermell (red), verd (green) i blau (blue).#
: notació l'hexagesimal de la combinació dels colors vermell, verd i blau.border-spacing
: La propietat d'espaiat de la vora especifica la distància entre les vores de cèl·les que són adjacents. Aquesta propietat, només és significativa quan es tracta de vores separades, és a dir, l'atribut border-collapse
està activat com a separate
.
margin/padding
: Es pot ajustar l'espai entre línies utilitzant les propietats:
margin
: indica l'espai entre les vores de les cel·les.padding
: indica el marge interior de les cel·les.background
: color de fons de la taula. El color queda determinat per la notació rgb
o bé #
, l'hexagesimal.
caption{ caption-side: top; height: 30px; } table{ width: 98%; table-layout: fixed; border-collapse: collapse; border: 4px double #484848; padding: 4px; }
<thead> ... </thead> <tfoot> ... </tfoot> <tbody> ... </tbody>
Aquestes etiquetes permeten agrupar les files segons on estiguin situades a la taula: capçalera, peu o cos de la taula. Com a element superior, permet determinar les característiques generals de cada grup. Així es pot escriure el codi agrupant les diferents files, segons l'estructura de la taula:
caption{ caption-side: top; height: 30px; } table{ width: 98%; table-layout: fixed; border-collapse: collapse; border: 4px double #484848; padding: 4px; } thead{ background: #bebebe; border: 1px solid #484848; } tfoot{ background:#bebebe; border: 1px solid #bebebe; } tbody{ background: #dedede; border: 1px solid #484848; vertical-align: middle; }
<tr> </tr> <th> </th> <td> </td>
Aquests elements delimiten el contingut de la fila. Les propietats d'aquesta etiqueta afecten a totes les cel·les de la mateixa fila.
width
i height
: representa l'amplada i l'alçada que ocupen les cel·les. Es pot especificar en tant per cent o en pixels.
%
, es tracta d'una amplada variable, la taula ocupara el % proporcional a la mida de la finestra del navegador. px
. es crea una taula de mida fixa. Per exemple, si poseu 750px, la taula ocupara sempre 750px independentment de la mida de la finestra del navegador. vertical-align
: Alineació vertical del text dintre de la fila o cel·la.
top
middle
bottom
baseline
text-align
: Alineació horitzontal del text dintre de la fila.
center
right
justify
left
background
: color de fons de totes les cel·les de la fila.
Ara cal afegir les característiques específiques d'algunes de les línies per acabar de donar forma a l'estructura de la taula.
caption{ caption-side: top; height: 30px; } table{ width: 98%; table-layout: fixed; border-collapse: collapse; border: 4px double #484848; padding: 4px; } thead{ background: #bebebe; border: 1px solid #484848; } tfoot{ background:#bebebe; border: 1px solid #bebebe; } tbody{ background: #dedede; border: 1px solid #484848; vertical-align: middle; } thead th{ background: #bebebe; border: 1px solid #484848; } tfoot, td.foot{ background:#bebebe; border: 1px solid #bebebe; } tfoot, td.foottotal{ background:#bebebe; border: 1px solid #bebebe; } tbody th{ background: #dedede; border: 1px solid #484848; } tbody, tr, td{ background:#eeeeee; border: 1px solid #484848; } tr, td{ border: 1px solid #484848; height:30px; } a{ background:#eeeeee; text-decoration:none; }
Finalment, s'ha de donar format al text de la taula. Determinar el tipus de lletra, la mida, l'alineació, el color, etc.
caption{ caption-side: top; height: 30px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 16px; color:#000000; font-weight: bold; } table{ width: 98%; table-layout: fixed; border-collapse: collapse; border: 4px double #484848; padding: 4px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; } thead{ background: #bebebe; border: 1px solid #484848; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 16px; color: #000000; text-align: center; } tfoot{ background:#bebebe; border: 1px solid #bebebe; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color:#000000; } tbody{ background: #dedede; border: 1px solid #484848; vertical-align: middle; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; text-align: center; } thead th{ background: #bebebe; border: 1px solid #484848; } tfoot, td.foot{ background:#bebebe; border: 1px solid #bebebe; text-align:left; } tfoot, td.foottotal{ background:#bebebe; border: 1px solid #bebebe; text-align:center; font-weight:bold; } tbody th{ background: #dedede; font-size: 14px; border: 1px solid #484848; } tbody, tr, td{ background:#eeeeee; border: 1px solid #484848; } tr, td{ border: 1px solid #484848; height:30px; } a{ background:#eeeeee; text-decoration:none; }