35 - Definiendo reglas de estilo a una tabla.




Problema:

Definir una tabla de varias filas y columnas. Aplicar estilos a los elementos th y td solamente las contenidas en el tbody.

<!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>
table
{
  border-collapse: collapse;
}

tbody th
{
  font-family:arial;
  font-weight: normal;
  background-color: #6495ed;
  color:#ff0;
}

tbody td {
  border: 1px solid #000;
  padding: .5em;
  background-color:#ed8f63;
  width:100px;
  text-align:center;
}
Ver solución


Retornar