Tablas

Darle estilo a las tablas con CSS suele dar dolor de cabeza porque, por defecto, los navegadores las muestran muy rígidas. Sin embargo, con unas pocas propiedades clave puedes pasar de una tabla genérica de los 90 a un diseño limpio, legible y moderno.

table {
   width: 100%;
   border-collapse: collapse;          /* Une los bordes en una sola línea en lugar de bordes dobles */
   margin: 20px 0;
   font-family: sans-serif;
   min-width: 400px;
}
table th, table td {
   padding: 12px 15px;                 /* Espaciado interno para que el texto respire */
   text-align: left;                   /* Alinea el texto a la izquierda */
   border-bottom: 1px solid #dddddd;   /* Línea divisoria sutil */
}
/* Estilo para los encabezados */
table thead tr {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
}
/* Efecto Zebra: Filas alternas con fondo gris claro */
table tbody tr:nth-child(even) {
   background-color: #f3f3f3;
}
/* Efecto Hover: Resalta la fila cuando pasas el cursor por encima */
table tbody tr:hover {
   background-color: #f1f1f1;
   cursor: pointer;
}

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

1. border-collapse

Define el modelo de bordes preferido.

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

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

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. table-layout

Esta propiedad define el algoritmo usado para organizar las celdas, filas y columnas de la tabla.

table-layout: auto | fixed | initial (Predeterminado) | inherit;

Valores de table-layout
Valor	Descripción
auto	Los navegadores utilizan un algoritmo automático de diseño de tablas. El ancho de las columnas viene determinado por el contenido más ancho que no se puede dividir en las celdas. El contenido dictará el diseño.
fixed	Establece un algoritmo de diseño de tabla fijo. El ancho de la tabla y las columnas se determina mediante el ancho de la tabla y la columna, o mediante el ancho de la primera fila de celdas. Las celdas de otras filas no afectan el ancho de las columnas. Si no hay anchos en la primera fila, el ancho de las columnas se divide equitativamente en toda la tabla, independientemente del contenido de las celdas.

La principal ventaja de table-layout: fixed; es que la tabla se carga mucho más rápido. En tablas grandes, los usuarios no verán ninguna parte hasta que el navegador la haya cargado por completo. Por lo tanto, si usa `table-layout: fixed`, los usuarios verán la parte superior de la tabla mientras el navegador carga y renderiza el resto. Esto da la impresión de que la página carga mucho más rápido

6. 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;

7. Text-align

Define el alineamiento horizontal de los elementos en las celdas.

text-align: left | center | right;

Valores de vertical-align
Valor	Descripción
left	Izquierda
center	Centro
right	Derecha