Insertar una tabla en tu contenido online puede hacer que este sea mucho más claro y útil para los usuarios. Sin embargo, para que realmente sea beneficioso, debes asegurarte de que quede claro y estético. Si conoces las etiquetas básicas podrás aportar estilo visual a tu tabla html.
¿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.
<table>
Esta etiqueta es básica y fundamental cuando quieres hacer una tabla en html. Es la definición en sí de una tabla en el código. Al insertarla indicas que quieres crear una cuadricula dividida en columnas y filas.
<tr>
Esta es la etiqueta que define las filas dentro de la tabla.
<th>
Con esta etiqueta definirás las columnas.
<td>
En este caso la etiqueta sirve para definir la celda de la tabla.
<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. 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.
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.
Padding de CSS
Es posible que al ver el resultado y, a pesar de haber añadido los bordes en las celdas, quieras incluir un poco más de espacio, por ejemplo, a las celdas de título o a la table. En estos casos, debes utilizar el padding que ayuda a rellenar y hace que este un poquito más separado.
Text-align de CSS
Con esta etiqueta puedes definir la alineación del contenido de un elemento del bloque. De esta forma, puedes decidir si el texto debe alinearse a la derecha, a la izquierda, en el centro o justificado. Lo puedes aplicar tanto a elementos de bloque como al contenido de las celdas.
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 tablas 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. 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 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 |
