Taules

Una taula a HTML es consolida per les etiquetes <table> </table>. Entre aquestes dos etiquetes definirem la taula, les cel·les que volem, les columnes i les característiques de cada un d’aquests paràmetres.

La taula: <table>

De la mateixa manera que una etiqueta body, a una taula també podem definir el fons d’ella mateixa amb el paràmetre “bgcolor”, que ens donarà un color de fons, o amb “background” per posar-hi una imatge de fons.

Un altra aspecte que podem definir d’aquesta és el seu contorn. Això ho aconseguirem amb el paràmetre “border”. De la mateixa manera, també podem definir el color d’aquest contorn amb l’etiqueta “bordercolor”.

El paràmetre “width” indicarà l’amplària –ve amb píxels o amb percentatge- de la taula.

Trobem dos paràmetres més per a utilitzar: “cellspacing” –defineix l’espai entre les cel·les de la taula- i cellpadding” –marca a la taula l’espai que ha de deixar al voltant del text dins d’una cel·la.

Posem un exemple: volem crear una taula que tingui un 100% d’amplària, amb un contorn blau d’un píxel de gruix i amb un cellpadding de 10 i un cellspacing de 10, també. El codi quedaria d’aquesta manera:

<table width=”100%” border=”1″ bordercolor=”#0000FF” cellspacing=”10″ cellpadding=”10″></table>

 

Un cop explicades les taules, passarem a les parts fonamentals d’aquesta mateixa.

 

Les files: <tr>

Les files s’escriuen amb les etiquetes <tr></tr>. El contingut de les columnes de dins la fila el podrem aplicar tant en horitzontal com verticalment.

Si és vertical utilitzarem l’atribut “valign” (a dins hi trobaríem els paràmetres “top”, “middle” o “bottom”) i horitzontalment seria “align” (on hi veuríem “center”, “left”, “right” o “justify”).

I, a més, podríem definir els colors d’aquesta de la mateixa manera que a la taula.

 

Les cel·les <td>

De la mateixa manera que les files, a les cel·les (<td></td>) podem definir l’alineació del contingut de dins amb els atributs “valign” i “align”.

Les cel·les posseeixen uns atributs que ens ajuden a poder agrupar tantes cel·les o tantes columnes com li indiquem. Per tal d’agrupar columnes a les cel·les usaríem l’atribut “colspan” i per agrupar files l’atribut “rowspan”.

Per exemple, per agrupar una cel·la en dos columnes escriuríem: : <td colspan=”2″></td>. I per agrupar dos files, la indicació seria la següent: <td rowspan= “2”></td>.

 

Les cel·les <th>

Les cel·les escrites amb les etiquetes <th></th>, admeten els mateixos atributs que les etiquetes <td> i funcionen de la mateixa manera, però el que hi fa la diferència és que el contingut emmagatzemat dins d’una etiqueta <th> es considera l’encapçalament de la taula, així dons aquest es crearà en negreta i centrat sense necessitat de la nostra indicació.

Leave a Reply

Your email address will not be published. Required fields are marked *