CSS

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 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

Espacio 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

¿No encuentras lo que buscas?

<<< Listas - List en CSS Dimensiones en CSS >>>

Artículos

Los mejores 10 hostings

Buscando cual es el mejor hosting que existe en el mercado, me he topado con una gran cantidad de sitios que presentan un ranking de los 10 mejores hosting del mundo. Como cada uno tiene en su lista, diferentes empresas de alojamiento web, en un orden de ranking muy distinto, he decidido investigar cual era la mejor. continúe leyendo...

CSS

Básico

Avanzado

Ejemplos y Examen

Guías de referencia

Tablas CSS

Tablas con CSS

Ubicación del título

Formato de las celdas

Espacio entre celdas

Propiedades de las tablas

¿No encuentras lo que buscas?

Los mejores 10 hostings

Búsqueda

Otros tutoriales

Artículos

Recomendados