Tablas CSS

Aprenda como definir el tamaño de las tablas, espacio entre celdas, o la ubicación del título con CSS.


Tablas con CSS

Las propiedades de las tablas nos permiten definir el comportamiento, el diseño y la ubicación de los elementos que componen cada tabla.

Los temas que estudiaremos:

  1. La ubicación del título
  2. El formato de las tablas
  3. El modelo de los bordes
  4. El espacio entre celdas
  5. El comportamiento de las celdas vacías


Ubicación del título

La propiedad caption-side nos permite ubicar el título de la tabla por encima o por debajo de la misma. La alineación horizontal del mismo se puede establecer con la propiedad text-align.

Sintaxis

selector {caption-side: valor}

Los posibles valores para definir la ubicación del título

top | bottom | inherit

Ejemplo

Vamos a ubicar el título de la tabla por debajo de la misma.

Código
<head>
<style type="text/css">
caption{caption-side: bottom}
</style>
</head>

<body>
<table border="1">
<caption>Precio de los lácteos</caption>
<tr>
<th>Producto</th>
<th>Precio</th>
</tr>
<tr>
<td>Manteca</td>
<td>4.00</td>
</tr>
<tr>
<td>Leche</td>
<td>1.50</td>
</tr>
</table>
</body>
Resultado
Precio de los lácteos
ProductoPrecio
Manteca 4.00
Leche 1.50
Nota: Internet Explorer ubica el título siempre por encima de la tabla.

Formato de las tablas

La propiedad table-layout se usa para diseñar las filas, columnas o celdas de una tabla. Entre las posibilidades de diseño podemos definir si las mismas van a tener el tamaño fijo que estipulemos (fixed) o se adecuarán al contenido sin importar la medida que hayamos establecido (auto).

Sintaxis

selector {table-layout: valor}

Los posibles valores para definir el formato de las tablas

auto | fixed | inherit

Ejemplo

Vamos a comparar las 2 propiedades de una tabla.

Código
<head>
<style type="text/css">
table.auto{table-layout: auto}
table.fija{table-layout: fixed}
</style>
</head>

<body>
<table class="auto" style="border: solid; width: 100%">
<caption>Tabla con formato automático</caption>
<tr>
<td width="10%">111111111111111111111111111111</td>
<td width="40%">222222222222</td>
<td width="50%">33333</td>
</tr>
</table>

<table class="fija" style="border: solid; width: 100%">
<caption>Tabla con formato fijo</caption>
<tr>
<td width="10%">111111111111111111111111111111</td>
<td width="40%">222222222222</td>
<td width="50%">33333</td>
</tr>
</table>
</body>
Resultado

Tabla con tamaño automático
11111111111111111111111 22222222222 333333


Tabla con tamaño fijo
11111111111111111111111 22222222222 333333

Modelo de los bordes

La propiedad border-collapse nos permite seleccionar la apariencia de los bordes de cada celda de la tabla. Existen 2 modelos diferentes de bordes: separados y continuos.

Sintaxis

selector {border-collapse: valor}

Los posibles valores para los diferentes modelos de bordes

collapse | separate | inherit

Ejemplo

Vamos a comparar los dos modelos de bordes.

Código
<head>
<style type="text/css">
table.plegado{border-collapse: collapse}
table.separado{border-collapse: separate}
</style>
</head>

<body>
<table class="plegado" style="border:solid 1px">
<caption>Tabla con los bordes plegados</caption>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Luis</td>
<td>23</td>
</tr>
</table>
<table class="separado" style="border:solid 1px">
<caption>Tabla con los bordes separados</caption>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Roberto</td>
<td>19</td>
</tr>
</table>
</body>
Resultado
Tabla con los bordes plegados
NombreEdad
Luis 23


Tabla con los bordes separados
NombreEdad
Roberto 19

Espacio entre celdas

La propiedad border-spacing especifica la separación entre celdas adyacentes. Si especificamos un solo valor, este actúa sobre toda la tabla. Si especificamos 2 valores el primero define la separación horizontal y el segundo la vertical.

Sintaxis

selector {border-spacing: valor}

Los posibles valores para definir la separación entre celdas

distancia(horizontal) distancia(vertical) | inherit

Ejemplo

Vamos a definir la separación de las celdas.

Código
<head>
<style type="text/css">
table{border-spacing: 10px 20px; border-collapse: separate}
</style>
</head>

<body>
<table style="border: solid 1px">
<tr>
<th>Marca del automobil</th>
<th>Modelo</th>
</tr>
<tr>
<td>Ford</td>
<td>Mustang</td>
</tr>
<tr>
<td>Toyota</td>
<td>Corolla</td>
</tr>
</table>
</body>
Resultado

Marca del automobilModelo
Ford Mustang
Toyota Corolla

Comportamiento de las celdas vacías

La propiedad empty-cells nos permite controlar la visualización de los bordes y fondos de una celda vacía.

Sintaxis

selector {empty-cells: valor}

Los posibles valores para controlar las celdas vacías

show | hide | inherit

Ejemplo

Vamos a comparar el comportamiento de los dos valores.

Código
<head>
<style type="text/css">
td.muestra{empty-cells: show}
td.oculta{empty-cells: hide}
</style>
</head>

<body>
<table style="border-collapse: separate; border solid 1px">
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Estado civil</th>
</tr>
<tr>
<td>Carlos</td>
<td class="oculta"></td>
<td>casado</td>
</tr>
<tr>
<td>Julieta</td>
<td>27</td>
<td class="muestra"></td>
</tr>
</table>
</body>
Resultado
NombreEdadEstado civil
Carloscasado
Julieta27

Propiedades de las tablas

PropiedadDescripciónValoresDetallesEj.
caption-side Posición del título respecto de la tabla. top Superior
No funciona en IE 5, 6 y 7
Ejemplo de como ubicar el título por encima de la tabla
bottom Inferior
No funciona en IE 5, 6 y 7
Ejemplo de como ubicar el título por debajo de la tabla
table-layout Control del algoritmo usado para el formato de las celdas, filas y columnas. auto Automático Ejemplo del formato de celdas ajustadas automaticamente frente a uno fijo
fixed Fijo
border-collapse Selección del modelo de los bordes. collapse Plegado Ejemplo comparativo entre un estilo de borde plegado y otro separado
separate Separado
border-spacing Espaciado entre los bordes de celdas adyacentes. longitud Longitud
No funciona en IE 5, 6 y 7
Ejemplo con diferentes espaciados entre los bordes de una tabla
empty-cells Visibilidad de los bordes de celdas sin contenido. show Muestra
No funciona en IE 5, 6 y 7
Ejemplo de como mostrar una celda de una tabla sin contenido
hide Oculta
No funciona en IE 5, 6 y 7
Ejemplo de como ocultar una celda de una tabla sin contenido


<<< Listas - List en CSS Modelo de Cajas Padding en CSS >>>

En la Web