Índex
 
       

 

6. Les taules.

Les taules, en el llenguatge HTML són estructures molt útils que serveixen per presentar la informació de les pàgines web. Els dos exemples següents mostren les dues maneres d'utilitzar les taules. En el primer cas, la taula serveix per presentar dades i en el segon, per maquetar o distribuir la pàgina en diferents zones en les quals podem inserir textos, imatges, etc.

Inserció d'una taula

La inserció d'una taula es fa mitjançant el menú Insertar, opció tabla. Ens apareix el quadre de diàleg següent on podem indicar el número de files i columnes que volem, l'amplada de la taula i el nombre de pixels pel Borde, Relleno i Espacio entre celdas.

Format de taules i cel·les

Quan seleccionem la taula veiem que la finestra de propietats ens permet accedir a un conjunt de propietats de la taula. Podem canviar el nombre de files i columnes, l'alineació de la taula dins la pàgina, l'amplada de la taula, el color del fons de tota la taula, el format del marc amb l'amplada i el color, així com l'espai que ha de tenir el marge interior de totes les cel·les i la separació entre cel·les. També podem escollir una imatge com a fons de la taula.

En quant a la mida de la taula podem indicar dues formes de mesura que tenen conseqüències ben diferents.

  1. Mesura en pixels: Fa que la taula tingui una mida absoluta en pixels. Això vol dir que si fem més gran o més petita la finestra del navegador la taula no canvia la seva mida. Així si es fa més petita la finestra del navegador, arribarà un moment en que la taula serà més gran que el navegador i no es veurà sencera.
  2. Mesura en tant per cent: El tant per cent és relatiu a la mida de la finestra del navegador, així si fem més petit el navegador la taula es farà més petita i es veurà sempre sencera.

Quina forma de mesura hem de triar?

Com a regla general podem dir que si volem fer ús de la taula per maquetar hem de fer mides absolutes amb pixels i si volem presentar informació textual sempre visible hem de triar la mida en tant per cent.

.

NOTA: Aquestes propietats afecten a tot el conjunt de la taula ja que tenim la taula seleccionada

Unir cel·les en files i/o columnes

Si volem unir dues cel·les o més, o dividir cel·les les hem de senyalar i veiem ara en el quadre de propietats, que ha canviat, on podem fer-ho:

Propietats de les files, cel·les i columnes

Podem canviar les propietats d'una cel·la o d'una fila o d'una columna senyalant les cel·les a les que volem aplicar la propietat.

Hem de pensar que hi ha propietats que podem donar a tota la taula i a una fila o una cel·la. Així podem donar color negre al fons d'una taula i color blanc a una cel·la. El navegador farà sempre el color de la cel·la i ocultarà el color de la fila o de la taula.

També podem donar ordres contradictòries i llavors el navegador farà el que podrà. Si donem un color de fons i posem una imatge de fons en una taula el navegador visualitzarà la imatge i no el color.

Taula de tres files amb la primera fila senyalada

Taula de tres columnes amb la primera columna senyalada

Les propietats d'una cel·la són les de la figura següent

Nota: heu de tenir cura en pensar si alguna d'aquestes propietats està bé en el quadre de propietats. Així les propietats "An: anchura, Al: altura" aplicades a una cel·la no tenen cap sentit. Tampoc en té la propietat "An: anchura" aplicada a una fila ni la propietat "Al: altura" aplicada a una columna.

Exercicis

  1. Construeix la taula de dades dels alumnes no universitaris de Catalunya.
  2. Fes una distribució per a una taula com la de les lletres del primer paràgraf, amb diferents colors de fons i inserint alguna imatge dins la cel·les.
  3. Fés una pàgina com la de la figura. Pensa que per fer aquesta maquetació hem posat dues taules dins de dos cel·les de la taula principal.



    Pots veure que hi ha una taula 2x2 amb borde=0, i separació entre cel·les igual a 3. Les taules dels nombres màgics son taules 3x3 amb el color del borde negre.

  4. Fes un projecte de maquetació per a una pàgina principal de la teva web dibuixat en un paper. Trasllada la taula així dibuixada amb el Dreamweaver.