Les
taules més senzilles d'HTML es defineixen amb tres etiquetes: <table> per
crear la taula, <tr> per crear cada fila i <td> per crear cada
columna.
En definir una taula, s'ha de pensar en primer lloc en les files que la formen i a continuació en les columnes. El motiu és que HTML processa primer les files i per això les etiquetes <tr> apareixen abans que les etiquetes <td>.
En definir una taula, s'ha de pensar en primer lloc en les files que la formen i a continuació en les columnes. El motiu és que HTML processa primer les files i per això les etiquetes <tr> apareixen abans que les etiquetes <td>.
Per exemple:
<table border="1">
<tr>
<td> fila 1, cel .la 1 </ td>
<td> fila 1, cel.la 2 </ td>
</ tr>
<tr>
<td> fila 2, cel.la 1 </ td>
<td> fila 2, cel.la 2 </ td>
</ tr>
</ table>
<tr>
<td> fila 1, cel .la 1 </ td>
<td> fila 1, cel.la 2 </ td>
</ tr>
<tr>
<td> fila 2, cel.la 1 </ td>
<td> fila 2, cel.la 2 </ td>
</ tr>
</ table>
I el resultat:
Podeu provar també aquest exemple
Normalment,
algunes de les cel·les de la taula s'utilitzen com a capçalera de les altres
cel·les de la fila o de la columna. En aquest cas, HTML defineix l'etiqueta
<th> (de l'anglès "table header cell") per indicar que una
cel·la és capçalera d'altres cel·les.
<table border="2">
<tr>
<th>Capçalera 1</th>
<th>Capçalera 2</th>
</tr>
<tr>
<td> fila 1, cel .la 1 </ td>
<td> fila 1, cel.la 2 </ td>
</ tr>
<tr>
<td> fila 2, cel.la 1 </ td>
<td> fila 2, cel.la 2 </ td>
</ tr>
</ table>
<tr>
<th>Capçalera 1</th>
<th>Capçalera 2</th>
</tr>
<tr>
<td> fila 1, cel .la 1 </ td>
<td> fila 1, cel.la 2 </ td>
</ tr>
<tr>
<td> fila 2, cel.la 1 </ td>
<td> fila 2, cel.la 2 </ td>
</ tr>
</ table>
I el resultat
Un altre exemple per provar
D'altra banda, HTML defineix l'etiqueta <caption> per establir la
llegenda o títol d'una taula. L'etiqueta ha de col·locar-se immediatament
després de l'etiqueta <table> i cada taula només pot incloure una
etiqueta <caption>.
Per exemple:
<table border="2">
<caption><b>Etiqueta caption<b></caption>
<tr>
<th>Capçalera 1</th>
<th>Capçalera 2</th>
</tr>
<tr>
<td> fila 1, cel .la 1 </ td>
<td> fila 1, cel.la 2 </ td>
</ tr>
<tr>
<td> fila 2, cel.la 1 </ td>
<td> fila 2, cel.la 2 </ td>
</ tr>
</ table>
<caption><b>Etiqueta caption<b></caption>
<tr>
<th>Capçalera 1</th>
<th>Capçalera 2</th>
</tr>
<tr>
<td> fila 1, cel .la 1 </ td>
<td> fila 1, cel.la 2 </ td>
</ tr>
<tr>
<td> fila 2, cel.la 1 </ td>
<td> fila 2, cel.la 2 </ td>
</ tr>
</ table>
I el resultat:
De tots els atributs disponibles per a les cel·les, els més utilitzats són
rowspan i colspan, que s'empren per construir taules complexes.
Les taules complexes solen disposar d'una estructura irregular que ajunta diverses columnes per formar una columna ampla o uneix diverses files per formar una fila més alta que les altres. Per fusionar files o columnes, s'utilitzen els atributs rowspan i colspan respectivament.
Les taules complexes solen disposar d'una estructura irregular que ajunta diverses columnes per formar una columna ampla o uneix diverses files per formar una fila més alta que les altres. Per fusionar files o columnes, s'utilitzen els atributs rowspan i colspan respectivament.
Per exemple:
<html>
<body>
<h4>Unió de dues columnes:</h4>
<table border="1">
<tr>
<th>Nom</th>
<th colspan="2">Telèfons</th>
</tr>
<tr>
<td>Alumne 1</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Unió de dues files:</h4>
<table border="1">
<tr>
<th>Nom:</th>
<td>Alumne 1</td>
</tr>
<tr>
<th rowspan="2">Telèfons </th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
<body>
<h4>Unió de dues columnes:</h4>
<table border="1">
<tr>
<th>Nom</th>
<th colspan="2">Telèfons</th>
</tr>
<tr>
<td>Alumne 1</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Unió de dues files:</h4>
<table border="1">
<tr>
<th>Nom:</th>
<td>Alumne 1</td>
</tr>
<tr>
<th rowspan="2">Telèfons </th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
I el resultat:
A part també tenim els següents atributs :
Cellspacing: espai entre cel·la
Cellpadding: és l’espai de cel·la,
espai interior o espai entre una cel·la i el seu contingut
Per
defecte és 2. Aquest dos atributs són
per tota la taula, no per files o columnes.
Per exemple:
<h4>Sense cellpadding:</h4>
<table border="1">
<tr>
<td>primera</td>
<td>fila</td>
</tr>
<tr>
<td>segona</td>
<td>fila</td>
</tr>
</table>
<h4>Ambcellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>primera</td>
<td>fila</td>
</tr>
<tr>
<td>segona</td>
<td>fila</td>
</tr>
</table>
I el resultat:
I un exemple per provar
Finalment podem veure aquest codi amb tots els elements junts:
I el seu codi per provar:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Exemple de taula HTML</title>
</head>
<body>
<TABLE CELLSPACING="2" CELLPADDING="2" BORDER="1">
<CAPTION><FONT SIZE="+2" COLOR="#FF0000">Cursos de japonés</FONT></CAPTION>
<BR>
<TR><TH ROWSPAN="2" COLSPAN="2"></TH>
<TH COLSPAN="2">Cursos normals</TH>
<TH ROWSPAN="2">Cursos intensius</TH>
</TR>
<TR><TH>Només conversa</TH>
<TH>Conversa i escriptura</TH>
</TR>
<TR><TH ROWSPAN="2">1 trimestre</TH>
<TH>Menors de 15 anys</TH>
<TD ALIGN="center">700 euros</TD>
<TD ALIGN="center">1000 euros</TD>
<TD ROWSPAN="2" ALIGN="center">1500 euros</TD>
</TR>
<TR><TH>Majors de 15 anys</TH>
<TD ALIGN="center">850 euros</TD>
<TD ALIGN="center">1150 euros</TD>
</TR>
<TR><TH COLSPAN="2">1 any</TH>
<TD ALIGN="center">1300 euros</TD>
<TD ALIGN="center">1850 euros</TD>
<TD ALIGN="center">2600 euros</TD>
</TR>
</TABLE>
</body>
</html>
Cap comentari:
Publica un comentari a l'entrada