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.

Comments

[skyseer]

hi! i really like this design and thought it would be handy for a CR chart, with just one little edit. on firefox, everything looks fine; but on chrome and safari, the bars are all blacked out. how do i get it to look the same on chrome as it does on firefox?

here's the actual post, what it looks like in firefox, and what it looks like in chrome.

thanks!

(editing forever because i'm obviously tech stunted.)

[tofindthesun]

HM that is strange because it looks fine on my chrome* :|a you can add   where the blank part of the bar should go, or you can specify it with a little math.

for example, eridan's would be:
<td style="background:#333; width:70px; padding:0; margin:0;"> </td>
<td style="padding:0; margin:0; width:80px;"> </td>

or

<td style="background:#333; width:70px; padding:0; margin:0;"> </td>
<td style="padding:0; margin:0;">&nbsp;</td>

*i meant the original code worked and looked fine on chrome, your post does have all the bars blacked out for some reason.

[rocketchair]

HMM. :| i could have done something when i tried to edit it. thanks for the tips though! i'll try them out now.