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




Google




LunMarMieJueVieSabDom
    123
45678910
11121314151617
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar