Komponen HTML Lanjut: Membuat Kreasi Grafik Batang Statis ~ Roisa

Membuat kreasi grafik batang statis dapat memanfaatkan elemen table, bisa menggunakan nested table (table dalam table) atau menggunakan colspan table.

Printscreen Grafik:

Kode HTML:

<!DOCTYPE html> <html lang="en"> <head> <title> Grafik Batang Statis HTML </title> </head> <body> <h3>Perbandingan Pendapatan 4 Perusahaan Modern</h3> <font face="Arial" color="Black" size="2"> <table border="0" cellspacing="0" cellpadding="2" width="467"> <tr> <th style="border-bottom: black 2pt solid; border-top: black 2pt solid" width="127">Perusahaan</th> <th colspan="6" style="border-bottom: black 2pt solid; border-top: black 2pt solid">Pendapatan</th> </tr> <tr> <td width="127">Angin Reb0ot Ltd.</td> <td colspan="3"></td> <td colspan="2" bgcolor="#003300" style="border-bottom: solid #FFFFFF 2pt"></td> <td width="52"><sub>150%</sub></td> </tr> <tr> <td width="127">Command Pr., Inc.</td> <td colspan="3"></td> <td width="49" bgcolor="lime" style="border-bottom: solid #FFFFFF 2pt"></td> <td colspan="2"><sub>55%</sub></td> </tr> <tr> <td width="127">Hibernate Ltd.</td> <td colspan="2"><div align="right"><sub>-23%</sub></div></td> <td width="11" bgcolor="#FFFF00" style="border-bottom: solid #FFFFFF 2pt"></td> <td colspan="3"></td> </tr> <tr> <td style="border-bottom: black 2pt solid" width="127">Shutdown Ltd</td> <td style="border-bottom: black 2pt solid" width="45"><div align="right"><sub>-75%</sub></div></td> <td colspan="2" bgcolor="#FF0000" style="border-bottom: black 2pt solid"></td> <td colspan="3" style="border-bottom: black 2pt solid"></td> </tr> </table> </font> </body> </html>

Categories

Blog Archive

Escape View

Komponen HTML Lanjut: Membuat Kreasi Grafik Batang Statis

Artikel Lainnya

0 comment:

Posting Komentar

Entri Populer

Galery