Tablas HTML
Introducción
Las tablas en HTML son una herramienta fundamental para organizar y presentar información en un formato estructurado de filas y columnas. Aunque en los inicios de la web se empleaban para el diseño y maquetación de páginas, su función principal hoy en día es la de mostrar datos tabulares.
>
Qué son las Tablas HTML
Las tablas HTML son estructuras que organizan datos en filas y columnas, mejorando la presentación de información tabular en sitios web. Son ideales para mostrar datos como resultados deportivos, estadísticas financieras o inventarios de productos, donde se requiere un formato claro de filas y columnas. Se crean con el elemento <table>, que contiene filas definidas por <tr> (table row) y celdas especificadas con <td> (table data) para contenido o <th> (table header) para encabezados.
>
Estructura Básica de una Tabla HTML
La estructura básica de una tabla en HTML se define principalmente con las siguientes etiquetas:
-
<table>: Etiqueta fundamental que define una tabla en HTML. Actúa como el contenedor principal, englobando todo el contenido de la tabla, desde encabezados hasta datos. -
<thead>, Table Head: (Opcional) Delimita la sección de encabezados de la tabla. Suele incluir los títulos de las columnas, aportando claridad y estructura. Aunque no es obligatorio, su uso es una práctica recomendada para mejorar la organización. -
<tbody>, Table Body: (Opcional) Contiene el cuerpo principal de la tabla, donde se alojan los datos organizados en filas y celdas. Es el núcleo de la tabla, esencial para presentar la información de manera ordenada. -
<tfoot>, Table Footer: (Opcional) Define el pie de la tabla, utilizado para incluir resúmenes, totales o notas finales. No es un elemento obligatorio, pero resulta útil para destacar información adicional o conclusiva. -
<tr>, Table Row: Representa una fila dentro de la tabla. Cada etiqueta<tr>genera una nueva fila, sirviendo como base para organizar celdas de encabezados o datos. -
<th>, Table Header: Define las celdas de encabezado dentro de una fila, comúnmente en el<thead>.Su contenido, que identifica columnas o filas, aparece por defecto en negrita y centrado en la mayoría de los navegadores, facilitando la lectura. -
<td>, Table Data: Especifica las celdas que contienen los datos de la tabla, ubicadas generalmente en el<tbody>dentro de una fila. Estas celdas son el espacio donde se presenta la información principal de la tabla.
>
Ejemplo de una Tabla HTML
En este ejemplo se muestra como se combinan las etiquetas para crear una tabla simple:
asd| Nombre | Edad | Ciudad |
|---|---|---|
| Juan | 30 | Bogotá |
| María | 25 | Medellín |
| Sebastian | 35 | Cali |
| Estos son datos de ejemplo para demostración. | ||
<table class="table">
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Ciudad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>30</td>
<td>Bogotá</td>
</tr>
<tr>
<td>María</td>
<td>25</td>
<td>Medellín</td>
</tr>
<tr>
<td>Sebastian</td>
<td>35</td>
<td>Cali</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
Estos son datos de ejemplo para demostración.
</td>
</tr>
</tfoot>
</table>
.table {
width: 100%;
max-width: 600px;
margin: 0 auto;
border-collapse: collapse;
background-color: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden;
}
.table th {
background-color: #4CAF50;
color: white;
padding: 12px 15px;
text-align: left;
font-weight: 600;
}
.table td {
padding: 12px 15px;
border-bottom: 1px solid #ddd;
}
.table tbody tr:hover {
background-color: #f9f9f9;
}
.table tbody tr:last-child td {
border-bottom: none;
}
.table tfoot td {
background-color: #f8f8f8;
font-style: italic;
text-align: center;
padding: 15px;
color: #666;
border-top: 2px solid #ddd;
}
.table tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
Explicación del ejemplo:
- La etiqueta
<table>es el contenedor principal que organiza todos los elementos y datos de una tabla HTML en una página web. - La etiqueta
<table>incluye una etiqueta<thead>que define la sección de encabezados, especificando los títulos de las columnas. - En el elemento
<thead>, una etiqueta<tr>define la fila de encabezados, que contiene tres etiquetas<th>representando los títulos de las columnas: "Nombre", "Edad" y "Ciudad". - Luego, se tiene una etiqueta
<tbody>para definir el cuerpo de la tabla, agrupando las filas con los datos principales. - En el
<tbody>, se encuentran dos etiquetas<tr>, cada una representando una fila con datos específicos de la tabla. - Cada fila
<tr>en el<tbody>contiene tres celdas<td>con datos específicos, como "Juan", "30" y "Bogotá" en la primera fila. - En el
<tfoot>,se define una fila con<tr>que contiene una celda<td>con el atributocolspan="3"para que el texto "Datos de ejemplo para demostración" abarque las tres columnas de la tabla (Nombre, Edad y Contacto).
>
Elementos Opcionales y Atributos Adicionales
-
<caption>: Título de la tabla:- Esta etiqueta se coloca como primer elemento dentro de
<table>, antes de etiquetas como<thead>o<tr>. - Por defecto,
<caption>aparece centrado sobre la tabla, pero su alineación y posición pueden ajustarse con CSS. - La etiqueta
<caption>es interpretada por lectores de pantalla como el título de la tabla, mejorando la comprensión de los datos para usuarios con discapacidades visuales.
- Esta etiqueta se coloca como primer elemento dentro de
-
<colgroup>: Especifica un grupo de una o más columnas de una tabla para formatearlas.- La etiqueta
<colgroup>se ubica dentro de<table>, después de su apertura y antes de las filas<tr>, y contiene etiquetas<col>que definen una o más columnas de la tabla. - La etiqueta
<caption>simplifica la gestión de estilos al permitir que múltiples columnas compartan las mismas propiedades visuales, evitando aplicar estilos individualmente a cada celda (<td>o<th>).
- La etiqueta
-
<col>: La etiqueta<col>especifica propiedades de columna para cada columna dentro de un elemento<colgroup>. -
span: El atributo span en la etiqueta<col>de HTML especifica cuántas columnas consecutivas compartirán los estilos o propiedades definidas.
| Estudiante | Examen 1 | Examen 2 | Promedio |
|---|---|---|---|
| Ana López | 85 | 92 | 88.5 |
| Carlos García | 78 | 84 | 81.0 |
| María Ruiz | 95 | 89 | 92.0 |
| Pedro Sánchez | 72 | 79 | 75.5 |
| Tot. Estudiantes: 4 | Prom.: 82.5 | Prom.: 86.0 | Prom. Gen.: 84.25 |
<table class="table">
<caption class="caption">
Calificaciones de Estudiantes
</caption>
<colgroup>
<col class="col-nombre">
<col span="2" class="col-notas">
<col class="col-promedio">
</colgroup>
<thead>
<tr>
<th class="th">Estudiante</th>
<th class="th">Examen 1</th>
<th class="th">Examen 2</th>
<th class="th">Promedio</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td">Ana López</td>
<td class="td">85</td>
<td class="td">92</td>
<td class="td">88.5</td>
</tr>
<tr>
<td class="td">Carlos García</td>
<td class="td">78</td>
<td class="td">84</td>
<td class="td">81.0</td>
</tr>
<tr>
<td class="td">María Ruiz</td>
<td class="td">95</td>
<td class="td">89</td>
<td class="td">92.0</td>
</tr>
<tr>
<td class="td">Pedro Sánchez</td>
<td class="td">72</td>
<td class="td">79</td>
<td class="td">75.5</td>
</tr>
</tbody>
<tfoot class="tfoot">
<tr>
<td class="td">Tot. Estudiantes: 4</td>
<td class="td">Prom.: 82.5</td>
<td class="td">Prom.: 86.0</td>
<td class="td">Prom. Gen.: 84.25</td>
</tr>
</tfoot>
</table>
.table {
width: 100%;
max-width: 600px;
margin: 0 auto;
border-collapse: collapse;
background-color: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden;
}
.table th {
background-color: #4CAF50;
color: white;
padding: 12px 15px;
text-align: left;
font-weight: 600;
}
.table td {
padding: 12px 15px;
border-bottom: 1px solid #ddd;
}
.table tbody tr:hover {
background-color: #f9f9f9;
}
.table tbody tr:last-child td {
border-bottom: none;
}
.table tfoot td {
background-color: #f8f8f8;
font-style: italic;
text-align: center;
padding: 15px;
color: #666;
border-top: 2px solid #ddd;
}
.table tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
.caption {
font-size: 1.3em;
font-weight: bold;
margin-bottom: 12px;
color: #34495e;
background-color: #ecf0f1;
padding: 12px;
border-radius: 5px;
text-align: center;
caption-side: top;
}
/* Columna del nombre */
.col-nombre {
background-color: #e8f4fd;
width: 25%;
}
/* Las dos columnas de notas (span="2") */
.col-notas {
background-color: #fff3cd;
width: 20%;
text-align: center;
}
/* La columna de promedio */
.col-promedio {
background-color: #d4edda;
width: 15%;
text-align: center;
font-weight: bold;
}
.tfoot {
background-color: #e6e6e6;
font-weight: bold;
}
.tfoot .td {
border-top: 2px solid #212529;
}
Estructura de la tabla:
- Título (
<caption>): "Calificaciones de Estudiantes" - proporciona un título descriptivo para la tabla. -
<colgroup>Define grupos de columnas con clases CSS para aplicar estilos específicos: - Encabezado (
<thead>): Contiene los títulos de las columnas: - Cuerpo (
<tbody>): Contiene los datos de cada estudiante con sus respectivas calificaciones. -
span: Este atributo agrupa las columnas dos y tres, tratándolas como una sola para aplicar el formato definido por la clase.col-notas. - Píe de página (
<tfoot>):- Nota importante: Aunque
<tfoot>se coloque en el código HTML antes de<tbody>, visualmente se renderiza al final de la tabla.
- Nota importante: Aunque