Enrera
Mòdul 1
Disseny i creació de pàgines web
  Pràctica
1
2
3
4
5
6
7
8
   
Exercicis
Exercicis
 

Taules

En aquesta pràctica, aprendreu a situar text dins una graella.

 

L'objectiu serà crear una pàgina amb una graella de dues files i dues columnes amb un text dins les cel·les. El resultat ha de ser com aquest:

Pàgina amb una taula

Feu clic sobre la imatge

Desenvolupament de la pràctica
   
Pràctica

Obriu el bloc de notes del Windows o qualsevol editor de text pla, enganxeu en un document nou el codi següent, que es comentarà tot seguit, i deseu-lo amb el nom graella.htm.

<html>
<head>
<title>Graelles</title>
</head>

<body bgcolor="#FFFFFF" text="#000000">

<table border="1">
<tr>
<td>
<b>Primera cel&middot;la</b>
</td>
<td>
<b>Segona</b>
</td>
</tr>
<tr>
<td>Tercera</td>

<td>
Quarta
</td>
</tr>
<tr>
<td>
Cinquena
</td>
<td>
Sisena
</td>
</tr>
</table>
</body>
</html>

A continuació, teniu un gràfic explicatiu d'aquest codi.

Explicació del codi que genera una taula

Observeu que la taula comença amb l’etiqueta <table> i acaba amb </table>. Això últim és molt important, ja que cal saber sempre on comença i on acaba.

Observeu, també, que, en el vostre cas, la primera etiqueta <table> va acompanyada del gruix de les linies que la delimiten (border=1). Podeu provar què passa si canvieu aquest nombre per zero (sense línies), o bé amb 2, 3,4 ,5 per fer aparèixer les línes més gruixudes.

Seguidament, us apareix l’etiqueta <tr>, la qual indica el començament d’una fila de la taula.

A continuació, <td> indica l’inici de la primera cel·la, que també acaba amb l’etiqueta inversa </td>. Aquí podeu afegir tantes etiquetes <td> i </td > com cel·les hagi de tenir aquesta primera fila.

En acabar la primera fila, tanqueu amb </tr> i torneu a declarar l’inici d’una altra fila amb <tr>.

A partir d’aquí, el procés d‘iniciació i tancament de cel·les d’aquesta fila es produeix igual que amb l’anterior, amb les etiquetes <td> i <td>.

Tanqueu aquesta segona fila amb </tr>, igual que l’anterior, i, finalment, tanqueu definitivament aquesta graella amb </table>.

   
Atenció !

Resum

  • Les etiquetes <table> i </table> indiquen inici i final d'una graella.
  • <tr> i </tr> indiquen l'inici i final d'una fila.
  • Finalment, <td> i </td> indiquen l'inici i final d'una cel·la.
   
  A la pràctica 6, veureu els enllaços entre documents.
 
Amunt