En el siguiente ejemplo te mostramos un ejemplo de cómo configurar una tabla usando algunas de las propiedades CSS que hemos visto durante el curso.
Código HTML:
<html>
<head>
<title>Cursos gratis</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<table border="1">
<tr>
<th>Julio</th>
<th>Agosto</th>
<th>Septiembre</th>
<th>Octubre</th>
<th>Noviembre</th>
<th>Diciembre</th>
</tr>
<tr class="fila_impar">
<td>100</td>
<td>200</td>
<td>300</td>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
<tr class="fila_resaltada">
<td>101</td>
<td>201</td>
<td>302</td>
<td>401</td>
<td>501</td>
<td>601</td>
</tr>
<tr class="fila_impar">
<td>102</td>
<td>202</td>
<td>302</td>
<td>402</td>
<td>502</td>
<td>602</td>
</tr>
<tr class="fila_par">
<td>103</td>
<td>203</td>
<td>303</td>
<td>403</td>
<td>503</td>
<td>603</td>
</tr>
</table>
</body>
</html>
Código CSS:
table {
width:500px;
font:normal 13px Arial;
text-align:center;
border-collapse:collapse;
}
table th {
font:bold 15px Arial;
background-color:lightblue;
}
.fila_impar {
background-color:lightgray;
}
.fila_par {
background-color:lightgreen;
}
.fila_resaltada {
color:yellow;
background-color:red;
}
A continuación pedes ver el resultado:
