Simple stacked/segmented html bar

Question

Rather than try to reinvent the wheel, I'm hoping someone can shed some light on how to create a stacked/segmented bar or point me to an existing control. Here's what I need:

1. Horizontal bar
2. Standard html
3. Each segment needs to be color coded from css
4. Each segment needs to be a percentage of the total (i.e. if total value = 100, then a value of 10 for one of the segments would be smaller than a value of 50)
5. Should be able to fit seamlessly into an html table cell
6. Should not be an image
7. Should only create a single bar with segments (not multiple bars/segmented bars)
8. Server-side generated, no AJAX

This should be as simple as possible given x number of values, create x segments.

I'm looking for code examples or already-built controls.

EDIT: For completeness:

int[] segments = { 10, 5, 45, 20, 20 };
Panel horizontalBar = new Panel();
for(int segmentIndex = 0; segmentIndex < segments.Length; ++ segmentIndex)
{
    horizontalBar.Controls.Add(new Panel() { ID = String.Format("segment-{0}", segmentIndex), Width = Unit.Percentage(segments[segmentIndex]), CssClass = "segment" });
}
this.Page.Form.Controls.Add(horizontalBar);

Answer 1

HTML:

<div class="segment-bar">
    <div id="segment-1" width="10%" class="segment"></div>
    <div id="segment-2" width="20%" class="segment"></div>
    <div id="segment-3" width="70%" class="segment"></div>
</div>

CSS:

#segment-1
{
    background: red;
}
#segment-2
{
    background: blue;
}
#segment-2
{
    background: green;
}

.segment
{
    float: left;
    height: 20px;
}

In ASP.NET you can implement it with a simple for loop, and you can encapsulate it in a server control. Do you also need help with that?