Búsqueda personalizada
 
 
 
 
Definiendo reglas de estilo a una tabla
 

Veamos con un ejemplo como podemos afectar una tabla HTML con CSS.

<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> 

La hoja de estilo definida a esta tabla es:

caption
{
  font-family:arial;
  font-size:15px;
  text-align: center;
  margin: 0px;
  font-weight: bold;
  padding:10px;
}

table
{
  border-collapse: collapse;
}

th
{
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  padding: 0.5em;
  background-color:#6495ed;;
}

thead th
{
  background-color: #6495ed;
  color: #fff;
}

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

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

La marca caption dentro de una tabla es el ttulo que debe aparecer arriba.

La propiedad border-collapse puede tomar dos valores: collapse o separate. Separate deja las celdas con unos pixeles de separacin, no as collapse.

El resto es la definicin de una serie de reglas para las marcas th, th dentro de la marca tbody, th dentro de la marca thead y por ltimo td.

 
 
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion