M8 - Aplicacions web / Activitats UF5: HTML i CSS / Solució Estils taules
De wikiserver
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Ejercicio formatear tabla</title> <style type="text/css"> table { font: .9em Arial, Helvetica, sans-serif; border: 1px solid #333; border-collapse: collapse; text-align: center; } table th { background: #F5F5F5 url(imagenes/fondo_gris.gif) repeat-x; padding: 0 .3em; } table th.euro { background: #E6F3FF url(imagenes/euro.png) no-repeat left center; padding: 0 .3em 0 1.2em; } table th.dolar { background: #E6F3FF url(imagenes/dolar.png) no-repeat left center; padding: 0 .3em 0 1.2em; } table th.libra { background: #E6F3FF url(imagenes/libra.png) no-repeat left center; padding: 0 .3em 0 1.2em; } table th.yen { background: #E6F3FF url(imagenes/yen.png) no-repeat left center; padding: 0 .3em 0 1.2em; } table th, table, td { border: 1px solid #333; line-height: 2em; } .fila { text-align: left; } .par { background-color:#FFFFCC; } table tr:hover { background: #FFFF66 !important; } </style> </head> <body> <table summary="Tipos de cambio"> <tr> <th scope="col">Cambio</th> <th scope="col">Compra</th> <th scope="col">Venta</th> <th scope="col">Máximo</th> <th scope="col">Mínimo</th> </tr> <tr class="par"> <th scope="row" class="fila euro">Euro/Dolar</th> <td>1.2524</td> <td>1.2527</td> <td>1.2539</td> <td>1.2488</td> </tr> <tr> <th scope="row" class="fila dolar">Dolar/Yen</th> <td>119.01</td> <td>119.05</td> <td>119.82</td> <td>119.82</td> </tr> <tr class="par"> <th scope="row" class="fila libra">Libra/Dolar</th> <td>1.8606</td> <td>1.8611</td> <td>1.8651</td> <td>1.8522</td> </tr> <tr> <th scope="row" class="fila yen">Yen/Euro</th> <td>0.6711</td> <td>0.6705</td> <td>0.6676</td> <td>0.6713</td> </tr> </table> </body> </html>