Las tablas en HTML son un elemento importante para representar datos en una página web. Por esto, en este post, te explicaremos cómo crear tablas en HTML, tanto simples como complejas.
¿Por qué crear tablas en HTML?
La ventaja principal de aprender a escribir tablas directamente en tu documento HTML es que podrás editarlas y personalizarlas con facilidad cada vez que sea necesario. Cuando se implementan correctamente, las tablas en HTML pueden leerlas los lectores de pantalla, a diferencia de lo que sucede con la imagen de una tabla hecha en otro software. Esto hace que la experiencia de usuario sea mejor tanto para personas con discapacidad visual como para el resto de navegantes.
Algunas personas usan tablas en HTML para generar la estructura de la página web. Nosotros no recomendamos hacerlo, ya que puede afectar a la lógica de los lectores de pantalla y hacer que la experiencia de personas con discapacidad visual sea negativa y confusa. Además, estructurar usando tablas puede llevar a etiquetas complejas y pasos extra. Por eso, a continuación nos concentramos en el uso común de tablas: los datos.
Estructura básica
Como todas las agrupaciones de datos, las tablas en HTML se organizan en filas y columnas que crean celdas. Las etiquetas básicas para crear una tabla HTML son:
- <table>: crea el elemento de tabla.
- <tr>: representa una fila.
- <th>: representa las celdas de encabezado.
- <td>: representa las celdas de datos.
- <caption>: representa un título descriptivo en una tabla.
Las tablas HTML se basan en filas (<tr>) que contienen celdas de encabezados (<th>) y/o celdas de datos (<td>). De este modo, se escriben por filas de arriba a abajo. Las columnas se van creando dentro de cada fila al insertar celdas. La siguiente imagen demuestra cómo se hace para generar tabla HTML simple:
Aunque esta estructura básica puede llevarnos muy lejos, las tablas HTML se pueden complicar incluso antes antes de tomar decisiones de estilo con CSS.
Agrupaciones y expansiones
A continuación, te explicaremos cómo crear tablas HTML de forma más avanzada usando las etiquetas de expansión y agrupación en la estructura básica.
En primer lugar, para expandir una celda existen dos atributos importantes, que son:
- colspan: el atributo colspan permite expandir las celdas de datos o de encabezados al número de columnas que deseemos que ocupe. Por ejemplo, para hacer que una celda de datos ocupe cuatro columnas, debes escribirlo así: <td colspan= «4»>
- rowspan: el atributo rowspan permite expandir las celdas al número de filas que queremos que ocupe. Siguiendo el ejemplo anterior, si quieres que una celda de datos ocupe cuatro filas, lo escribirás así: <td rowspan=»4″>
Además de las expansiones, las tablas en HTML también pueden tener agrupaciones para crear distinciones entre la cabecera, los datos y el pie de tabla. Para crear estas agrupaciones, dispones las siguientes etiquetas HTML:
- <thead>: esta etiqueta agrupa los elementos de la cabecera en la tabla.
- <tbody>: esta etiqueta agrupa los elementos de contenido en la tabla.
- <tfoot>: esta etiqueta agrupa los elementos de pie en la tabla.
En la siguiente imagen puedes encontrar un ejemplo de cómo se ve una tabla HTML usando estas etiquetas:
Aunque la tabla anterior puede crearse con la estructura básica que te hemos explicado, estas dos tablas en HTML son semánticamente diferentes. En términos visuales la diferencia no será notoria; sin embargo, al agregar las etiquetas HTML de cabecera, contenido y pie, tanto el sistema como el escritor del código pueden reconocer fácilmente qué forma parte de cada sección. Por ejemplo, usar estas etiquetas puede ayudar a un extractor de datos a identificar en qué filas se encuentran los datos principales, porque son parte de la etiqueta de contenido.
Si quieres revisar los conocimientos que has obtenido en este artículo, puedes realizar estos ejercicios prácticos.
Estilizar tablas en HTML
Aunque este post no se centra en cómo personalizar y estilizar tus tablas en CSS, te explicaremos los elementos básicos para estilizar tus celdas y generar la tabla HTML.
<col>
Este elemento nos permite especificar propiedades de estilo para toda una columna. Sin este elemento tendríamos que especificar el estilo en cada celda <th> o <td> de la columna que queramos estilizar. El elemento <col> se especifica dentro de un bloque <colgroup>, justo debajo de la apertura <table>. Las propiedades que se pueden implementar están limitadas a <border>, <background>, <width> y <visibility>, pero con estas puedes llegar muy lejos y diferenciar tu tabla.
Las especificaciones de tus propiedades se hacen en cada línea o columna. Si, por ejemplo, quieres que la columna uno sea blanca y la columna dos sea negra, debes escribir <col> en la primera línea y <col style = «background-color: black»> en la segunda línea. Es decir, hay que escribir <col> en toda la columna aunque no vayas a implementar ninguna propiedad.
Atributo span
Para aplicar una propiedad a más de una columna no es necesario repetir la propiedad en cada elemento <col>. Lo más sencillo es aplicarle el atributo span al primer elemento <col>. Este atributo funciona igual que rowspan y colspan, es decir, nos permite expandir la influencia de <col> al número de columnas que queramos. Si quisiéramos que las primeras dos columnas fueran negras, escribiríamos <col style = «background-color: black» span = «2»>.
¿Qué sigue?
¿Te ha gustado aprender las bases para crear tablas en HTML? ¡Con KeepCoding puedes continuar aprendiendo! Aprende cosas similares a como aumentar el tamaño de una tabla en html, como cambiar el tamaño de una tabla en html o como hacer una tabla mas grande en html.
Te invitamos a inscribirte en nuestro bootcamp intensivo Desarrollo Web Full Stack Bootcamp, donde en pocos meses dominarás todo lo necesario para convertirte en un desarrollador experto. Entre los conocimientos que adquirirás, se incluye una formación mucho más extensa de HTML y todas sus etiquetas y atributos. ¡Solicita información y matricúlate ya!
