Les taules a HTML tenen una estructura bàsica, que es pot anar fent més complexa en funció de les necessitats:
A on s'han utilitzat les etiquetes més bàsiques:
<table></table>: Delimita la taula.
<tr></tr>: Crea una fila.
<td></td>: Crea una cel·la dins la fila.
style: permet afegir característiques a cada entitat dins la taula.
On s'han afegit els següents atributs per millorar l'aparença de la taula:
"border-collapse: collapse": fa que les vores de les cel·les s'uneixen en una.
colspan="2": fa que una cel·la ocupi l'espai horitzontal de dues.
L'estructura completa d'una taula inclou encapçalament, cos i peu de taula, tal com mostra el següent exemple:
Si en comptes de donar estils mitjançant atributs dins les etiquetes, es vol fer servir CSS, es poden escriure dos arxius com els del següent exemple:
Estructura d'una taula en html
Codi HTML
<table>
<thead>
<tr>
<th colspan="2"></th>
</tr>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Estil CSS
table {
border-collapse: collapse;
width: 85%;
}
th {
border: 1px solid black;
background-color: lightgrey;
color: white;
}
td {
border: 1px solid black;
}
Aparença al navegador