CSS Tablas

Tablas con CSS

Las propiedades de las tablas nos permiten definir los distintos elementos que componen una tabla:

La ubicación del título con respecto a la tabla.
Celdas de tamaño fijo o ajustable.
Espaciado entre celdas.

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.

Código


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

<body>
<table border="1">
<caption>Precio de los lacteos</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>
</html>

Resultado

Precio de los lácteos
Producto	Precio
Manteca	4.00
Leche	1.50

Nota: Internet Explorer ubica el título siempre por encima de la tabla.

Formato de las celdas

La propiedad "table-layout" define si las celdas, filas o columnas, van a tener el tamaño fijo que estipulemos (fixed) o se adecuarán al contenido sin importar la medida que hayamos establecido (auto).

Código


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

<body>
<table border="1" class="auto" width="100%">
<caption>Tabla con tamaño automático</caption>
 <tr>
  <td width="20%">111111111111111111111111111111111</td>
  <td width="40%">22222222222222</td>
  <td width="40%">333333</td>
 </tr>
</table>

<table border="1" class="fija" width="100%">
<caption>Tabla con tamaño fijo</caption>
 <tr>
  <td width="20%">111111111111111111111111111111111</td>
  <td width="40%">22222222222222</td>
  <td width="40%">333333</td>
 </tr>
</table>
</body>
</html>

Resultado

Tabla con tamaño automático
11111111111111111111111	22222222222	333333

Tabla con tamaño fijo
11111111111111111111111	22222222222	333333

Espaciado entre celdas

La propiedad "border-spacing" nos permite dejar espacio libre entre celdas.

Código


<html>
<head>
 <style type="text/css">
  table{border-spacing: 20px}
 </style>
</head>

<body>
<table border="1">
 <tr>
  <th>Producto</th>
  <th>Precio</th>
 </tr>
  <tr>
  <td>Tomates</td>
  <td>1.20</td>
 </tr>
  <tr>
  <td>Cebollas</td>
  <td>0.80</td>
 </tr>
</table>
</body>
</html>

Resultado

Producto	Precio
Tomates	1.20
Cebollas	0.80

Propiedades de las tablas

Propiedad	Descripción	Valores	Detalles
caption-side	Posición del título respecto de la tabla.	top	Superior No funciona en IE 5, 6 y 7
caption-side	Posición del título respecto de la tabla.	bottom	Inferior No funciona en IE 5, 6 y 7
table-layout	Control del algoritmo usado para el formato de las celdas, filas y columnas.	auto	Automático
table-layout		fixed	Fijo
border-collapse	Selección del modelo de los bordes.	collapse	Plegado
border-collapse	Selección del modelo de los bordes.	separate	Separado
border-spacing	Espaciado entre los bordes de celdas adyacentes.	longitud	Longitud No funciona en IE 5, 6 y 7
empty-cells	Visibilidad de los bordes de celdas sin contenido.	show	Muestra No funciona en IE 5, 6 y 7
empty-cells	Visibilidad de los bordes de celdas sin contenido.	hide	Oculta No funciona en IE 5, 6 y 7