Las tablas juegan un papel importante a la hora de presentar datos en un formato organizado. En este tutorial aprenderás cómo crear tablas básicas de HTML y cómo usar las etiquetas esenciales para el diseño y la estructura.
Guía paso a paso
¡Comencemos a crear tu primera tabla! Primero debes saber que la etiqueta base para una tabla es. Esta etiqueta rodea toda la tabla.
Ahora vamos a agregar una fila. Cada fila se define con la etiqueta, que significa "fila de tabla". En esta fila aún no hay datos, así que por ahora se queda vacía. Puedes imaginar que cada fila puede ofrecer espacio para varias columnas.
Ahora es el momento de agregar algunos datos a la tabla. Para ello utilizamos la etiqueta y añadimos los valores correspondientes. Supongamos que el primer nombre es "Jan", el correo electrónico "support@programmierenlern.info" y la fecha de nacimiento es el 23.06.1982. Tu fila debería verse así:
Asegúrate de que la tabla ahora se vea mejor. Puedes agregar tantas filas como desees simplemente utilizando más etiquetas - y -. Vamos a agregar otro empleado. Llamémoslo "Joe Average" y su correo podría ser "joe@average.com".
Si ahora recargamos la tabla, notamos que está creciendo y todos los datos ingresados son visibles. La estructura es importante, ya que te proporciona una visión clara de la información.
¿Qué pasa si quieres agregar un pie de página al final de la tabla, por ejemplo, para un copyright? Aquí entra en juego el colspan. Con colspan puedes especificar cuántas columnas debe abarcar una celda. Así que para establecer un copyright sobre las tres columnas, escribes: Copyright 2015 coding-geeks.de.
Después de agregar este pie de página, debes verificar la representación. La idea es que el pie de página se posicione debajo de las columnas y presente los datos de manera clara. En este caso, el pie de página no tiene su propia columna y, por lo tanto, debe estar sobre las otras tres columnas.
Si ahora reduces el colspan a un valor de dos, también podrías agregar un segundo aviso. Supongamos que deseas mostrar "Coding Geeks" en una nueva columna. Para ello, utiliza nuevamente la etiqueta -, aplicando correctamente el colspan.
Si has seguido todos estos pasos, has aprendido a crear tablas HTML básicas. Sin embargo, el diseño visual debe realizarse siempre a través de CSS, para mejorar el diseño y la experiencia del usuario. Esto implica separar el contenido del diseño, de modo que posteriormente tengas más flexibilidad al diseñar tus páginas web.
Resumen - Crear tablas básicas de HTML
Has aprendido la estructura y el uso de las tablas HTML, empezando desde la construcción hasta la colocación de datos y el pie de página. Con esto, ahora puedes mostrar datos tabulares simples en tu página web.
Preguntas frecuentes
¿Cuáles son las etiquetas básicas para tablas HTML?Las etiquetas básicas son,, para encabezados y para celdas de datos.
¿Puedo crear un número ilimitado de filas y columnas en una tabla?Sí, teóricamente puedes agregar muchas filas y columnas, pero es importante mantener la legibilidad en mente.
¿Cómo debería estilizar tablas?Utiliza CSS para el diseño, en lugar de atributos HTML directos como border.
¿Qué significa colspan?El atributo colspan permite que una celda se extienda sobre varias columnas.
¿Por qué es mejor CSS para el diseño que los atributos HTML?CSS separa el contenido de su estilo, lo que ofrece más flexibilidad y más opciones para el diseño.
