El HTML es un lenguaje que se utiliza para crear páginas web, sirve para dar forma y definir su estructura. Explicado de manera más sencilla: es gracias a este código que al leer un artículo como este tú puedes ver el título, las negritas, las imágenes, diferentes tamaños de letras, etc. ¡Y, cómo no, las tablas! Vamos a ver qué son y cómo y por qué utilizarlas.
Explicar qué es una tabla no es muy complicado, una tabla organiza una determinada información de forma más ordenada y clara colocándola en filas y en columnas; o como se dice en lenguaje algo más técnico, de forma tabular. En su propia definición está también el motivo por el que usarlas, y es, precisamente, presentar la información de manera más clara. También son útiles para grandes cantidades de datos, o para hacer comparaciones. ¡Vamos a verlo con un ejemplo!⬇️
Fruta
Pera
Manzana
Sandía
Plátano
Precio
1 euro/kilo
1,50 euros/kilo
2 euros/kilo
0,90 euros/kilo
✅ Como ves, para comparar el precio de la fruta, se puede poner en una tabla con cada fruta y su precio; también serviría para un inventario en el que consultar gran cantidad de información.
Una vez que sabemos qué son las tablas HTML y para qué sirven, vamos a ver cómo se hacen. 👇
Estructura básica de una tabla HTML
Para crear la estructura básica de una tabla HTML tenemos que conocer las principales etiquetas que utilizaremos para hacerla. Al igual que sucede en las imágenes en HTML, esas etiquetas son la grafía que vamos a emplear para indicar que lo que viene a continuación es, precisamente, una tabla. ¿Cuáles son y para qué sirven? ¡Lo vemos, con una tabla!
Etiqueta
<table> ➡️
<tr> ➡️ table row (fila)
<td> ➡️ table data
<th> ➡️table head
Función
Indicar que comienza una tabla
Añadir celdas a la tabla
Añadir filas a la tabla
Poner un encabezado en la tabla
Por lo tanto, para crear una tabla HTML hay que utilizar la etiqueta <table> y, para darle forma a la misma usaremos tr, td y th que son las etiquetas para crear las celdas, las filas y el encabezado de la tabla.
✅ Ejemplo básico de tabla HTML:
Mira en esta imagen cómo sería un ejemplo básico de la estructura de una tabla en HTML.
👆 Te interesa: poner comentarios en HTML puede serte muy útil para hacer cualquier anotación necesaria respecto a la tabla que estás elaborando.
Tablas HTML avanzadas: paso a paso
Ya hemos visto el paso a paso para crear una tabla básica HTML pero, como es lógico, las "cosas" se pueden complicar más y con HTML es posible crear tablas más avanzadas. Si crees que puedes pasar al siguiente nivel, ¡seguimos!
Para crear una tabla ordenada en HTML y dotarla de una estructura utilizaremos las etiquetas <thead>, <tbody>, <tfoot>, para crerar tablas más legibles y con cabeceras. Como hemos hecho más arriba, vamos a ver para qué sirven cada una de ellas.
Etiqueta
<thead> ➡️
<tbody> ➡️
<tfoot> ➡️
Función
La información del encabezado de la tabla
La información del cuerpo de la tabla
La información del pie de la tabla
Tal vez visto así no te quede del todo claro cómo se "traduce" cada una de estas funciones, pero vamos a ver el paso a paso con ejemplos concretos para que sea más pedagógico. No obstante, esta tabla te puede servir de guía en el futuro para recordar las etiquetas más importantes de la tabla.
1️⃣Etiqueta thead: en el ejemplo concreto que acompaña estas líneas, thead sirve para indicar la información de la cabecera, que en este caso sería Nombre, Edad y Ciudad.
2️⃣Etiqueta tbody: se refiere a la información del cuerpo de la tabla; es decir, Ana, 30 años, Madrid y Juan, 25 años, Barcelona.
3️⃣Etiqueta tfoot: por último, podemos decir que tfoot sería el pie de la tabla, por ejemplo un recuento: total, dos personas registradas.
¿Queda más claro así? Vamos a seguir viendo ejemplos para que no haya duda alguna. Porque, además de esta estructura más compleja de la tabla, también podemos seguir añadiendo algunos estilos básicos con atributos HTML. Concretamente con la etiqueta style, se pueden hacer algunas modificaciones del color, el tipo de letra, el tamaño, etc. Estos son algunos de los más utilizados. ⬇️
Etiqueta
<style> + <color>➡️
<style> + <font-size>➡️
<style> + <background-color> ➡️
<style> + <border> ➡️
Función
Para cambiar el color
Para cambiar el tamaño de la letra
Para cambiar el color de fondo
Para delimitar los bordes de la tabla
⚠️ Importante: este tipo de modificaciones para una sola tabla se pueden hacer sin problema tal y como hemos visto; pero si se trata de un gran proyecto, tendrás que repetir manualmente en cada tabla estos atributos, por lo que lo mejor crear hojas de estilo HTML
¿Qué son las hojas de estilo?
Un tipo de archivo que describe cada elemento de una página web, que aplicará a toda la página y no solo a tabla en la que estás trabajando.
🎥 Mira en el siguiente vídeo para saber cómo se integran, paso a paso, los elementos más importantes de una tabla más compleja:
👆 Pero antes: aprender a darle formato al texto en HTML es uno de los aspectos más importantes para iniciarte en el HTML básico. ¡Y también puede ser muy sencillo!
Errores comunes al trabajar con tablas en HTML
Cuando trabajamos con tablas hay algunos errores, muchos de ellos comunes al uso del HTML, otros particulares de las tablas, que debemos evitar. Estos son algunos de los más señalados:
Respecto a los problemas de accesibilidad y cómo solucionarlos vamos a detenernos un instante, pues es un tema importante a tener en cuenta. Se trata de un nivel más elevado y más técnico, pero que es necesario al menos conocer, y es que a las tablas se les pueden añadir subtítulos, también resúmenes para que sean accesibles a todos los usuarios.
La etiqueta caption, por ejemplo, ayuda en este sentido, ya que sirve para poner un título a tu tabla, que también sirve a modo de resumen, y que es especialmente útil para personas ciegas.
✅ Ejemplo: <table> <caption> precio de las frutas </caption> </table>
Además:
- Cuanto más estructurada sea la tabla, utilizando todos los elementos que hemos explicado hasta ahora, será también más accesible.
- También hay etiquetas como <
id> o <scope> que sirven para relacionar encabezados y celdas y especificar para qué celda es cada encabezado que también ayudan en este sentido.
Se trata de un lenguaje llamado "Cascading Style Sheets", que quiere decir "hojas de estilo en cascada", que lo que hace es definir el diseño de un documento de forma "masiva". Es decir, en el caso de las tablas, se podían definir sus características y estilos en todo el documento (o en varios) y no tabla por tabla. Y todo ello de forma automática. También se puede usar para otros atributos de HTML.
Por último, cabe destacar de nuevo que existen alternativas modernas a las tablas para maquetación de página web con HTML, y que las tablas no tienen esta función. Como hemos mencionado los CSS son la alternativa más eficaz para ordenar y alineas la información de una web. Existen diferentes tipos en función de cuál sea la necesidad de la página que estás creando. ¡Y siempre puedes volver a las tablas si se trata de algo muy sencillo!
¿Te gustó este artículo? ¡Evalúalo!
Loading...
