Tablas con barras de diferentes colores
Publicado por Johny (2 intervenciones) el 01/12/2014 11:00:29
Hola,
Estoy intentando crear una web que muestre un gráfico de barras con las siguientes características:
Con <DIV> y <TABLE> he conseguido crear las barras verticales, mi problema es que no soy capaz de hacer la división de los dos colores...¿me podríais orientar un poco por favor?
Muchas gracias por adelantado!!!
Os pongo un ejemplo del código con el que consigo las barras verticales por si sirve de algo
Estoy intentando crear una web que muestre un gráfico de barras con las siguientes características:
- Barras verticales
- Cada barra dividida en dos "secciones". Quiero decir, la parte superior de un color (rojo) y la parte inferior de otro color (verde)
Con <DIV> y <TABLE> he conseguido crear las barras verticales, mi problema es que no soy capaz de hacer la división de los dos colores...¿me podríais orientar un poco por favor?
Muchas gracias por adelantado!!!
Os pongo un ejemplo del código con el que consigo las barras verticales por si sirve de algo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<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;
}
.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;
margin-bottom:1px;
}
.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;
}
#etiq td {
height:7em;
width:3em;
font-weight:bold;
}
.bordetd {
border-top: 1px solid #777777;
border-bottom: 1px solid #777777;
margin-left: 1px;
margin-right: 1px;
padding-top:1px;
padding-bottom:1px;
}
--></style>
<TITLE>
TABLAS DE BARRAS VERTICALES
</TITLE>
<META HTTP-EQUIV='Refresh' CONTENT='10'>
<META name='description' content='Web Ejemplo'>
<meta name='GENERATOR' content='GAW'>
</head>
<body>
<table align="center" cellpadding="5" cellspacing="0" border="2">
<tbody align="center">
<tr>
<td valign="bottom"><div style="vertical-align:text-top">25</div><div class="barrasv" style="height:150px; background-color:#27FD06"></div></td>
<td valign="bottom"><div style="vertical-align:text-top">40</div><div class="barrasv" style="height:43.5px; background-color:#FE0909"> </div></td>
<td valign="bottom"><div style="vertical-align:text-top">15</div><div class="barrasv" style="height:15.8px; background-color:#FE0909"> </div></td>
<td valign="bottom"><div style="vertical-align:text-top">2</div><div class="barrasv" style="height:1.9px; background-color:#27FD06"> </div></td>
<td valign="bottom"><div style="vertical-align:text-top">7</div><div class="barrasv" style="height:6.9px; background-color:#FDF506"> </div></td>
<td valign="bottom"><div style="vertical-align:text-top">7</div><div class="barrasv" style="height:6.9px; background-color:#2A88E6"> </div></td>
</tr>
<tr>
<td class="bordetd">25</td>
<td class="bordetd">43</td>
<td class="bordetd">74</td>
<td class="bordetd">75</td>
<td class="bordetd">90</td>
</tr>
<tr id="etiq">
<td colspan=3>Ejemplo</td>
<td>Repuestos</td>
<td>Prueba</td>
</tr>
</tbody>
</table>
</body>
</html>
Valora esta pregunta
0
