Tablas

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

border-collapse
border-spacing
empty-cells
caption-side
table-layout
vertical-align

1. border-collapse

Define el modelo de bordes preferido.

border-collapse: separate | collapse | initial | inherit;

Valores de border-collapse
Valor	Descripción
separate	Dejan separados los bordes de las celdas. Predeterminado.
collapse	Junta los borde adyacentes de las celdas

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
Valor	Descripción
show	Celdas vacias se muestran. Predeterminado.
hide	Celdas vacias no se muestran.

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
Valor	Descripción
top	En la parte superior. Predeterminado.
botton	En la parte inferior.

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
Valor	Descripción
baseline	Alinea la línea base del elemento con la línea base del padre. Su comportamiento puede cambiar en un navegador u otro. Predeterminado.
sub	Alinea la línea base del elemento con la línea SUB del elemento padre.
super	Alinea la línea base del elemento con la línea SUP del elemento padre.
text-top	La parte superior del elemento es alineada con la parte superior del elemento padre.
text-bottom	La parte inferior del elemento es alineada con la parte inferior del elemento padre.
middle	Se ubica a la mitad del elemento padre.
top	La 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.

vertical-align: bottom;
vertical-align: middle;