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