Para hacer el siguiente ejercicio necesitamos que cuando pasemos por encima de una caja, esta haga algo diferente, y se hace con hover: https://www.w3schools.com/cssref/sel_hover.php
Cuando queremos dar automáticamente un color a las filas, en vez de hacerlo con clases lo más rápido es hacerlo con estilos, concretamente con nth-child. https://www.w3schools.com/css/css_table_style.asp
Revisad en el w3schools la propiedad linear-gradient() que nos permite hacer gradientes de unos colores dados. Con esa información realizar la tabla que aparece a continuación, que muestra el gradiente cuando pasamos por encima de una fila de la tabla.
Tabla 1:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Tablas</title>
</head>
<body>
<table>
<tr>
<th class="borraborde"></th>
<th>Alicante</th>
<th>Castellón</th>
<th>Valencia</th>
<th>C. Valenciana</th>
</tr>
<tr>
<td class="borraborde">Nacimientos</td>
<td>13.879</td>
<td>456502</td>
<td>54655</td>
<td>546555</td>
</tr>
<tr>
<td class="borraborde">Defunciones</td>
<td>15459</td>
<td>546545</td>
<td>44884</td>
<td>555643</td>
</tr>
<tr>
<td class="borraborde">Matrimonios</td>
<td>15459</td>
<td>546545</td>
<td>44884</td>
<td>555643</td>
</tr>
<tr>
<td class="borrabordebajo2">Crecimiento vegetativo</td>
<td class="borrabordebajo">15459</td>
<td class="borrabordebajo">546545</td>
<td class="borrabordebajo">44884</td>
<td class="borrabordebajo">555643</td>
</tr>
</table>
</body>
</html>
Código CSS:
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
table {
border-style: none solid none none;
}
th {
border-style: none solid solid solid;
}
.borraborde {
border-style: none solid solid none;
text-align: center;
}
table {
width: 30%;
text-align: right;
}
.borrabordebajo {
border-style: solid solid none none;
}
.borrabordebajo2 {
border-style: solid solid none none;
text-align: center;
}
Tabla 2:
<table class="table2">
<tr>
<td rowspan="2" class="borde3">Población</td>
<td colspan="3" class="borraborde">Poblacion de derecho, 1996</td>
<td colspan="3" class="borraborde4">Poblacion de derecho, 1998</td>
</tr>
<tr>
<td class="bordebajo">Total</td>
<td class="bordebajo">Hombres</td>
<td class="bordebajo2">Mujeres</td>
<td class="bordebajo">Total</td>
<td class="bordebajo">Hombres</td>
<td class="bordebajo">mujeres</td>
</tr>
<tr>
<td class="borde2">Castellón</td>
<td>456.727</td>
<td>22.406</td>
<td class="borraborde">231.321</td>
<td class="borraborde4">461.712</td>
<td>228.231</td>
<td>233.481</td>
</tr>
<tr>
<td class="borde2">Valencia</td>
<td>2.172.840</td>
<td>1.059.657</td>
<td class="borraborde">1.113.183</td>
<td class="borraborde4">2.172.796</td>
<td>1.060.156</td>
<td>1.112.640</td>
</tr>
<tr>
<td class="borde2">Alicante</td>
<td>1.379.762</td>
<td>677.118</td>
<td class="borraborde">702.644</td>
<td class="borraborde4">1.388.933</td>
<td>682.380</td>
<td>706.553</td>
</tr>
<tr>
<td class="bordes3">*TOTALES</td>
<td></td>
<td></td>
<td class="borraborde"></td>
<td class="borraborde4"></td>
<td></td>
<td></td>
</tr>
</table>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSStabla.css">
<title>Pána</title>
</head>
<body>
<table class="table4">
<caption>¿Sabe ud. lo que es Internet?</caption>
<tr>
<td class="izda"> </td>
<td class="borde">%</td>
</tr>
<tr>
<td class="izda">Lo sabe y lo utiliza</td>
<td>17,3</td>
</tr>
<tr>
<td class="izda">No lo sabe</td>
<td>60,3</td>
</tr>
<tr>
<td class="izda">Lo sabe pero no lo utiliza</td>
<td>22,1</td>
</tr>
<tr>
<td class="izda">N.C.</td>
<td>0,3</td>
</tr>
</table>
</body>
</html>
CSS:
.table4, .table4 th{
border:3px solid #eeeeee;
border-collapse: collapse;
}
.table4 td{
height: 30px;
}
.izda {
background-color:#dddddd;
}
.table4 .borde {
border-bottom:4px double black;
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<table>
<tr>
<th>País</th>
<th>Proyección 07/2015</th>
<th>% Mundial</th>
<th>Censo</th>
<th>Fecha</th>
</tr>
<tr>
<th>China</th>
<td>1 370 793 000</td>
<td>18,83</td>
<td>1 370 134 000</td>
<td>31/05/2015</td>
</tr>
<tr>
<th>India</th>
<td>1 299 499 000</td>
<td>17,85</td>
<td>1 210 854 977</td>
<td>1/03/2011</td>
</tr>
<tr>
<th>USA</th>
<td>321 234 000</td>
<td>4,41</td>
<td>320 984 000</td>
<td>31/05/2015</td>
</tr>
<tr>
<th>Indonesia</th>
<td>255 462 000</td>
<td>3,51</td>
<td>255 461 700</td>
<td>2015</td>
</tr>
<tr>
<th>Brasil</th>
<td>204 519 000</td>
<td>2,81</td>
<td>204 324 000</td>
<td>31/05/2015</td>
</tr>
<tr>
<th>Pakistán</th>
<td>191 785 000</td>
<td>2,63</td>
<td>190 323 000</td>
<td>31/05/2015</td>
</tr>
<tr>
<th>Nigeria</th>
<td>184 264 000</td>
<td>2,53</td>
<td>174 000 000</td>
<td>2013</td>
</tr>
<tr>
<th>Bangladés</th>
<td>158 762 000</td>
<td>2,18</td>
<td>158 593 000</td>
<td>31/05/2015</td>
</tr>
<tr>
<th>Rusia</th>
<td>144 031 000</td>
<td>1,98</td>
<td>146 267 288</td>
<td>1/01/2015</td>
</tr>
<tr>
<th>Japón</th>
<td>126 806 000</td>
<td>1,74</td>
<td>126 880 000</td>
<td>1/01/2015</td>
</tr>
</table>
</body>
</html>
border:1px black solid;
border-collapse:collapse;
text-align:center;
}
th, td {
padding:5px;
}
tr:hover td {
background:linear-gradient(red,blue);
}
tr:nth-child(odd) {
background-color: #f2f2f2;
}
No hay comentarios:
Publicar un comentario