Notas_Módulo 4_Tablas

Las etiquetas para crear tablas en HTML son,

• Básicas (table, tr, th, td)
• Avanzadas (thead, tbody, tfoot, caption, colgroup, col).

Una tabla HTML, tal y como explica Wikipedia, es una forma gráfica de representar información de manera esquematizada, ordenada y compacta.
Las tablas en HTML se organizan en filas y celdas.

Etiquetas básicas

 

<table></table>

 Estas etiquetas indican el inicio y fin de la tabla. El resto de etiquetas de la tabla deben estar entre estas dos.

<tr></tr> (Table Row)

Representa una nueva fila de la tabla.

<td></td> (Table Data cell)

Es la etiqueta de último nivel y se traduce en una celda de datos en la tabla.

<th> (Table Header cell)

Sustituye a las etiquetas <td> para celdas de cabecera. Se puede usar en el resto de la tabla pero se recomienda su uso en las primeras y últimas filas/columnas de la tabla.
También se puede usar para trabajar estilos, los navegadores destacan el texto de estas celdas en negrita.

Etiquetas avanzadas

 

<thead>

Agrupa una o más filas de cabecera

<tbody>

Agrupa filas de cuerpo (las que tienen el grueso de los datos).

<tfoot>

Agrupa filas de pie


Ejemplo de tabla

<caption></caption>

Añade un título sobre la tabla, como se ve en el ejemplo,

Igual que en los procesadores de texto, en HTML es posible combinar celdas.
 

Para ello utilizamos dos atributos de las celdas: colspan y rowspan.
Ambas esperan un valor entero que especifique cuántas columnas o filas, respectivamente, ocupa la celda.

Ejemplo,

Para que una celda pueda ocupar el espacio de otras es necesario que ese espacio no se rellene para no ocasionar desplazamientos de celdas.

<colgroup></colgroup>

Se usa para agrupar columnas de una tabla

<col />

Se usa para especificar diferentes atributos a las columnas de una tabla. Es útil para aplicar estilos a la columna entera en lugar de usar CSS en cada una de las celdas o filas.

Para dar estilos por columnas hacemos uso de las etiquetas colgroup y col.

El atributo span funciona de forma parecida en colgroup o col a como lo hacían colspan y rowspan para las celdas de la tabla.
El valor del atributo indica el número de columnas que agrupará colgroup o col.

• Las etiquetas básicas para codificar una tabla en HTML son table para la tabla, tr para cada fila y td para las celdas. 
• Para añadir un título a la tabla, utiliza la etiqueta caption entre las etiquetas table. 
• Th, en sustitución de td, añade semántica especificando celdas de cabecera 
• Las etiquetas para facilitar el trabajo posterior de CSS son las agrupaciones de filas: thead para las de cabecera, tbody para las filas de datos y tfoot para las del pie de la tabla, así como agrupaciones de columnas: colgroup y col. 
• Los atributos colspan y rowspan de las etiquetas th y td sirven para extender las celdas y el atributo span de las etiquetas colgroup y col para extender columnas.

Consejos

1. Utilizar tablas HTML exclusivamente para representar tablas y no maquetar la página con tablas.

2. Repasar bien la combinación de celdas para evitar una mala codificación. 

3. Utilizar la agrupación de filas y columnas para que el posterior trabajo de estilo con CSS
resulte más sencillo.