กราฟแท่งแนวนอน ด้วย CSS
กราฟแท่งแนวนอน แบบง่ายๆ ไม่ต้องพึ่ง class หรืออะไรพิเศษ
<style type="text/css">
td.h {
width:200px;
font-weight:bold;
}
/* กรอบของกราฟแท่ง */
div.graph {
border:1px solid #666666;
background-color:#ffffff;
width:200px;
text-align:center;
position:relative;
}
/* กรอบสีของกราฟ */
div.graph span.bar {
position:absolute;
left:0;
}
/* ข้อความภายในกราฟ */
.text {
float:none;
margin:0 auto;
position:relative;
}
</style>
<table>
<?
$members = 50; //จำนวนทั้งหมด
$amount = 26; //จำนวนของข้อมูล
$percent = intval( ( $amount * 100 ) / $members ); //คำนวณเป็นเปอร์เซนต์
echo "<tr><td class=\"h\">แถบเปอร์เซนต์</td><td><div class=\"graph\"><span class=\"bar\" style=\"width:".( $percent * 2 )."px;background-color:#00ccff\"> </span><p class=\"text\">$amount คน $percent %</p></div></td></tr>
";
?>
</table>ตัวอย่าง