 |
 |
APUNTS PRÀCTICS HTML 4.0
En aquest capítol es tracten els següents elements:
Contingut del capítol:
Les taules són un conjunt de files i columnes que donen com a resultat una graellat de caselles, a on hi pot haver lletres, números, imatges, etc.
L'element clau d'inici d'una taula és TABLE.,
que informa que comença una taula.
Les taules poden tenir un títol, que es posa a l'inici de la taula, però fòra de les
caselles, amb l'element CAPTION. Per defecte, el títol
de la taula es al capdemunt d'ella. Si es vol definir al final, cal definir CAPTION
ALIGN=BOTTOM, al final, i CAPTION ALIGN=TOP, al capdemunt. És opcional.
Els requadres de les caselles, poden ser invisibles, o tenir un gruix, amb l'element BORDER.
Per defecte el gruix és 0 pixels, sense definit BORDER o donant BORDER=0, donant com a
resultat un BORDER invisible. És opcional.
| Col 1, fila 1 | Col 2, fila 1 |
| Col 1, fila 2 | Col 2, fila 2 |
| Col 1, fila 3 | Col 2, fila 3 |
No es defineixen a priori el número de columnes i files a fer servir, sinó que es van
introduïnt els elements de definició de files, TR (table
row). i de columnes TD (table data).
Definint una fila amb TR, a continuació es van definit les columnes en relació al
número d'elements TD que s'hi van introduïnt.
| inici taula definició del títol de la taula 1 inici fila 1 contingut casella columna 1-fila 1 contingut casella columna 2-fila 1 fi fila 1 inici fila 2 inici fila 3 |
<table border="1"> <caption>Títol de la taula 1</caption> <tr> <td>Col 1, fila 1</td> <td>Col 2, fila 1</td> </tr> <tr> <td>Col 1, fila 2</td> <td>Col 2, fila 2</td> </tr> <tr> <td>Col 1, fila 3</td> <td>Col 2, fila 3</td> </tr> </table> |
També es pot definir l'amplada total de la taula amb WIDTH, que pot ser un
número de píxels o un %, sent el 100% l'amplada total de la pantalla. Si es defineix amb
%, sempre es veurà de la mateixa proporció la taula, en pantalles d'usuaris amb
diferents resolucions de pantalla (640x480, 800x600, etc), en canvi, definint un número
fixe de píxels, la proporció pot variar d'un usuari a altre.
Com que WIDTH defineix l'amplada de tota la taula, l'element va a continuació de
l'element de definició de taula TABLE.
| Aquesta taula té amplada de 600 píxels, amb border=2 | <table border="2" width="600"> |
| Taula amb amplada de 320 píxels, border=1 |
Les taules, que per defecte estan aliniades a l'esquerra de la pantalla, també es poden centrar o ajustar a la dreta amb l'element CENTER o DIV ALIGN=CENTER al centre, i DIV ALIGN=RIGHT a la dreta. Aquests elements van abans i després de definir ta taula, amb l'element TABLE.
| Taula aliniada al centre | <div align="center"><table border="1"> <tr> <td>Taula aliniada al centre</td> </tr> </table> </center></div> |
| Taula aliniada a la dreta | <div align="right"><table
border="1"> <tr> <td>Taula aliniada a la dreta</td> </tr> </table> </center></div> |
El text que conté cada casella, també es pot aliniar al centre, a la dreta o a
l'esquerra. Per defecte, és a l'esquerra. L'element emprat és TD ALIGN=RIGHT per
dreta, LEFT per esquerra i CENTER per centre. És opcional.
Text centrat |
<table border="1" width="600">
<tr> <td><p align="center">Text centrat </p> </td> </tr></table> |
El text en una casella també pot ser aliniat de forma vertical, amb
l'element TD VALING=TOP al capdemunt de la casella, MIDDLE al mig de la casella, i
BOTTOM al final de la casella. Per defecte, el text està aliniat al centre de la casella.
Per això, caldrà que la casella tingui l'altura suficient com per que el text pugui ser
aliniat en algun mode. Això s'aconsegueix modificant l'altura de la casella, respecte a
les altres, donant-li valor de dues o mes files. Aquests canvi només afecta a la casella
que s'està modificant. Això es consegueix amb ROWSPAN=.
Si el que es vol és que una casella sigui més ample respecte a les altres, que valgui
dues o més columnes es defineix amb COLSPAN=. És opcional.
| Text al mig de la casella. | Al final | A l'inici | Text |
| <table border="1"> <tr> <td rowspan="2">Text al mig de la casella</td> <td valign="bottom" rowspan="2">Al final</td> <td valign="top" rowspan="2">A l'inici</td> <td>Text</td> </tr> <tr> <td> </td> </tr > </table> |
Cada casella també pot un color de fons, amb l'element TD BGCOLOR
i un número en hexadecimal.
De la mateixa forma, a cada casella es pot insertar qualsevol imatge en format GIF o JPG
amb l'element IMG SRC, permetent igualment la mida en pixels de la imatge amb
l'amplada WIDTH, i l'altura amb HEIGHT.
|
|
| <table border="1"> <tr> <td bgcolor="#00FFFF">Color Blau</td> <td><img src="new.gif"width="126" height="21"></td> </tr></table> |
De la mateixa forma, a cada element que hi ha en una casella, se li pot definir
un link, amb l'element A HREF.
També hi ha possibilitat de controlar l'espai buit que s'ha de deixar entre caselles, amb l'element CELLSPACING. Aquest espai es mesurat en pixels.
|
Taula normal |
|
|
|
També hi ha possibilitat de controlar l'espai buit que s'ha de deixar en una casella al voltant del seu contingut, amb l'element CELLPADDING. Aquest espai es mesurat en pixels.
|
|
La conjunció dels dos elements:
|
|
La combinació que dongui un espai més ajustat al seu contingut serà:
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
Naturalment, una taula també pot ser presentada sense BORDER.
|
<table> <caption align="top">Canvi mig del Dolar</caption> <tr> <td>Any</td> <td>Canvi </td> </tr> <tr> <td>1970</td> <td>69</td> </tr> <tr> <td>1980</td> <td>71</td> </tr> <tr> <td>1990</td> <td>102</td> </tr> </table> |
Una taula dins d'una altra
També hi pot haver una taula a dins d'una altra. Agafem per exemple, la següent taula
de 2 caselles únicament.
El seu codi és el següent: (com que les 2 caselles estan buides, el seu contingut es
representa com un espai sense nova línia, amb el caràcter especial que vol dir No
Break Space).
| <table border="1" width="90%">
<tr> <td> </td> <td> </td> </tr> </table> |
I a dins de la primera casella hi volem posar la següent taula:
| Any | Canvi |
| 1982 | 110 |
| 1987 | 123 |
| 1992 | 102 |
i el codi és el següent:
| <table border="0" width="50%"> <tr> <td>Any</td> <td>Canvi </td> </tr> <tr> <td>1982</td> <td>110</td> </tr> <tr> <td>1987</td> <td>123</td> </tr> <tr> <td>1992</td> <td>102</td> </tr> </table> |
el que hem de definir és al primer element de la primera casella i columna, una
nova taula, amb totes les columnes i caselles.
|
Casella buida |
el codi resultant és:
| <table border="1" width="90%"> <tr> <td><div align="center"><center><table width="50%"> <tr> <td>Any</td> <td>Canvi </td> </tr> <tr> <td>1982</td> <td>110</td> </tr> <tr> <td>1987</td> <td>123</td> </tr> <tr> <td>1992</td> <td>102</td> </tr> </table> </center></div></td> <td>casella buida</td> </tr> </table> |
Començament de la primera Taula
Definició de la primera fila Contingut de la casella. Definició de la Taula 2 Definició de la primera fila, de la taula 2 resta de contingut per a cada casella... Acabament de la Taula 2 Finalització de la Taula |
Encapçalaments de fila i de columna.
Per a definir el contingut de la primera casella de cada fila i columna, es pot fer servir l'element TH, Table Header. Aquest element té les mateixes propietats que l'element TD i funciona de la mateixa forma. El resultat visual, és el mateix si el contingut d'una taula, inclòs els títols, es creen amb l'element TD. L'única diferència, és que amb TH, el seu contingut automàticament es visualitza en negreta i està centrat respecte a la casella, sense necessitat de cap element més.
Taula amb títols, creada amb l'element TH.
|
<table border="1" width="50%"> <caption>Evolució de l'IPC</caption> <tr> <th>Comunitat</th> <th>Any 1995</th> <th>Any 1996</th> </tr> <tr> <th>Balears</th> <td>4,6</td> <td>3,5</td> </tr> <tr> <th>Catalunya</th> <td>4,3</td> <td>3,7</td> </tr> <tr> <th>Aragó</th> <td>3,9</td> <td>3,9</td> </tr> </table> |
La mateixa taula anterior sense l'element TH.
|
<table border="1" width="50%"> <caption>Evolució de l'IPC</caption> <tr> <td><strong>Comunitat</strong></th> <td><strong>Any 1995</strong></th> <td><strong>Any 1996</strong></th> </tr> <tr> <td><strong>Balears</strong></th> <td>4,6</td> <td>3,5</td> </tr> <tr> <td><strong>Catalunya</strong></th> <td>4,3</td> <td>3,7</td> </tr> <tr> <td><strong>Aragó</strong></th> <td>3,9</td> <td>3,9</td> </tr> </table> |
Pràcticament les dues taules són idèntiques, llevat de que sense fer servir
l'element TH, per a aconseguir fer negretes els títols de les columnes i files, s'ha
necessitat de l'element STRONG. Amb aquesta última opció, la mateixa taula conté més
de codi.
Amb els elements Thead (encapçalament de taula), Tbody (cos de la taula), i Tfoot (peu de la taula), es poden crear títols d'encapçalament de taula i de peu, de que en cas de que la Taula ocupi més d'una pàgina, aquests s'aniran repetint a cada full. L'ordre en que s'han de posar a la taula és: Thead, Tfoot i Tbody.
En el següent exemple, es mostra una taula que ocupa 2 pàgines, i es defineix un l'encapçalament i peu que es va repetint a la primera i a la segona pàgina.
Mostra de la pàgina amb el codi HTML anterior.
| © Melcior Oliveras 1998 melcior@intercom.es |  |
 |
 |
||