Tablas en HTML

Es muy importante tener un gran entendimiento de lo que son las tablas en HTML. Hoy en día ya no, gracias a dios, pero antiguamente se hacían las paginas web con tablas. Pese a ellos, los nuevos frameworks de HTML como puede ser Bootstrap o foundation o básicamente cualquiera utilizan una estructura basad en una estructura filas y columnas, que ya veremos si vemos un curso de Bootstrap y tal, por hora, vamos a centrarnos en las tablas.

 

1 – Qué es una tabla en HTML

Como todos sabemos una tabla es lo que es. Igual que en el Word una tabla es un bloque que contiene filas y columnas con sus encabezados el cual nos permite organizar el contenido en filas y columnas. Siendo la combinación de cada fila y columna una celda. Y estas celdas son las que contienen los datos, que pueden ser imágenes, fotos o cualquier tipo de media como video o audio.

2 – Cómo crear tablas en HTML

Para crear una tabla en HTML debemos utilizar la etiqueta <table> esta etiqueta es la que va a contener toda la información de la tabla.

2.1 – Filas y columnas

Los elementos principales de una tabla son las filas y las columnas.

Las filas las indicamos con las etiquetas de apertura y cierre de <tr></tr> dentro de  la etiqueta <table>, mientras que cada una de las columnas la marcamos con la etiqueta <td>texto</td> indicando el contenido.

Pero las filas y las columnas no son los únicos elementos que podemos introducir. 

<table>
    <tr>
        <td>campo de futbol</td>
        <td>sábado</td>
        <td>50€</td>
    </tr>
    <tr>
        <td>suma total</td>
        <td>Semana</td>
        <td>110€</td>
    </tr>
</table>  

2.2 – Cabecera de las columnas en una tabla

Comúnmente cuando creamos una tabla, la primera de las filas la utilizamos para indicar que es lo que va a contener la columna, para ello utilizaremos la etiqueta <th>

La cual ubicaremos en la primera fila de nuestra tabla utilizando un <tr>. Lo que la etiqueta <th> hace por defecto es marcarnos en negrita el contenido de cada una de las celdas.

<table>
    <tr>
        <th>Lugar gasto</th>
        <th>Día</th>
        <th>Precio</th>
    </tr>
    <tr>
        <td>campo de futbol</td>
        <td>sábado</td>
        <td>50€</td>
    </tr>
    <tr>
        <td>suma total</td>
        <td>Semana</td>
        <td>110€</td>
    </tr>
</table>  

2.3 – Título de una tabla 

Cuando definimos una tabla, pese a que no es obligatorio, podemos querer indicar un titulo para la misma. Para ello podemos utilizar la etiqueta <caption>titulo</caption> la cual va justo después de la etiqueta <title>. 

2.4 – Etiquetas de estructura de tablas

No podemos despedirnos de las etiquetas que podemos utilizar con las tablas en HTML sin comentar las principales de agrupación. Las cuales nos permiten separar el contendió de la cabecera, del del cuerpo, así como del pie.

1. Etiqueta thead en una tabla HTML
   • Contiene la cabecera de las celdas, ósea contiene el <tr> que contiene los <th>
2. Etiqueta tbody en una tabla HTML
   • Se utiliza para agrupar el contenido en una tabla, todo lo que serian las filas con contenido.
3. Etiqueta tfoot en una tabla HTML
   • Agrupa el contenido final de una tabla. Este quizá es el menos común, ya que no todas las tablas tienen un pie. Podríamos por ejemplo tenerlo cuando hacemos un cálculo de gastos para hacer una agrupación al final con el total. 

Debemos indicar las tres etiquetas previamente mencionadas para crear una tabla correctamente. Si no las ponemos el navegador la entenderá perfectamente, pero es mejor si las ponemos. Por ejemplo, Bootstrap el framework para los estilos que he mencionado antes, no activa las funcionalidades adicionales que tiene en las tablas si no ponemos estas etiquetas. 

Otra de las funcionalidades si utilizamos estas tablas es que, si vamos a imprimir una tabla, en papel, y esta ocupa varios folios, nos permite utilizar la cabecera y el pie en cada una de las páginas. 

<table>
    <caption>Título</caption>
    <thead>
        <tr>
            <th>Lugar gasto</th>
            <th>Día</th>
            <th>Precio</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>campo de futbol</td>
            <td>sábado</td>
            <td>50€</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>suma total</td>
            <td>Semana</td>
            <td>110€</td>
        </tr>
    </tfoot>   
</table> 

3 – Estilos de las tablas en HTML

Pero una tabla como tal no es nada sin sus atributos los cuales le darán un toque con estilo a la tabla. Como habéis podido ver, actualmente la tabla no luce como una tabla simplemente vemos dos columnas si, pero si no supiéramos que es una tabla podríamos pensar que esta tabulado.

Vamos a ver un pequeño avance del CSS, pero solo es algo pequeño.

3.0 – Avance de CSS

Para poder seguir correctamente sin utilizar elementos que están en deshuso debemos crear un estilo para la tabla para ello debemos utilizar la etiqueta <style></style> he indicaremos dentro de la misma el elemento sobre el que vamos a actuar, en este caso, el elemento table. 

3.1 – Añadir Borde a una tabla HTML

Para añadir un borde a una tabla simplemente tenemos que utilizar el atributo border e indicarle el tipo de borde que queremos, hay muchos y aquí os dejo la lista: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit

