Una tabla HTML es una forma sencilla de organizar la información que aparece en un código HTML, basándonos en la ubicación de filas y columnas.
Una tabla básica dispone de tres elementos claramente diferenciados:
- <table>, el contenedor principal
- <tr>, el representante de las filas que contienen las celdas
- <td>, el representante de las celdas.
Estos tres conceptos básicos de HTML son los que nos permiten organizar una tabla en HTML.
Siguiendo con las enseñanzas de HTML, hoy vamos a aprender cómo crear tablas en HTML con algunos ejemplos prácticos. Las tablas HTML permiten organizar datos como texto, imágenes, enlaces, otras tablas, etc. en filas y columnas de celdas. ¿Estás preparado para aprender? Pues sigue leyendo.
¿Qué es una tabla de HTML?
A grandes rasgos, una tabla de HTML es una manera sencilla de ordenar etiquetas, para que la visión de datos en HTML resulte más sencilla.
En las tablas sencillas se comienza con la etiqueta <table>, de esta forma definimos la tabla. Una tabla de dos filas por dos columnas sería el ejemplo clásico de una tabla sencilla, sin embargo, lo común es trabajar con tablas más complejas.
El atributo <colspan> nos permite integrar varias tablas en una sola. Mediante este sistema podemos trabajar con complejas tablas de datos, pero visualizándolas de una manera sencilla y eficaz.
Lo que buscamos mediante este tipo de tablas es conseguir una visión más clara e inmediata acerca de un código más o menos complejo.
Tipos de tablas
Existen tipos de tablas en HTML muy diferentes, pero los módulos básicos son los siguientes:
- Tabla básica: Se considera una tabla básica a la compuesta por dos filas y dos columnas, o bien tres filas y dos columnas.
- Tablas expandidas: Las tablas expandidas incluyen ítems aislados que ocupan dos filas.
- Tablas con cabeceras: En estas tablas se incluye un título en cada columna. Los títulos también pueden ser laterales si los ubicamos en cada fila.
- Cabeceras múltiples: Estas tablas incluyen diferentes ítems expandidos, además de cabeceras.
En realidad existen muchos tipos de tablas diferentes, pero la gran mayoría se pueden encuadrar en estos 4 tipos básicos.
Cómo hacer una tabla en HTML paso a paso
Como decíamos, las tablas se definen con la etiqueta <table>.
Las tablas se dividen en filas de la tabla con la etiqueta <tr>.
Las tablas se dividen en filas con la etiqueta <td>.
Por ejemplo, esta es una tabla con dos filas y dos columnas (En todos los ejemplos pongo primero el código y luego cómo se vería en la web):
<table>
<tr>
<td>Fila 1, Columna 1</td>
<td> Fila 1, Columna 2</td>
</tr>
<tr>
<td>Fila 2, Columna 1</td>
<td>Fila 2, Columna 2</td>
</tr>
</table>
Fila 1, Columna 1 Fila 1, Columna 2
Fila 2, Columna 1 Fila 2, Columna 2
Puesta así como está en el ejemplo anterior la tabla tiene estructura de tabla, pero no tiene bordes, por lo que su visualización puede ser algo complicada. Para poner borde hay que añadir el atributo border en la etiqueta table. La primera fila de la tabla puede convertirse en el encabezado de la tabla con la etiqueta <th>. Veamos un ejemplo de esto con una tabla sencilla donde aparezcan los ganadores de una carrera:
<table border=»1″>
<tr>
<th>Puesto</th>
<th>Corredor</th>
</tr>
<tr>
<td>Usain Bolt</td>
<td>1</td>
</tr>
<tr>
<td>Chema Martinez</td>
<td>2</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>3</td>
</tr>
</table>
Corredor Puesto
Usain Bolt 1
Chema Martínez 2
Shabbir Hussein 3
Bien, ya tienes una tabla con bordes. El border=1 significa que el borde mide un solo píxel.
Otros atributos interesantes son colspan (para combinar dos o más columnas en una sola) y rowspan (para combinar dos o más filas en una sola).
<table border=»1″>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<th>Columna 3</th>
</tr>
<tr><td rowspan=»2″>Fila 1 Celda 1</td><td>Fila 1 Celda 2</td><td>Fila 1 Celda 3</td></tr>
<tr><td>Fila 2 Celda 2</td><td>Fila 2 Celda 3</td></tr>
<tr><td colspan=»3″>Fila 3 Celda 1</td></tr>
</table>
Columna 1 Columna 2 Columna 3
Fila 1 Celda 1 Fila 1 Celda 2 Fila 1 Celda 3
Fila 2 Celda 1 Fila 2 Celda 2
Fila 3 Celda 1
Puede establecer una anchura y altura de la tabla usando los atributos width y height respectivamente. Puedes especificar la anchura o altura de la tabla en píxeles o en términos de porcentaje de área de pantalla disponible.
Ejemplos:
<table border=»1″ width=»400″ height=»150″>
<table border=»1″ width=»100%» height=»50%»>
Celdas y encabezados
Este tipo de celda se usa para organizar y categorizar otras celdas. Es el elemento <th> el que se ubica en la primera fila de la tabla, encima de las celdas comunes.
Atributos en una tabla en HTML
Los atributos son valores adicionales que configuran los elementos de diversas formas.
Títulos
El título aporta jerarquía y legibilidad. Algunas tablas no necesitan de la inclusión de títulos, pero la mayoría de las veces los titles son muy útiles.
Unificación de celdas
Se trata de combinar o unir dos o más celdas anexas en una sola tabla. los atributos colspan y rowspan son los que hacen posible unir filas y columnas respectivamente.
Agrupación de filas
HTML propone tres soluciones diferentes para llevar a cabo la unión de filas.
- <thead> para filas que disponen de un encabezado.
- <tfoot> para filas con pie o resumen.
- <tbody> para bloques completos de filas que queremos unir en un solo cuerpo de datos.
Agrupación de columnas en una tabla en HTML
El elemento colgroup es el que nos permite agrupar columnas para que tengan un único significado semántico.
!Haz una práctica!
En cualquier caso, lo mejor que puedes hacer es practicar. Con nuestra guía para hacer una tabla de HTML podrás disponer de toda la información que necesitas para agrupar y ordenar tus líneas de HTML.
Te deSEO un buen día
William Penguin.
