HTML - Tablas con barras de diferentes colores

   
Vista:

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:
- 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">&nbsp;</div></td>
	  <td valign="bottom"><div style="vertical-align:text-top">15</div><div class="barrasv" style="height:15.8px; background-color:#FE0909">&nbsp;</div></td>
	  <td valign="bottom"><div style="vertical-align:text-top">2</div><div class="barrasv" style="height:1.9px; background-color:#27FD06">&nbsp;</div></td>
	  <td valign="bottom"><div style="vertical-align:text-top">7</div><div class="barrasv" style="height:6.9px; background-color:#FDF506">&nbsp;</div></td>
 
	  <td valign="bottom"><div style="vertical-align:text-top">7</div><div class="barrasv" style="height:6.9px; background-color:#2A88E6">&nbsp;</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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Tablas con barras de diferentes colores

Publicado por xve (1178 intervenciones) el 01/12/2014 11:58:27
Hola Johny, según entiendo, lo que quieres hacer, es poner por ejemplo, en la parte superior verde, y la parte inferior roja, verdad?

Yo he realizado una simple modificación de esta linea:
1
<td valign="bottom"><div style="vertical-align:text-top">25</div><div class="barrasv" style="height:150px; background-color:#27FD06"></div></td>
a:
1
<td valign="bottom"><div style="vertical-align:text-top">25</div><div class="barrasv" style="height:75px; background-color:#27FD06"></div><div class="barrasv" style="height:75px; background-color:#FE0909"></div></td>

Es esto lo que buscas?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Tablas con barras de diferentes colores

Publicado por Johny (2 intervenciones) el 01/12/2014 16:44:25
Hola xve...efectivamente!
Eso es lo que buscaba...mira que no es complicado y no había caído en ello. Jugaré un poco con los estilos para que quede bonita y pista

Muchas gracias!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar