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.

Valores de border-collapse
ValorDescripcion
separateDejan separados los bordes de las cendas. Por omision.
collapseJunta los borde adyacentes de las celdas
inheritHeredan
table {border-collapse: collapse;}

2. border-spacing

Si optas por el modelo separate de las cendas (moision) puedes definir un espacio.

table {border-spacing: 3px;}

3. empty-cells

Define como actuara si una celda queda vacia. Solo aplicable en el modelo separate

Valores de empty-cells
ValorDescripcion
showCeldas vacias se muestran. Por omision.
hideCeldas vacias no se muestran.
inheritHeredan

4. caption-side

Por omision la etiqueta CAPTION de la tabla se muestra en la parte superior

Valores de caption-side
ValorDescripcion
topEn la parte superior. Por omision.
bottonEn la parte inferior.
inheritHereda

5. Vertical-align

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

Valores de vertical-align
ValorDescripcion
baselineAlinea la línea base del elemento con la línea base del padre. Su comportamiento puede cambiar en un navegador u otro. Valor por defecto.
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;