<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejemplo de selectores avanzados</title>
<style>
table {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
table, tr, th, td {
border: 1px solid #333;
line-height: 2em;
}
th {
background-color: #F5F5F5;
padding: 0 .5em;
}
td {
padding: 0 .3em;
}
th.euro {
background: #E6F3FF url(https://lh3.googleusercontent.com/iEAx3nx2sdnU7mp8WRtj3RmDotyFaj87Mz8qZiaM86YwF2mcPPDLHA0nEB_gj0cS5DPbqJ07eyJJhn1ydKy3pz86lNNy1KqvmmZXkJI1ZNdK6UXYHiY=w70) no-repeat left center;
padding: 0 .3em 0 1.2em;
}
th.dolar {
background: #E6F3FF url(https://lh3.googleusercontent.com/8fSBGj2pw1VlesdhDTdTCeg1M4UxpsHa3bx2AD90TVYECd75fpz_9yfKUIC01KUX2FPGdK2lJToVCU7KGqrKpuvE2zFApBY-n9KklG2FlmkQq5lmqE0t=w70) no-repeat left center;
padding: 0 .3em 0 1.2em;
}
th.libra {
background: #E6F3FF url(https://lh4.googleusercontent.com/hm-2Te9lmxtbtmxAo2JjekTIQbDlWzVAg-dwMeO6mSpvRgZhH7T7Dr-wXnGeu7HkGhc1OhUjMYPypp_eeEhPRglNG-ERNjQC6pPFEvgB8KDLXKJ84Q=w70) no-repeat left center;
padding: 0 .3em 0 1.2em;
}
th.yen {
background: #E6F3FF url(https://lh3.googleusercontent.com/Synw11Rc1O-6qJy03_GS78HJPu50cWOQCFQZ2h4T93Icmj_7dKm2rFTv7iND2vyDLlB8tP4_rAGl2YtPrf378wNQOCFrl5LeiOXKL-z6fpAjdUjiejVB=w70) no-repeat left center;
padding: 0 .3em 0 1.2em;
}
tr:nth-child(n+1) td {
text-align: right;
}
tr:nth-child(2n) {
background-color: #FFFFCC;
}
tr:hover {
background: #FFFF66;
}
</style>
</head>
<body>
<table>
<tr>
<th>Cambio</th>
<th>Compra</th>
<th>Venta</th>
<th>Máximo</th>
<th>Mínimo</th>
</tr>
<tr>
<th class="euro">Euro/Dolar</th>
<td>1.25</td>
<td>1.25</td>
<td>1.25</td>
<td>1.24</td>
</tr>
<tr>
<th class="dolar">Dolar/Yen</th>
<td>119.01</td>
<td>119.05</td>
<td>119.82</td>
<td>119.82</td>
</tr>
<tr>
<th class="libra">Libra/Dolar</th>
<td>1.86</td>
<td>1.86</td>
<td>1.86</td>
<td>1.85</td>
</tr>
<tr>
<th class="yen">Yen/Euro</th>
<td>0.67</td>
<td>0.67</td>
<td>0.66</td>
<td>0.67</td>
</tr>
</table>
</body>
</html>
No hay comentarios:
Publicar un comentario