table codes 012

[chimney]

SO I HERD YOU LIEK HP BARS

make sure to keep EVERYTHING between the raw-code tags to get rid of icky extra space.
duplicate the div to add more entries
each bar+text is a ROW within the initial table
150px is the width of the BAR, aka the total amount of hp. make it longer or shorter if you wish
60px is the width of the FILLED IN CELL within the bar, also known as how much hp you have left. def change this however you want

EDIT code updated for the one without name/series. icons and bars will line up with each other.

status

code.	with name/series <raw-code> <div style="min-height:100px; padding:10px 0 0 0; margin:0;"> <img src="https://www.dreamwidth.org/img/nouserpic.png" style="-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px; height:80px; width:80px; float:left;"><br> <div style="font-family:lucida console; font-size:8pt; color:#333; margin: 0 0 0 95px; line-height:1.2em; letter-spacing:1px;"><span style="font-size:12pt;">NAME</span> <br>SERIES</div> <Table style="padding:0; margin:0 0 0 90px;"> <tr><td style="text-align:right; font-family:courier; font-size:11px; color:#333;">MUSE</td> <td><table style="border:1px solid #333; width:150px; height:12px; padding:0; margin:0; line-height:.5em;"><tr><td style="background:#333; width:60px; padding:0; margin:0;"> </td> <td style="padding:0; margin:0;"> </td></tr></table></td></tr> </table> </div> </raw-code> without name/series <raw-code> <div style="min-height:100px; padding:10px 0 0 0; margin:0; vertical-align:middle;"> <div style="display:inline-block; vertical-align:middle;"><img src="https://www.dreamwidth.org/img/nouserpic.png" style="-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px; height:80px; width:80px;"></div> <div style="display:inline-block; vertical-align:middle;"> <Table style="padding:0;"> <tr><td style="text-align:right; font-family:courier; font-size:11px; color:#333;">TEXT</td> <td><table style="border:1px solid #333; width:150px; height:12px; padding:0; margin:0; line-height:.5em;"><tr><td style="background:#333; width:60px; padding:0; margin:0;"> </td> <td style="padding:0; margin:0;"> </td></tr></table></td></tr> <tr><td style="text-align:right; font-family:courier; font-size:11px; color:#333;">LONGER TEXT</td> <td><table style="border:1px solid #333; width:150px; height:12px; padding:0; margin:0; line-height:.5em;"><tr><td style="background:#333; width:60px; padding:0; margin:0;"> </td> <td style="padding:0; margin:0;"> </td></tr></table></td></tr> <tr><td style="text-align:right; font-family:courier; font-size:11px; color:#333;">REALLY LONG TEXT</td> <td><table style="border:1px solid #333; width:150px; height:12px; padding:0; margin:0; line-height:.5em;"><tr><td style="background:#333; width:60px; padding:0; margin:0;"> </td> <td style="padding:0; margin:0;"> </td></tr></table></td></tr> <tr><td style="text-align:right; font-family:courier; font-size:11px; color:#333;">TEXT</td> <td><table style="border:1px solid #333; width:150px; height:12px; padding:0; margin:0; line-height:.5em;"><tr><td style="background:#333; width:60px; padding:0; margin:0;"> </td> </table> </div> </div> </raw-code>
features.	text color, table border, cell fill, name/series: #333 modify the width as you like!
credit.	please credit pastries somewhere if not leaving it in the code.