Temas > Programacion > Css > Definiendo reglas de estilo a una tabla
Julio

Definiendo reglas de estilo a una tabla
Veamos con un ejemplo como podemos cambiar la presentación de una tabla
HTML con CSS.
<?php //esto no va
<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>
?>//esto no va
La hoja de estilo definida a esta tabla es:
<?php //esto no va
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;
}
?>//esto no va
La marca caption dentro de una tabla es el título que debe aparecer
arriba.
La propiedad border-collapse puede tomar dos valores: collapse o separate.
Separate deja las celdas con unos pixeles de separación, no así
collapse.
El resto es la definición 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.













¿Has olviado tu contraseña?

Pulsa aquí para registrate