There are a lot of graphics packages for Web pages on the market, but sometimes you still want a homegrown solution. Using just HTML, it is possible to create simple bar charts. The trick is to embed tables inside a table and change the width property of the
Item 1 37%
This code produces this bar chart:
Item 1 |
|
It is a little trickier if you want to display positive and negative data. Instead of having one nested table, you have two tables, each nested in its own
Item 1
15%
Item 2 -3%
This code produces this bar chart:
Item 1 |
|
|
||||
Item 2 |
|
|
![devxblackblue](https://www.devx.com/wp-content/uploads/DevX-1-150x68.png)
![devxblackblue](https://www.devx.com/wp-content/uploads/DevX-1-150x68.png)
About Our Editorial Process
At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.
See our full editorial policy.
About Our Journalist
Charlie Frank
![VP Climate](https://www.devx.com/wp-content/uploads/VP-Climate-300x171.jpg)
![VP Climate](https://www.devx.com/wp-content/uploads/VP-Climate-300x171.jpg)
Harris’s VP choice may shape climate agenda
![AI Partnership](https://www.devx.com/wp-content/uploads/AI-Partnership-300x171.jpg)
![AI Partnership](https://www.devx.com/wp-content/uploads/AI-Partnership-300x171.jpg)
Salesforce and Workday announce AI partnership
![WaveBL Digitization](https://www.devx.com/wp-content/uploads/WaveBL-Digitization-300x171.jpg)
![WaveBL Digitization](https://www.devx.com/wp-content/uploads/WaveBL-Digitization-300x171.jpg)
Pil partners with WaveBL for eBL digitization
![Internet Hospital](https://www.devx.com/wp-content/uploads/Internet-Hospital-300x171.jpg)
![Internet Hospital](https://www.devx.com/wp-content/uploads/Internet-Hospital-300x171.jpg)
Musk activates internet in Gaza hospital
![AI Cybersecurity Debate](https://www.devx.com/wp-content/uploads/AI-Cybersecurity-Debate-300x171.jpg)
![AI Cybersecurity Debate](https://www.devx.com/wp-content/uploads/AI-Cybersecurity-Debate-300x171.jpg)
Experts debate AI impact on cybersecurity
![AI Stocks](https://www.devx.com/wp-content/uploads/AI-Stocks-300x171.jpg)
![AI Stocks](https://www.devx.com/wp-content/uploads/AI-Stocks-300x171.jpg)
Palantir and C3.ai: high-potential AI stocks
![Quantum Security](https://www.devx.com/wp-content/uploads/Quantum-Security-300x171.jpg)
![Quantum Security](https://www.devx.com/wp-content/uploads/Quantum-Security-300x171.jpg)
Telefónica unveils new quantum security solution
![Tesla Roadster](https://www.devx.com/wp-content/uploads/Tesla-Roadster-300x171.jpg)
![Tesla Roadster](https://www.devx.com/wp-content/uploads/Tesla-Roadster-300x171.jpg)
Musk updates Tesla Roadster production timeline
![Report Workload](https://www.devx.com/wp-content/uploads/Report-Workload-300x171.jpg)
![Report Workload](https://www.devx.com/wp-content/uploads/Report-Workload-300x171.jpg)
Employees report AI increases their workload
![Online Privacy](https://www.devx.com/wp-content/uploads/Online-Privacy-300x171.jpg)
![Online Privacy](https://www.devx.com/wp-content/uploads/Online-Privacy-300x171.jpg)
Protect your online privacy with VPN
![Ryzen AI](https://www.devx.com/wp-content/uploads/Ryzen-AI-300x171.jpg)
![Ryzen AI](https://www.devx.com/wp-content/uploads/Ryzen-AI-300x171.jpg)
Amd announces Ryzen AI 9 HX 375
![Climate Hurdles](https://www.devx.com/wp-content/uploads/Climate-Hurdles-300x171.jpg)
![Climate Hurdles](https://www.devx.com/wp-content/uploads/Climate-Hurdles-300x171.jpg)
US faces hurdles to meet climate goals
![xAI Supercomputer](https://www.devx.com/wp-content/uploads/xAI-Supercomputer-2-300x171.jpg)
![xAI Supercomputer](https://www.devx.com/wp-content/uploads/xAI-Supercomputer-2-300x171.jpg)
Elon Musk’s xAI launches Memphis supercomputer
![Open-Source Switzerland](https://www.devx.com/wp-content/uploads/Open-Source-Switzerland-300x171.jpg)
![Open-Source Switzerland](https://www.devx.com/wp-content/uploads/Open-Source-Switzerland-300x171.jpg)
Switzerland mandates open-source software for government
![Reddit Google](https://www.devx.com/wp-content/uploads/Reddit-Google-300x171.jpg)
![Reddit Google](https://www.devx.com/wp-content/uploads/Reddit-Google-300x171.jpg)
Reddit blocks most search engines except Google
![Hottest Monday](https://www.devx.com/wp-content/uploads/Hottest-Monday-300x171.jpg)
![Hottest Monday](https://www.devx.com/wp-content/uploads/Hottest-Monday-300x171.jpg)
Monday sets record for hottest day
![IBM rises](https://www.devx.com/wp-content/uploads/IBM-rises-300x171.jpg)
![IBM rises](https://www.devx.com/wp-content/uploads/IBM-rises-300x171.jpg)
IBM stock rises on strong Q2 earnings
![Wiz Declines](https://www.devx.com/wp-content/uploads/Wiz-Declines-300x171.jpg)
![Wiz Declines](https://www.devx.com/wp-content/uploads/Wiz-Declines-300x171.jpg)
Wiz declines $23 billion offer from Alphabet
![Military Crackdown](https://www.devx.com/wp-content/uploads/Military-Crackdown-300x171.jpg)
![Military Crackdown](https://www.devx.com/wp-content/uploads/Military-Crackdown-300x171.jpg)
Military crackdown leaves 200 dead in Bangladesh
![Musk Congress](https://www.devx.com/wp-content/uploads/Musk-Congress-300x171.jpg)
![Musk Congress](https://www.devx.com/wp-content/uploads/Musk-Congress-300x171.jpg)
Elon Musk attends Netanyahu’s address to Congress
![Tandem Drift](https://www.devx.com/wp-content/uploads/Tandem-Drift-300x171.jpg)
![Tandem Drift](https://www.devx.com/wp-content/uploads/Tandem-Drift-300x171.jpg)
Ai-powered GR Supras complete tandem drift
![Tech Pressure](https://www.devx.com/wp-content/uploads/Tech-Pressure-300x171.jpg)
![Tech Pressure](https://www.devx.com/wp-content/uploads/Tech-Pressure-300x171.jpg)
Mega-cap tech stocks under pressure
![Cybersecurity Certificate](https://www.devx.com/wp-content/uploads/Cybersecurity-Certificate-300x171.jpg)
![Cybersecurity Certificate](https://www.devx.com/wp-content/uploads/Cybersecurity-Certificate-300x171.jpg)
New IBM cybersecurity certificate at community colleges
![Qaptiva Quantum](https://www.devx.com/wp-content/uploads/Qaptiva-Quantum-300x171.jpg)
![Qaptiva Quantum](https://www.devx.com/wp-content/uploads/Qaptiva-Quantum-300x171.jpg)
Eviden unveils Qaptivaâ„¢ quantum emulator for researchers
![Global Cybersecurity](https://www.devx.com/wp-content/uploads/Global-Cybersecurity-300x171.jpg)
![Global Cybersecurity](https://www.devx.com/wp-content/uploads/Global-Cybersecurity-300x171.jpg)