26.- Taula (<table> <tr> <td>)
Taula (<table> <tr> <td>):
L'objectiu fonamental de les taules és mostrar una sèrie de dades en forma ordenada, organitzada en files i columnes.
Una cosa important és que no utilitzarem les taules per a organitzar la pàgina completa (això es fa actualment mitjançant CSS, és a dir fulls d'estil).
Per a la creació d'una taula intervenen una sèrie d'elements:
<table> És la marca de començament de la taula. Aquest element requereix la marca de tancament.
<tr> És la marca de començament d'una fila. Aquesta marca ha d'estar dins de l'element table. Aquest element requereix la marca de tancament.
<td> És la marca de començament d'una cel. Aquesta marca ha d'estar dins de l'element tr. Aquest element requereix la marca de tancament.
Per recordar el nom d'aquests elements HTML:
<table>
<tr> ve de table row que significa fila de la taula.
<td> ve de table data que significa dada de la taula.
La millor forma d'entendre i dominar aquest concepte és implementar taules i veure el seu resultat en el navegador. Confeccionem una taula que mostri els noms de països en una columna i la seva quantitat d'habitants en una altra:
<html>
<head>
</ Head>
<body>
<table border="1">
<tr>
<td> Xina </ td> <td> 1300 milions </ td>
</ tr>
<tr>
<td> Índia </ td> <td> 1080 millones </ td>
</ tr>
<tr>
<td> Estats Units </ td> <td> 295 milions </ td>
</ tr>
</ table>
</ body>
</ html>
El primer que apareix és l'obertura de l'element table, on inicialitzar les propietat border amb el valor 1, amb això el contorn de cada cel·la serà visible (prova d'assignar el valor zero i altres valors superiors a 1)
<table border="1">
Tot seguit ve l'obertura de la primera fila de la taula amb l'element tr:
<tr>
Continuem amb l'obertura de la primera cel·la de la primera fila de la taula:
<td>
Després la dada pròpiament dit de la cel·la:
Índia
Tanquem la cel·la:
</ td>
Obrim la propera cel·la:
<td>
Disposem el valor de la cel·la:
1300 milions
Tanquem la cel·la:
</ td>
Ara tanquem la primera fila de la taula:
</ tr>
El mecanismes de la següent fila és similar a la primera.
Exercici:
Confeccionar una taula que mostri a la primera columna els noms de diferents empleats d'una companyia i en la segona el sou brut (la companyia té 4 empleats).