Tablas

Por defecto, los navegadores muestran los elementos de las tablas con un borde simple y con un espacio entre celdas de 1px.

1. border-collapse

Define el modelo se bordes preferido.

border-collapse: separate|collapse|initial|inherit;
Valores de border-collapse
ValorDescripción
separateDejan separados los bordes de las celdas. Predeterminado.
collapseJunta los borde adyacentes de las celdas
inheritHeredan
table {border-collapse: collapse;}

2. border-spacing

Si optas por el modelo separate de las celdas (predeterminado) puedes definir un espacio.

table {border-spacing: 3px;}

3. empty-cells

Define como actuara si una celda queda vacía. Solo aplicable en el modelo separate

Valores de empty-cells
ValorDescripción
showCeldas vacias se muestran. Predeterminado.
hideCeldas vacias no se muestran.
inheritHeredan

4. caption-side

De manera predeterminado la etiqueta CAPTION de la tabla se muestra en la parte superior (top).

caption-side: top (Predeterminado)| bottom | initial | inherit;
Valores de caption-side
ValorDescripción
topEn la parte superior. Predeterminado.
bottonEn la parte inferior.
inheritHereda

5. Vertical-align

Define el alineamiento vertical de los elementos en las celdas. Su uso es básicamente sobre etiquetas in-line y no funcionan sobre etiquetas del tipo bloque como <P>, <DIV>, etc.

vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;
Valores de vertical-align
ValorDescripción
baselineAlinea la línea base del elemento con la línea base del padre. Su comportamiento puede cambiar en un navegador u otro. Predeterminado.
subAlinea la línea base del elemento con la línea SUB del elemento padre.
superAlinea la línea base del elemento con la línea SUP del elemento padre.
text-topLa parte superior del elemento es alineada con la parte superior del elemento padre.
text-bottomLa parte inferior del elemento es alineada con la parte inferior del elemento padre.
middleSe ubica a la mitad del elemento padre.
topLa parte superior del elemento es alineado con la parte superior del elemento en la misma línea.
bottom
absoluto(px,em)Medida absoluta respecto a la linea base del padre. Valores negativos están permitidos.
relativo (%)Medida relativa respecto a la linea base del padre.
inheritHereda del padre
unsetNo usado
vertical-align: bottom;
vertical-align: middle;