Las tablas se forman mediante un conjunto de elementos HTML que permiten organizar datos en filas y columnas. Con el elemento <table> se crea la tabla, con <tr> se definen las filas y con <td> se crean las columnas o celdas. En este sentido, CSS ofrece propiedades para modificar sus estilos.
| Elementos | Descripción |
|---|---|
<table> | Contenedor de una tabla. |
<tr> | Creación de filas de celdas. |
<th> | Creación de celdas de encabezado. |
<td> | Creación de celdas de datos. |
En el pasado, las tablas se usaban para crear diseños de páginas web. El hecho de que sean rectangulares facilitaba la maquetación. Sin embargo, hoy en día existen mejores métodos de posicionamiento de elementos de contenido dentro del documento HTML, como sería el caso de la flotación.
En CSS existen propiedades específicas que permiten modificar el estilo y el comportamiento de los elementos que forman la tabla, sobretodo de las celdas. Como es de esperar, existen propiedades genéricas que también se pueden usar en las tablas, como los bordes, los fondos, el color o las fuentes.
| Propiedad | Descripción |
|---|---|
border-collapse | Fusiona los bordes de una tabla. |
border-spacing | Distancia entre bordes de celdas vecinas. |
empty-cells | Esconde los bordes de una celda vacía. |
caption-side | Posiciona el elemento <caption> en una tabla. |
table-layout | Indica el tipo de representación de una tabla. |
La propiedad ‘border-collapse’
La propiedad border-collapse permite fusionar los bordes de las celdas adyacentes. Por defecto, los navegadores web muestran los bordes de cada celda, por lo que las tablas se ven representadas con dos bordes. Si se opta por fusionarlos se verá un único borde, quedando un diseño más fino.
Esta propiedad tiene tres valores posibles:
| Valor | Descripción |
|---|---|
collapse | Fusiona los bordes. |
separate | Mantén los bordes separados. |
inherit | Hereda del elemento padre. |
Ejemplo de tabla por defecto:
.separa1 {
border-collapse: separate;
}
| A | B |
| C | D |
Tal y como se puede observar, las bordes de las celdas que coinciden con los de las otras celdas se ven con mayor grosor. En realidad se trata de dos bordes que se están tocando. Los separamos un poco para visualizarlos mejor.
.separa2 {
border-collapse: separate;
border-spacing: 4px;
}
| A | B |
| C | D |
Si ahora los juntamos con el valor collapse veremos que hay una línea con el mismo grosor que los bordes que no tienen celdas adyacentes.
.separa3 {
border-collapse: collapse;
}
| A | B |
| C | D |
La propiedad ‘border-spacing’
En los ejemplos anteriores se pudo ver que se modificó la separación entre los bordes de celdas. Es posible hacer esto con la propiedad border-spacing, y tiene como requisito que la propiedad border-collapse tenga el valor separate. No tendría sentido indicar una separación cuando están fusionadas.
Como valor de la propiedad border-spacing se puede introducir cualquier unidad de longitud, ya sea relativa (píxeles, centímetros, milímetros, picas, etc) o absoluta (porcentajes, em y rem). Su valor inicial es 0.
Cuando se indica una única medida, su valor se asignará como separación horizontal y vertical. En cambio, si se indican dos medidas se puede hacer referencia a la separación horizontal y a la vertical, en este orden.
Así indicaríamos una separación de 10 píxeles:
table {
border-collapse: separate;
border-spacing: 10px;
}
La propiedad ‘empty-cells’
Con la propiedad empty-cells se puede aplicar estilos a las celdas vacías (elementos <th> y <td>) de una tabla. Igual que con la propiedad anterior, esta propiedad solo se aplica cuando la propiedad border-collapse tiene el valor separate. Lo que hace es ocultar o mostrar los bordes.
| Valor | Descripción |
|---|---|
show | Muestra los bordes. |
hide | Esconde los bordes. |
inherit | Hereda del elemento padre. |
Las celdas vacías son aquellas que no tienen ningún tipo de contenido textual. Es interesante ocultarlas en algunos casos. Su valor por defecto es show: mostrar los bordes. Vamos a ver un ejemplo ocultando los bordes:
.oculta {
border-collapse: separate;
border-spacing: 2px;
empty-cells: hide;
}
| B | |
| C |
En este ejemplo hemos eliminado los valores «A» y «D» de las celdas. Si se hubiera añadido un espacio en blanco (entidad ) se mostraría los bordes de la celda, ya que un espacio es contenido aunque no sea visible.
La propiedad ‘caption-side’
La propiedad caption-side permite decidir la posición del título descriptivo de una tabla indicado mediante el elemento <caption>. Se pueden definir dos posiciones: top (arriba) y bottom (abajo). Su valor por defecto es top. También se puede heredar el valor de su elemento padre.
| Valor | Descripción |
|---|---|
top | Sitúa el título arriba. |
bottom | Sitúa el título abajo. |
inherit | Hereda del elemento padre. |
En el siguiente ejemplo situamos el título en la parte inferior:
.titulo {
caption-side: bottom;
}
| A | B |
| C | D |
Tal y como se puede ver en este ejemplo, el contenido del elemento <caption> aparece al final de la tabla a pesar de que sus etiquetas se encuentran al principio de la tabla. Se ha usado la propiedad text-align para que el título aparezca centrado en el ancho que ocupa la tabla.
La propiedad ‘table-layout’
La propiedad table-layout permite indicar el tipo de representación de una tabla. Dicho en otras palabras, permite especificar el tipo de algoritmo usado para calcular el tamaño de las celdas. Valores permitidos:
| Valor | Descripción |
|---|---|
auto | Tamaño automático al generarse. |
fixed | Tamaño fijo al generarse. |
inherit | Hereda del elemento padre. |
Con el valor auto (por defecto), la mayoría de navegadores web aplican un tamaño automático: al generarse la tabla, las celdas se ajustan para adaptarse al tamaño del contenido. Es muy habitual que se use el valor por defecto.
El valor fixed (tamaño fijo) utiliza un algoritmo diferente. El tamaño horizontal no depende del contenido de las celdas, sino del ancho de la tabla, las columnas y el espaciado de los bordes. Este algoritmo genera la tabla de forma más rápida, por lo que es útil cuando se representan muchos datos.
