En este post, aprenderemos cómo crear una tabla en HTML y cómo mejorar su apariencia. Pero antes de sumergirnos en los detalles, repasemos algunos conceptos básicos.
HTML (Hypertext Markup Language) es un lenguaje de marcado utilizado para estructurar y presentar contenido en la web. Fue creado por Tim Berners-Lee en 1990 y desde entonces se ha convertido en el estándar para la creación de páginas web. HTML se compone de una serie de etiquetas, también conocidas como elementos, que definen la estructura y el formato del contenido en una página web.
Las tablas son una herramienta esencial en la organización y presentación de datos en una página web. Permiten mostrar información en filas y columnas de manera clara y fácil de entender. Aunque hoy en día se utilizan principalmente para presentar datos tabulares, en el pasado, las tablas también se usaban para crear diseños de páginas web. Sin embargo, con el advenimiento de CSS (Cascading Style Sheets), el diseño de páginas se ha vuelto más flexible y las tablas se reservan principalmente para la presentación de datos.
A lo largo de este post, aprenderemos cómo crear y personalizar tablas en HTML utilizando etiquetas y atributos, así como cómo aplicar estilos con CSS para mejorar su apariencia y hacerlas responsivas.
¿Qué es una tabla de datos?
Navegando por Internet o consultando cualquier otra fuente, te habrás topado con un elemento rígido que hace asociaciones entre información colocada en filas y columnas que convergen entre sí. Estas tablas de datos te permiten asociar diferentes datos en una sola celda. Si consigues introducirla en el HTML de tu web podrás mejorar considerablemente la experiencia de los usuarios.
Definición
Una tabla es un conjunto estructurado de datos tabulados. Estos se agrupan en columnas y filas. De esta forma, podrás encontrar con rapidez la información que estas buscando en cada momento.
Tablas en html
Si no estas familiarizado con el concepto, HTML (HyperText Markup Language) solo debes saber que es un lenguaje de programación empleado en el desarrollo de páginas web. En concreto, es utilizado para estructurar las páginas en cuanto a su contenido. Esto es muy importante desde el punto de vista funcional, pero también desde otros puntos de vista adicionales como la indexación por parte de los algoritmos de los buscadores y el consecuente posicionamiento en los mismos.
las tablas HTML son tablas que nos permiten darle una organización a los datos de nuestra página web como son los textos, las imágenes, los enlaces e incluso otras tablas. ¿Cómo? A través de celdas dispuestas en filas y columnas. Gracias a estas tablas, podemos jerarquizar la información.
Tipos de tablas
Sin embargo, no solamente puedes introducir en tu contenido una tabla, además, puedes definir el estilo y otras características de tu cuadricula de celdas.
Básicas
Estas tablas están formadas por dos tipos de elementos: las columnas y las filas. Son muy útiles y ofrecen información de forma simplificada y básica.
Avanzadas
Las tablas avanzadas son aquellas que disponen de otros elementos añadidos sobre la tabla básica. Por ejemplo, si tienen una cabecera, una sección de pie o diferentes tipos de datos diferenciados por estilos en las columnas o filas. Un ejemplo común de lo que sería una tabla avanzada son aquellas que se utilizan en los balances de empresa o en las finanzas.
Etiquetas
Las partes que componen tu tabla se van a diferenciar y definir mediante las etiquetas que e insertan en el código. Aunque cada tabla solamente va a poder tener una única cabecera y un único pie, sí que podrás añadir todas las secciones que quieras que tenga tu tabla.
Estas etiquetas nos permitirán definir la estructura de la tabla, así como sus filas, columnas y celdas.
Etiqueta <table>
La etiqueta <table> se utiliza para crear la estructura básica de una tabla. Toda la información de la tabla se encuentra dentro de esta etiqueta. Al crear una tabla, asegúrate de cerrar la etiqueta con </table>.
<table>
<!– Aquí irán las filas y celdas de la tabla –>
</table>
Etiqueta <tr>
La etiqueta <tr> se utiliza para crear una fila dentro de la tabla. Cada fila representa una línea horizontal en la tabla. Al igual que con la etiqueta <table>, es necesario cerrar la etiqueta <tr> con </tr>.
<table>
<tr>
<!– Aquí irán las celdas de la fila –>
</tr>
</table>
Etiqueta <th>
La etiqueta <th> se utiliza para crear encabezados de tabla, que son celdas especiales que se utilizan para etiquetar las columnas o filas de la tabla. Los encabezados de tabla generalmente tienen un formato diferente al de las celdas de datos para resaltar su importancia. Al igual que con otras etiquetas de tabla, asegúrate de cerrar la etiqueta <th> con </th>.
<table>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
</tr>
</table>
Etiqueta <td>
La etiqueta <td> se utiliza para crear celdas de datos dentro de una fila. Cada celda representa una columna en esa fila. Las celdas <td> contienen la información que deseas mostrar en la tabla en HTML. Asegúrate de cerrar la etiqueta <td> con </td>.
<table>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
</tr>
</table>
<caption>
Si utilizas esta etiqueta podrás añadir un nombre o un título a la tabla.
| Categoria 1 | Categoria 2 |
|---|---|
| Celda 1 | Celda 2 |
CSS
El CSS es el estilo que quieres aplicar a tu tabla. De esta forma, podrás conseguir que tu tabla tenga un aspecto mucho más agradable. Sin embargo, sí es posible que necesites algunos conocimientos básicos de HTML para poder aplicarlo de forma efectiva.
Propiedad CSS border
Con esta función podrás añadir un borde o pequeño margen alrededor de tu tabla en HTML. Esto es fundamental sobre todo si pones bordes en la cabecera o en el pie de la tabla, ya que si no lo añades quedará inconexo y no será coherente en su estética.
<table border=«1»>
<!– Filas y celdas de la tabla –>
</table>
Propiedad CSS border-collapse
Por defecto, al establecer bordes en los elementos de las páginas, te quedará una separación entre ellos. Eso hace que no sea muy estético y queda un poco extraño a nivel visual. Con esta propiedad, reduces los bordes y el aspecto es, sin lugar a dudas, mucho más agradable.
Cellpadding de CSS
El atributo «cellpadding» define el espacio entre el contenido de una celda y sus bordes. «Cellspacing» establece la distancia entre las celdas. Ambos atributos aceptan valores en píxeles. Al igual que el atributo «border», estos atributos también están obsoletos en HTML5, pero se pueden utilizar en algunos casos.
<table border=«1» cellpadding=«5» cellspacing=«2»>
<!– Filas y celdas de la tabla –>
</table>
Text-align de CSS
El atributo «align» controla la alineación horizontal del contenido de las celdas, mientras que «valign» se encarga de la alineación vertical. Ambos atributos se aplican a las celdas <td> y <th>. Los posibles valores para «align» incluyen «left», «right» y «center», mientras que «valign» admite «top», «middle» y «bottom».
<table border=«1»>
<tr>
<td align=«center» valign=«middle»>Dato 1</td>
<td align=«right» valign=«bottom»>Dato 2</td>
</tr>
</table>
Atributo colspan
Podrás fusionar diferentes celdas consecutivas que están en la misma fila. Tendrás que indicar cuantas columnas vecinas va a ocupar esa celda.
Atributo rowspan
De la misma forma, puedes fusionar varias celdas consecutivas que se encuentren en la misma columna, es decir, en vertical.
Cuerpos, encabezados y pies de la tabla en HTML
Una vez tienes la estructura básica de la tabla, puedes añadir algunos elementos para organizar o dar aún más estética a tus datos. Los siguientes atributos pueden tener una o más filas, según las que quieras agrupar
<tbody>
Es la etiqueta que hace referencia al cuerpo de la tabla en HTML. Por lo tanto, dentro de este elemento incluirás las celdas, es decir, debe contener una o más filas que formaran un grupo. Te puede servir para dividir temáticamente las filas, ya que una misma tabla en HTML puede contener uno o más cuerpos.
<thead>
Este elemento sirve para definir una sección de encabezados dentro de una tabla. Debe contener una o más filas que serán las que nos aporten información de encabezados para las celdas que contengan los datos.
<tfoot>
Este elemento definirá el pie de tu table. También debe contener varias filas o al menos una que serán las que aporten información de pie para las celdas de datos superiores.
| Producto | Cantidad | Precio |
|---|---|---|
| Total | 45 | |
| Champu | 5 | 5 |
| Gel | 2 | 5 |
| Galletas | 1 | 10 |
Tabla en HTML responsiva
Una vez tienes la estructura básica de la tabla en HTML, puedes añadir algunos elementos para organizar o dar aún más estética a tus datos. Los siguientes atributos pueden tener una o más filas, según las que quieras agrupar.
En la era actual, donde los dispositivos móviles y las diferentes resoluciones de pantalla son la norma, es crucial que la tabla en HTML sea responsiva y se adapte a diferentes tamaños de pantalla.
¿Qué es el diseño responsivo?
El diseño responsivo es un enfoque de diseño web que busca optimizar la experiencia del usuario en diferentes dispositivos y resoluciones de pantalla. Esto se logra ajustando automáticamente el diseño y el contenido de la página en función del tamaño de la pantalla del dispositivo que se utiliza.
Cómo hacer una tabla en HTML responsiva y CSS
Para hacer una tabla responsiva en HTML, utilizaremos CSS y consultas de medios. Las consultas de medios nos permiten aplicar estilos específicos basados en ciertas condiciones, como el ancho de la ventana del navegador.
Aquí hay un ejemplo de cómo hacer una tabla en HTML y CSS responsiva:
- Primero, crea la tabla en HTML:
<table class=»responsiva«>
<thead>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
<th>Encabezado 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dato 1.1</td>
<td>Dato 1.2</td>
<td>Dato 1.3</td>
</tr>
<tr>
<td>Dato 2.1</td>
<td>Dato 2.2</td>
<td>Dato 2.3</td>
</tr>
</tbody>
</table>
- Luego, añade el siguiente CSS para hacer la tabla responsiva:
.responsiva {
width: 100%;
overflow-x: auto;
display: block;
}
@media screen and (max-width: 767px) {
.responsiva thead {
display: none;
}
.responsiva tbody tr {
display: block;
margin-bottom: 10px;
}
.responsiva td {
display: block;
text-align: right;
padding: 5px;
}
.responsiva td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
}
- Finalmente, agrega el atributo
data-labela cada celda<td>en la tabla en HTML:
<tr>
<td data-label=»Encabezado 1«>Dato 1.1</td>
<td data-label=»Encabezado 2«>Dato 1.2</td>
<td data-label=»Encabezado 3«>Dato 1.3</td>
</tr>
Con este enfoque, la tabla en HTML se mostrará con un diseño de bloques en dispositivos con pantallas más pequeñas (menores a 768 píxeles de ancho). Las celdas se apilarán verticalmente, y los encabezados se mostrarán junto a cada dato en lugar de en una fila separada. Esto permite que la tabla sea legible y fácil de navegar en dispositivos móviles.
Esperamos que hayas disfrutado de este post.
