+
HTML
Capítulo 7
Lenguajes de Marcas y Sistemas de Gestión de Información
Curso 2025/2026
+ 2
Capítulo 7:TABLAS
1. Introducción
2. Tablas Básicas
3. Tablas Avanzadas
+ 3
1. INTRODUCCIÓN
Las tablas en HTML utilizan los mismos conceptos de filas, columnas,
cabeceras y títulos que los que se utilizan en cualquier otro entorno de
publicación de documentos:
Puede contener elementos simples, agrupaciones de filas y de columnas,
cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros
elementos complejos.
+ 4
1. INTRODUCCIÓN
PROBLEMA: las tablas no siempre se utilizan adecuadamente → Se
deben utilizar para mostrar información tabular.
Hasta hace unos años, las tablas también se utilizaban para definir la
estructura de las páginas web. La cabecera de la página era una fila de
una gran tabla, el pie de página era otra fila de esta tabla y la zona de
contenidos estaba formada por varias columnas dentro de esa gran tabla.
Aunque algunos malos diseñadores siguen utilizando hoy en día las
tablas para definir la estructura completa de las páginas web, se trata de
una técnica obsoleta y nada recomendable: se complica en exceso el
código HTML y su mantenimiento es muy complejo. La solución correcta
para definir la estructura de las páginas consiste en la utilización de
hojas de estilos CSS.
+ 2. TABLAS BÁSICAS 5
Las tablas se definen con tres etiquetas: <table> para crear la tabla, <tr>
para crear cada fila y <td> para crear cada columna.
<table>
<tr> <tr>
<td><strong>Curso</strong></td> <td>HTML</td>
<td><strong>Horas</strong></td> <td>20</td>
<td><strong>Horario</strong></td> <td>16:00 - 20:00</td>
</tr> </tr>
<tr> <tr>
<td>CSS</td> <td>XML</td>
<td>20</td> <td>60</td>
<td>16:00 - 20:00</td> <td>16:00 - 20:00</td>
</tr> </tr>
</table>
+ 6
2. TABLAS BÁSICAS
◼ La etiqueta <table> encierra todas las filas y columnas de la
tabla.
◼ La etiqueta <td> define cada una de las columnas de las filas,
aunque realmente HTML no define columnas sino celdas de
datos.
◼ Las etiquetas <tr> definen cada fila de la tabla y encierran
todas las columnas.
+ 2. TABLAS BÁSICAS 7
Al definir una tabla, se debe pensar en primer lugar en las filas
que la forman y a continuación en las columnas. HTML procesa
primero las filas y por eso las etiquetas <tr> aparecen antes que
las etiquetas <td>.
+ 8
2. TABLAS BÁSICAS
Los atributos para las celdas más utilizados son rowspan y colspan, que se
emplean para construir tablas complejas como las que se ven más adelante.
Entre los demás atributos, sólo se utiliza de forma habitual el atributo scope.
Algunas de las celdas de la tabla
se utilizan como cabecera de las
demás celdas de la fila o de la
columna. HTML define la
etiqueta <th> para indicar que
una celda es cabecera de otras
celdas.
+ 9
2. TABLAS BÁSICAS
Los atributos de la etiqueta <th> son idénticos que los atributos para la
etiqueta <td>. El atributo más utilizado es scope, que permite indicar si la
celda es cabecera de la fila o de la columna (<th scope="row"> y <th
scope="col"> respectivamente).
Por otra parte, HTML define la etiqueta <caption> para establecer la
leyenda o título de una tabla. La etiqueta debe colocarse
inmediatamente después de la etiqueta <table> y cada tabla sólo
puede incluir una etiqueta <caption>.
+ 10
2. TABLAS BÁSICAS
Las tablas complejas suelen disponer de una estructura irregular que
junta varias columnas para formar una columna ancha o une varias filas
para formar una fila más alta que las demás. Para fusionar filas o
columnas, se utilizan los atributos rowspan y colspan respectivamente.
La siguiente imagen muestra una tabla compleja que ha fusionado dos
columnas simples para formar una columna más ancha:
+ 2. TABLAS BÁSICAS 11
Se debe utilizar el siguiente código:
<table border=”1”>
<tr>
<td colspan="2">A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</table>
La celda de la primera fila debe ocupar el espacio de dos columnas, por
lo que el código debe ser <td colspan="2">A</td>.
+ 2. TABLAS BÁSICAS 12
Para diseñar una tabla HTML que fusiona filas:
<table>
<tr>
<td>A</td>
<td rowspan="2">B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
+ 13
2. TABLAS BÁSICAS
Utilizando los atributos rowspan y colspan, es posible diseñar
tablas complejas.
Ejemplo de fusión de múltiples columnas:
+ 2. TABLAS BÁSICAS 14
<table border=”1”>
<tr>
<td colspan="3">A</td> <tr>
<td>B</td> <td colspan="4">F</td>
</tr> </tr>
<tr> <tr>
<td>C</td> <td>G</td>
<td colspan="2">D</td> <td>H</td>
<td>E</td> <td>I</td>
</tr> <td>J</td>
</tr>
</table>
+ 15
3. TABLAS AVANZADAS
Algunas tablas complejas están formadas por más
elementos que filas y celdas de datos. Es común que las
tablas más avanzadas dispongan de una sección de
cabecera, una sección de pie y varias secciones de datos.
También es posible agrupar varias columnas de forma
lógica para poder aplicar estilos similares a un
determinado grupo de columnas.
Un ejemplo clásico de tablas avanzadas es el de las tablas
utilizadas en contabilidad, como por ejemplo la tabla que
muestra el balance de una empresa.
+ 16
3. TABLAS AVANZADAS
+ 17
3. TABLAS AVANZADAS
Las tablas complejas se definen mediante las etiquetas <thead>, <tbody> y
<tfoot>. La cabecera de la tabla se define con la etiqueta <thead>, el pie de la
tabla mediante <tfoot> y cada sección de datos se define con <tbody>.
Cada tabla puede contener solamente una cabecera y un pie, pero puede
incluir un número ilimitado de secciones. Las etiquetas <thead> y/o <tfoot>
deben colocarse inmediatamente antes que cualquier etiqueta <tbody>.
+ 3. TABLAS AVANZADAS 18
<html>
<head><title>Ejemplo de tabla avanzada</title></head>
<body>
<h3>Análisis de ventas</h3>
<table summary="Análisis de ventas anuales">
<caption>Análisis de ventas anuales</caption>
<thead>
<tr>
<th rowspan="2" scope="col">AÑO</th>
<th colspan="4" scope="col">Expansión de ventas</th>
</tr>
<tr>
<th scope="col">Producto A</th>
<th scope="col">Producto B</th>
<th scope="col">Producto C</th>
<th scope="col">Producto D</th>
</tr>
</thead>
+ 3. TABLAS AVANZADAS 19
<tfoot>
<tr>
<th rowspan="2" scope="col">AÑO</th>
<th scope="col">Producto A</th>
<th scope="col">Producto B</th>
<th scope="col">Producto C</th>
<th scope="col">Producto D</th>
</tr>
<tr>
<th colspan="4" scope="col">Expansión de ventas</th>
</tr>
</tfoot>
+ 3. TABLAS AVANZADAS 20
<tbody>
<tr>
<th scope="row">N-3</th><td>-</td><td>-</td><td>-</td><td>-</td>
</tr>
<tr>
<th scope="row">N-2</th><td>3</td><td>5</td><td>8</td><td>4</td>
</tr>
<tr>
<th scope="row">N-1</th><td>4</td><td>4</td><td>7</td><td>3</td>
</tr>
<tr>
<th scope="row">N</th><td>5</td><td>7</td><td>6</td><td>2</td>
</tr>
</tbody>
</table>
</body>
</html>
+ 21
3. TABLAS AVANZADAS