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
       
1234567
8910111213 14
15161718192021
22232425262728
2930     

Domingo 14 de Septiembre 2025
Semana 37

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