Ahora, ¡a por los gráficos y los colores! Puesto que la tabla rezuma contenido y actitud punk, vamos a darle un brillante estilo imponente que le pegue. No te preocupes, no tienes que hacer tus tablas tan extremadas: puedes optar por algo más sutil y de buen gusto.
Empieza añadiendo el CSS siguiente a tu archivo style.css, de nuevo al final:
.png)
Una vez más, aquí no hay nada específico para las tablas, pero vale la pena señalar algunas cosas.
Hemos añadido una imagen de fondo (background-image) a los elementos <thead> (en-US)") y <tfoot> (en-US)"), y hemos cambiado el (color) de todo el texto del encabezado y el pie de página por el blanco (y le hemos dado una sombra, text-shadow) para que sea legible. Siempre debes asegurarte de que tu texto contraste bien con el fondo, para que sea legible.
También hemos añadido un degradado lineal a los elementos <th> y <td> del encabezado y el pie de página para obtener un poco de textura, y también hemos dado a esos elementos un borde púrpura brillante. Es útil tener múltiples elementos anidados disponibles para que puedas superponer estilos. Sí, podríamos haber colocado tanto la imagen de fondo como el gradiente lineal en los elementos <thead> (en-US)") y <tfoot> (en-US)") utilizando múltiples imágenes de fondo, pero decidimos hacerlo por separado por los navegadores más antiguos que no admiten múltiples imágenes de fondo o gradientes lineales.