Usando CSS en tablas (2)

Ejemplos:

.celda3{
	background-image: url(../imgs/fondo1.gif);
	background-repeat: repeat-x;
}
.celda1{
	background-image: url(../imgs/fondo2.gif);
	background-position: top right;
	background-repeat: no-repeat; }
.celda2{
	background-color:#EEEEEE;
}

tablas.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<link href="tablas.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="600" border="0" cellspacing="5" cellpadding="0">
  <tr>
    <td colspan="2" class="celda3">
      El Galimatazo (celda3) *
    </td>

  </tr>
  <tr>
    <td class="celda1">
      <p>Esta celda tiene la clase "celda1"</p>
      <p>.celda1{<br>
font: bold 11px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;<br>
border:1px dotted 5E93B5;<br>

padding: 10px;<br>
background-image: url(../imgs/fondo2.gif); <br>
background-position: top right;<br>
background-repeat: no-repeat; <br>
}</p>
    </td>
    <td class="celda2"> <p>Esta celda tiene la clase "celda2"</p>

      <p>.celda2{<br>
font: 12px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;<br>
border-top: 4px solid #5E93B1;<br>
border-right: 1px dotted #416D89;<br>
border-left:1px dotted #416D89;<br>
border-bottom:none;<br>
padding-top:10px;<br>
padding-right:3px;<br>

padding-left:20px;<br>
padding-bottom:12px;<br>
background-color:#EEEEEE;<br>
}</p>
    </td>
  </tr>
  <tr>
    <td class="celda4"><p>Esta celda tiene la clase "celda 4"</p>

    <p>.celda4{<br>
width:200px;<br>
height:200px;<br>
border:1px dotted #DDDDDD;<br>
} </p></td>
    <td>*.celda3{ <br>
background-image: url(../imgs/fondo1.gif);<br>
background-repeat: repeat-x;<br>

font: bold 18px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;<br>
color:white;<br>
padding:4px;<br>
background-color:#5C909A;<br>
}</td>
  </tr>
</table>
</body>
</html>

tablas.css

body{background-color:#FFFFFF;}
.celda1{
	font: bold 11px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;
	border:1px dotted 5E93B5;
	padding: 10px;
	background-image: url(../imgs/fondo2.gif); 
	background-position: top right;
	background-repeat: no-repeat; 
}
.celda2{
	font: 12px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;
	border-top: 4px solid #5E93B1;
	border-right: 1px dotted #416D89;
	border-left:1px dotted #416D89;
	border-bottom:none;
	padding-top:10px;
	padding-right:3px;
	padding-left:20px;
	padding-bottom:12px;
	background-color:#EEEEEE;
}
.celda3{ 
	background-image: url(../imgs/fondo1.gif);
	background-repeat: repeat-x;
	font: bold 18px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;
	color:white;
	padding:4px;
	background-color:#5C909A;
}
.celda4{
 	width:200px;
 	height:200px;
	border:1px dotted #DDDDDD;
 }

Usuarios que han visto este tema también han visto...

- 70 ideas para crear mejores CSS
- Modelo de cajas en CSS
- Menú de imágenes con CSS
- Colores en CSS
- Capas visibles e invisibles en CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento