Usamos CSS para hacer lucir nuestras tablas más atractivas. Si agregas un color de fondo en cada fila de la tabla, obtendrás un bonito efecto de rayas de cebra. Para diseñar cualquier otro elemento de la fila de la tabla, usa el selector :nth-child(even) de esta manera.

Ejm

tr:nth-child(even) {
  background-color: #D6EEEE;
}

Nota: si usas (odd) en lugar de (even), el estilo ocurrirá en la fila 1,3,5, etc. en lugar de 2,4,6, etc.

Tabla HTML - Rayas verticales de cebra

Si agregas un color de fondo en cada fila de la tabla, obtendrás un bonito efecto de rayas de cebra. Para diseñar cualquier otro elemento de la fila de la tabla, usa el selector :nth-child(even) de esta manera.

Ejm

td:nth-child(even), th:nth-child(even) {
  background-color: #D6EEEE;
}

Nota: Coloque el selector :nth-child() en los elementos th y td si desea tener el estilo en los encabezados y en las celdas normales de la tabla.

Combinar rayas de cebra verticales y horizontales

Puede combinar el estilo de los dos ejemplos anteriores y tendrá franjas en filas alternas y columnas alternas. Si usas un color transparente obtendrás un efecto de superposición.

Usa un color rgba() para especificar la transparencia del color:

Ejm

tr:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

Divisores horizontales

Si especificas bordes solo en la parte inferior de cada fila de la tabla, tendrás una tabla con divisores horizontales. Agrega la propiedad border-bottom a todos los elementos tr para obtener divisores horizontales.

Ejm

tr {
  border-bottom: 1px solid #ddd;
}

Usa el selector :hover en tr para resaltar las filas de la tabla al pasar el mouse sobre:

Ejm

tr:hover {background-color: #D6EEEE;}