Podemos mediante la formación de grupos lógicos de filas, asignarles propiedades o cumplir una determinada función especifica que solo afectaran a esas filas. Como ejemplo podría ser la composición de una cabecera o un pie de tabla.
Para estas funciones utilizamos los atributos “thead”, “tfoot” y “tbody”.
<thead> : Con “thead” podemos especificar un encabezado (head) en una tabla. Las filas que se incluyan entre las etiquetas de inicio y de fin de “thead”, aparecerán siempre como encabezado en la tabla. Solo se define un encabezado por tabla.
<tfoot> : Al igual que con “thead”, “tfoot” nos permite especificar el pie (foot) de la tabla. También al igual que en el encabezado las filas que se incluyen entre las etiquetas de inicio y de fin aparecerán siempre al final de la tabla. Sólo se define una vez por tabla.
<tbody> : Con esta etiqueta podemos agrupar la zona que falta, el cuerpo (body) de la tabla. Las filas que se incluyen entre las etiquetas de inicio y fin de esta etiqueta delimitan un grupo de filas con características comunes en cuanto a su contenido, esto nos permite atribuirles propiedades comunes para esas filas. A diferencia de “thead” y “tfoot”, con “tbody”, podemos definir todos los grupos de filas que consideremos necesarios necesarios.
Estas etiquetas son útiles para varias situaciones, que ya a cada uno se le ocurrirá, a modo de ejemplo podemos decir que se pueden aplicar para los casos donde se imprimen tablas largas y debemos repetir la información de la cabecera y el pie en todas las paginas que contengan datos de la tabla.
Es recomendable que en el pie (tfoot) y en el encabezado (thead), se incluya información relativa a las columnas de la tabla. Y el cuerpo de la tabla (tbody) debería contener filas de datos.
En el caso de estar presentes las tres etiquetas, cada elemento contiene un grupo de filas, y cada grupo debe tener mínimo una fila.
Como nota cabe indicar que “tfoot” debe aparecer antes de “tbody” para que los navegadores puedan representar el pie antes de recibir todos los datos del cuerpo de la tabla.
<tbody> es siempre obligatoria, excepto cuando la tabla no tenga sección de cabecera ni de pie.
Código de Ejemplo aplicando las características vistas anteriormente:
<html>
<head>
<title>Tabla - Ejemplo de Agrupamientos lógicos</title>
</head>
<body>
<table width="50" height="50" border="1" bordercolorlight="red" bordercolordark="maroon" >
<caption>Tabla - Ejemplo de Agrupamientos lógicos</caption>
<thead bgcolor="yellow">
<tr>
<th width="20%" >Nombre</th>
<th width="20%" >Telefono</th>
<th width="20%" >Otros</th>
<th width="20%">Comentarios</th>
</tr>
</thead>
<tfoot bgcolor="green">
<tr>
<td colspan="4" align="center">Pie de tabla de ejemplo</td>
</tr>
</tfoot>
<tbody>
<tr>
<td width="20%" align="left">Expansion hacia abajo</td>
<td width="20%" align="right">derecha</td>
<td width="20%" align="center">centro</td>
<td width="20%" align="justify">texto justificado izq. y derecha</td>
</tr>
<tr>
<td width="20%" align="left">Izquierda</td>
<td width="20%" align="right">derecha</td>
<td width="10%" align="center">centro</td>
<td width="20%" align="justify">texto justificado izq. y derecha</td>
</tr>
<tr>
<td width="20%" >Expansion hacia la derecha</td>
<td width="20%" align="right">derecha</td>
<td width="20%" align="center">centro</td>
<td width="20%" align="justify">texto justificado izq. y derecha</td>
</tr>
</tbody>
</table>
</body>
</html>
En ejemplo hemos pintado de amarillo la cabecera, hemos dejado de blanco el cuerpo y pintado de verde el pie.
Representación en el navegador:
| Nombre | Telefono | Otros | Comentarios |
|---|---|---|---|
| Pie de tabla de ejemplo | |||
| Expansion hacia abajo | derecha | centro | texto justificado izq. y derecha |
| Izquierda | derecha | centro | texto justificado izq. y derecha |
| Expansion hacia la derecha | derecha | centro | texto justificado izq. y derecha |
Como ejercicio práctico podríais por ejemplo intentar insertar uno o mas agrupamientos lógicos <tbody> con otro color en el cuerpo de la tabla.
Temas anteriores de curso HTML gratis
86 - HTML - Tablas - Aspecto <caption></caption>
85 - HTML - Tablas - Atributos “bgcolor y backgroundwidth”
84 - HTML - Tablas - Atributos “width y height”
mas ... acceder al índice de temas ...
Otros Links:
Piso en Garrucha - Almería € 110.000
Ático en Vera Playa - Almería € 303.500
Ático en Vera Playa - Almería € 300 (Alq.Anual)
No hay comentarios:
Publicar un comentario
Gracias por tu comentario, en un maximo de 48 horas sera publicado.