Tabla con Bordes Divisores
Agregue la propiedad border-bottom a th y td para que tenga divisores horizontales como el
ejemplo, pueden usar padding + border collapse para los table.
Nombre |
Apellido |
Ahorro? |
Bill |
Puertas (Gates) |
$100 |
Juan |
"El Guason" |
$150 |
Mr. |
Batman |
$300 |
Peter |
Capusotto |
$250 |
Tabla con Hover
Pasar el mouse por las filas de la tabla para obtener el siguiente resultado:
Nombre |
Apellido |
Ahorro? |
Bill |
Puertas (Gates) |
$100 |
Juan |
"El Guason" |
$150 |
Mr. |
Batman |
$300 |
Peter |
Capusotto |
$250 |
Tabla con salto de Color o tipo Zebra
Usar el selector nth-child() y agregue un color de fondo a todas las filas de la tabla pares (o impares)
Nombre |
Apellido |
Ahorro? |
Bill |
Puertas (Gates) |
$100 |
Juan |
"El Guason" |
$150 |
Mr. |
Batman |
$300 |
Peter |
Capusotto |
$250 |
Encabezado de tabla coloreado
Nombre |
Apellido |
Ahorro? |
Bill |
Puertas (Gates) |
$100 |
Juan |
"El Guason" |
$150 |
Mr. |
Batman |
$300 |
Peter |
Capusotto |
$250 |
Una tabla diferente y algo divertida...
Compania |
Contacto |
Pais |
Ferrari Motor Company |
Yoyo Maldonado |
Argentina |
Fiat Motor Company |
Michael Shumacher |
Alemania |
Walmart USA |
Ariel "el chino" Lewis |
Mexico Wey |
Stradivarius Violin's |
Roberto "el brujo" Menendez |
Polaco |
Paty Hamburguesas |
Marito "el carnicero" Diaz |
Francia |