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 data | ➡️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 ✅ 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. 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 , , , 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 ➡️ 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️⃣Etiquetatfoot: 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 < < < < 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! 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: < Además: 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! Resumir con IA:
¿Te gustó este artículo?
¡Califícalo!
Resumir con IA: |
|---|
Loading...
