35 - Definiendo reglas de estilo a una tabla.
Problema:
Crear una tabla donde se deben mostrar las precipitaciones de 3 provincias durante los meses de enero, febrero y marzo.
pagina.html
estilos.css
Ejecución de la página
<!DOCTYPE html> <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <table> <caption> cantidad de lluvia caida en mm. </caption> <thead> <tr> <th>Provincia</th><th>Enero</th><th>Febrero</th><th>Marzo</th> </tr> </thead> <tbody> <tr> <th>Córdoba</th> <td>210</td><td>170</td><td>120</td> </tr> <tr> <th>Buenos Aires</th> <td>250</td><td>190</td><td>140</td> </tr> <tr> <th>Santa Fe</th> <td>175</td><td>140</td><td>120</td> </tr> </tbody> </table> </body> </html>
caption { font-family:arial; font-size:15px; text-align: center; margin: 0px; font-weight: bold; padding:10px; } table { border-collapse: collapse; } th { border-right: 1px solid #fff; border-bottom: 1px solid #fff; padding: 0.5em; background-color:#6495ed;; } thead th { background-color: #6495ed; color: #fff; } tbody th { font-family:arial; font-weight: normal; background-color: #6495ed; color:#ff0; } td { border: 1px solid #000; padding: .5em; background-color:#ed8f63; width:100px; text-align:center; }
No tiene disponible el navegador la capacidad de iframe
Retornar al menú