Ver Mensaje Individual
  #1 (permalink)  
Antiguo 11/11/2011, 04:07
bmonika
 
Fecha de Ingreso: julio-2009
Mensajes: 3
Antigüedad: 14 años, 9 meses
Puntos: 0
Me podrias guiar para hacer esta tabla?

Hola quiero hacer una tabla con css y html pero por mas que lo intento no puedo conseguir nada de nada, tengo que fallar en algo pero sinceramente no se en que.

quiero asociar el CSS al html pero no lo consigo, os pongo un zip por si alguien desinteresadamente me quisiera ayudar, esoty tratando con un ejemplo pero ni siquiera con eso consigo que me funcione, ya que antes de subirlo a la web quiero ver como quedaria. Trbajo con Dreamweaver y creo que este dejaria visualizar.

Un directorio en C donde tengo el html el CSS y unas imagenes

c:/tablas/images

CSS
Código HTML:
@charset "utf-8";
/* Tablas */

.tabla {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-align: right;
width: 600px;

}



.tabla th {
padding: 5px;
font-size: 16px;
background-color: #83aec0;
background-image: url(fondo_th.png);
background-repeat: repeat-x;
color: #FFFFFF;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #558FA6;
border-bottom-color: #558FA6;
font-family: "Trebuchet MS", Arial;
text-transform: uppercase;
}

.tabla .modo1 {
font-size: 12px;
font-weight:bold;
background-color: #e2ebef;
background-image: url(fondo_tr01.png);
background-repeat: repeat-x;
color: #34484E;
font-family: "Trebuchet MS", Arial;
}
.tabla .modo1 td {
padding: 5px;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #A4C4D0;
border-bottom-color: #A4C4D0;
text-align:right;
} 

.tabla .modo1 th {
background-image: url(fondo_tr01a.png);
background-position: left top;
font-size: 12px;
font-weight:bold;
text-align: left;
background-color: #e2ebef;
background-repeat: repeat-x;
color: #34484E;
font-family: "Trebuchet MS", Arial;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #A4C4D0;
border-bottom-color: #A4C4D0;
}


tabla .modo2 {
font-size: 12px;
font-weight:bold;
background-color: #fdfdf1;
background-image: url(fondo_tr02.png);
background-repeat: repeat-x;
color: #990000;
font-family: "Trebuchet MS", Arial;
text-align:left;
}
.tabla .modo2 td {
padding: 5px;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #EBE9BC;
border-bottom-color: #EBE9BC;
}
.tabla .modo2 th {
background-image: url(fondo_tr02a.png);
background-position: left top;
font-size: 12px;
font-weight:bold;
background-color: #fdfdf1;
background-repeat: repeat-x;
color: #990000;
font-family: "Trebuchet MS", Arial;
text-align:left;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #EBE9BC;
border-bottom-color: #EBE9BC;
}


y el html
Código HTML:
<link href="tabla.css" rel="stylesheet" type="text/css" />
<table border="0″ cellpadding="0″ cellspacing="0″ class="tabla">

<tr>
<th>Fecha</td>
<th>Unidades Vendidas </td>
<th>Precio por unidad </td>
<th>IVA por unidad </td> </tr>
<tr class="modo1″>
<th>29/10/07</td>
<td>520</td>
<td>420 € </td>
<td>67,20 € </td>
</tr>
<tr class="modo2″>
<th>29/10/07</td>
<td>520</td>
<td>420 € </td>
<td>67,20 € </td>
</tr>
</table> 
las imagenes las tengo en c:/tablas/images/ y son fondo_th.png y fondo_tr01.png

Pero realmente no consigo nada de nada.

Me podrias guiar por favor.