Sí, esas líneas estaban para que tuvieras una idea de cómo estaba organizado el diseño, eran unos colores y bordes, aunque vi que
border=1 no lo cambiaste a 0.
Te corregí los ejemplos porque era más rápido que escribir toda la explicación. Igual a éste vas a tener que darle una repasada, por el orden de las propiedades. (Agregué las de Opera)
Tienes serios problemas de compatibilidad, no estoy seguro de que en todas las versiones de IE se vea bien. En la 6 seguro va a saltar alguna "desalineación" pero igual se va a entender.
Código HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
table {
font:11px/120% Verdana, Arial, Helvetica, sans-serif;
color:#777777;
padding:0;
}
.barrasv {
width:2.5em;
text-shadow:#CCCCCC 0.1em 0.1em 0.1em;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow:1px 1px 1px black;
-webkit-box-shadow:1px 1px 1px black;
-moz-box-shadow:1px 1px 1px black
}
.verticalmente {
position:relative;
transform:rotate(-90deg);
-o-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
writing-mode:tb-rl;
filter:flipv fliph;
margin:0 -1em;
//background-color:red;
}
#etiq td {
height:7em;
width:3em;
font-weight:bold;
}
-->
</style>
</head>
<body>
<table align="center" cellpadding="0" cellspacing="0" border="1">
<tbody align="center">
<tr>
<td valign="bottom"><div class="barrasv" style="height:31.6px; background-color:#BDDA4C"> </div></td>
<td valign="bottom"><div class="barrasv" style="height:43.5px; background-color:#FF9A68"> </div></td>
<td valign="bottom"><div class="barrasv" style="height:15.8px; background-color:#69ABBF"> </div></td>
<td valign="bottom"><div class="barrasv" style="height:1.9px; background-color:#FFDE68"> </div></td>
<td valign="bottom"><div class="barrasv" style="height:6.9px; background-color:#AB6487"> </div></td>
</tr>
<tr>
<td>31.6%</td>
<td>43.5%</td>
<td>15.8%</td>
<td>1.9%</td>
<td>6.9%</td>
</tr>
<tr id="etiq">
<td><div class="verticalmente">Productos Varios</div></td>
<td><div class="verticalmente">Repuestos de Vehículos</strong></div></td>
<td><div class="verticalmente">Enceres</div></td>
<td><div class="verticalmente">Bienes Muebles</div></td>
<td><div class="verticalmente">Bienes Inmuebles</div></td>
</tr>
</tbody>
</table>
</body>
</html> Y en los códigos que pusiste ya están los valores : en la fila del medio ¿cómo no los viste? ¿o son otros valores que quieres poner arriba?
Insisto, hay que darle la repasada final, porque seguro hay cosas que se pueden mejorar. Lo de la distancia está parchado medio a lo bruto, forzando una reducción de margen.
Estaba pensando por qué no usaste
canvas y VML para hacer todo el gráfico (incluyendo el texto). Algunos navegadores hasta te dejarían copiar y guardar esa imagen.
Como hacer graficas de pastel y de barras