Sparkline equivalent wanted in HTML

I have a moderately lengthy table of ongoing and completed architectural
projects to display. At present the table includes a project name, a
paragraph of description, a cost, and what parts of the project were
done (concept sketch, design, full plans, supervision of construction,
and so on).

Presenting a table of this sort as part of a web site doesn't seem a
great idea. For one thing, I don't really want to publicly list the
exact cost, just give an idea of whether it is under say 100k, or 500k,
over 1 million, over 5 million. Plus I think it would be awkward both to
read and to make it look good in a liquid layout.

At present I am thinking maybe a definition list, consisting of the
project name, and the description.

For displaying the cost, and how much of the work was done, I was
thinking Sparkline type graphs, using size and/or colors to summarise
the information. However I really don't want to have a whole bunch of
illustrations being downloaded for the page. Access speed may be poor
for many potential viewers, and an increasing number may be using a cell
phone for web access.

My initial thought was to use hr with height and width attributes. This
sort of works (at least in one browser), but these are deprecated. I
also don't want to go with a really detailed CSS style sheet rule for
each project on this page.

I am sure a real web designer would know exactly how to get around this,
but the only things I can think of are using a span element with an
inline style, and then getting the effects I want by playing with border
size and colors.

Anyone have any design suggestions?

--
http://www.ericlindsay.com