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