table{
    border: double;
}

Pero como podéis ver, eso solo ha incluido un borde al cuadro exterior de la tabla, si queremos que todas nuestras filas y columnas tengan el borde debemos indicarlo en el css, añadiendo, en el estilo, th y td.

table, th, td{
    border: double;
}

Y como no podría ser menos le podemos cambiar el color, indicando la propiedad color y posteriormente el color en inglés o bien un código en hexadecimal

table, th, td{
    border: double;
    border-color: red;
}

3.2 – Colapsar los bordes en tablas HTML

Observamos que el borde luce terrible ya que este duplicado, para evitar esta situación debemos llamar al atributo border-colapse el cual, detecta si hay dos bordes juntos y los junta.

Este es un atributo de la tabla, por lo que deberemos crear otro estilo, únicamente para la tabla que lo contenga. 

table{
    border-collapse: collapse;
}

3.3 – Tamaño de una tabla HTML 

 Como podéis ver, la tabla es lo más compacta posible, y esta es una característica que rara vez queremos. Lo más común es ampliar una tabla al máximo de la pantalla, hay que recordar que cuando creamos una web, rara vez el contenido principal que contiene la información llena la pantalla, así que el resultado sería similar a cuando ponemos una tabla en el Word.

Para ello utilizamos el atributo width sobre la tabla y con un tamaño del 100% si queremos que ocupe toda la página.

table{
    border-collapse: collapse;
    width: 100%;
}

Como vemos el cambio es evidente, además por defecto nos pondrá los <th> centrados mientras que las celdas normales, las pone alineadas a la izquierda. 

Por supuesto podemos ampliar el tamaño por ejemplo de la cabecera, para que se vea mejor. Para ello podemos aumentar la altura, utilizando la etiqueta height pero en este caso lo haremos solo sobre la etiqueta <th> en pixeles.

th{
    height: 30px;
}

3.4 – Espaciado entre celdas

Se ve a simple vista que el contenido de las celdas esta muy junto entre ellas, y que además el texto, esta demasiado cerca del borde. Para evitar esta situación utilizamos una propiedad que se llama padding al cual le pasaremos un tamaño, normalmente en pixeles.

td{
    padding: 5px;
}

Si observamos el resultado, ha habido un espaciado en todas las direcciones, pero esto lo podemos cambiar, podemos indicar que solo queremos o que queremos uno diferente en el espaciado de cualquiera de las cuatro posiciones, utilizaremos padding-top para el superior, padding-right para la derecha, padding-left para la izquierda, y padding-bottom para la parte inferior.

Podemos modificar los cuatro paddings con una sola instrucción padding si le pasamos las cuatro posiciones, pero lo veremos en el apartado de CSS.

3.5 – Resaltar filas tabla HTML al pasar por encima

Una de las características mas comunes que solemos ver cuando trabajamos con tablas es resaltar la fila en la que estamos, para ello debemos hacerlo con CSS utilizando pseudoelementos que veremos mas adelante, pero que se indican con el carácter “:” y hover es el que utilizamos cuando pasamos el ratón por encima. En este caso, se lo debemos aplicar al elemento fila, ósea <tr> y le cambiaremos el color de fondo, por uno gris. 

tbody > tr:hover{
    background-color: black;
    color: white;
}

3.6 – Intercalar resalto de filas en tablas HTML

Finalmente, en este apartado veremos cómo mejorar drásticamente la presencia de una tabla en nuestra pagina web. Y la forma de hacerlo es tambien utilizando CSS indicando el siguiente selector.

tr:nth-child(odd){
    background-color: #f2f2f2;
}

Como observamos es un poco extraño, ya que tiene, el selector de la etiqueta <tr> y después un pseudoelemento indicando los hijos nth-child() al cual le pasamos por parámetro par o impar even/odd. Y posteriormente abrimos y cerramos las llaves.

4 – Nested tablas 

También podemos introducir una tabla dentro de una celda de otra tabla, lo cual nos incluirá una tabla dentro de otra. 

5 – Combinar celdas

5.1 – Combinar columnas de tablas en HTML

Comúnmente cuando creamos tablas, deseamos combinar ciertas columnas, un ejemplo muy sencillo es y siguiendo el ejemplo que estamos realizando, el gasto económico, al final del todo querremos saber cuanto nos hemos gastado. Y ponerlo de una forma acumulada y que quede bonito.

Para ello agruparemos en la última fila las columnas. Dejado únicamente dos, el texto indicando que es la suma del total y la cantidad, para ello utilizaremos la propiedad colspan sobre la celda que queremos combinar e indicaremos el número de celdas que queremos combinar. 

<tfoot>
    <tr>
        <td colspan="2">suma total</td>
        <td>110€</td>
      </tr>
</tfoot>

Hay que tener cuidado que no combinamos mas celdas y posteriormente no incluimos mas celdas de las que tiene la tabla, o la tabla se nos hará mas grande. 

5.2 – Combinar filas de tablas en HTML

Podemos realizar la misma acción para combinar dos filas.

Seguimos en el mismo supesto del ejemplo, pero esta vez utilizaremos rowspan para indicar que son filas lo que queremos combinar.

<tr>
  <td rowspan="2">Cine</td>
  <td>Martes</td>
  <td>10€</td>
</tr>
<tr>
  <td>Miercoles</td>
  <td>10€</td>
</tr>