Etiquetas html para crear tablas de contenido

5. Tablas de contenido

Las tablas de contenido nos permiten almacenar los datos de forma ordenada.

5.1. Etiquetas para la creación de tablas de contenido

El principio y final de una tabla se define con las etiquetas <table> y </table>. Las filas se engloban con las etiquetas <tr> </tr> y las columnas estarán dentro de la etiquetas <td> </td>.

La etiqueta <table> puede incluir diferentes opciones, como puedes ver en la siguiente tabla.

Tabla 5.1: Tablas de contenido

Elemento	Descripción
<table>	Representa datos con más de una dimensión.
<caption>	Representa el título de una tabla.
<tr>	Representa una fila de celdas en una tabla.
<td>	Representa una celda de datos en una tabla.
<th>	Representa una celda encabezado en una tabla.
<colgroup>	Representa un conjunto de una o más columnas de una tabla.
<col>	Representa una columna de una tabla.

Ejemplo

0

5.2. Atributos border, align y bgcolor

Para dar estilos a los elementos utilizaremos siempre CSS y no atributos HTML. No obstante, se van a mencionar estos atributos porque todavía se encuentran presentes en multitud de proyectos online.

Verás que en muchos códigos se le añade un borde a la tabla usando el atributo border. Sin embargo, este atributo ya no es aceptado en HTML5. A pesar de ello, los navegadores reconocen este atributo por estar definido en versiones antiguas de HTML.

<table border="2">

Para modificar la posición de la tabla también se utilizaba el atributo align.

<table align="center">

También podemos asignar fondos a las celdas y filas de una tabla con el atributo bgcolor.

<td bgcolor="#77DDEE">

Recuerda que será mediante CSS la técnica que usaremos para dar estilos a nuestras tablas.

5.3. Agrupación de celdas

Para agrupar celdas en una sola, también llamado «combinación de celdas», utilizaremos los atributos “rowspan” (para agrupar verticalmente) y “colspan” (para agrupar horizontalmente).

Ejemplo

dark

Comprueba tu aprendizaje