CODE: D&D-style Character Info Sheet

[chanterie]

click for full-size!
live preview here and here

someone on rpanons wanted a d&d character sheet code, and i wanted to exercise my meager coding skills so! this happened. there's two versions, one with an image and one without.

in the codes everything you have to input yourself is formatted !! LIKE THIS!! so you can find it easily. if you want to change the sans-serif font, just search for 'Playfair Display'. and if you don't want to use the spells section, you can delete it entirely without messing things up!

ALSO I JUST REALIZED that in the screenshots my emoji chrome extension messes up the checked boxes. they won't look like that if you don't have an extension!!

with image:
<cut><raw-code><div style="margin: auto; width: 90%;"> <span style="display: block; font: italic 2.3em 'Playfair Display', georgia, serif; background: #000; color: #fff; text-align: right; margin-bottom: .5em; padding: .25em; border-radius: 5px 15px;">CHARACTER NAME</span> <div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">Druid 10, Barbarian 3</div> <div style="display: table-cell;">???</div> <div style="display: table-cell;"><a href="contact link here">Liam Oberon</a></div> </div> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia;"> <div style="display: table-cell;">!! CLASS AND LEVEL !!</div> <div style="display: table-cell;">!! BACKGROUND !!</div> <div style="display: table-cell;"><a href="!! CONTACT LINK !!">!! PLAYER NAME !!</a></div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-top: 1em;"></div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!! RACE !!</div> <div style="display: table-cell;">!! ALIGNMENT !!</div> <div style="display: table-cell;">!! XP !!</div> </div> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia;"> <div style="display: table-cell;">RACE</div> <div style="display: table-cell;">ALIGNMENT</div> <div style="display: table-cell;">EXPERIENCE POINTS</div> </div> </div> <div style="display: block; background: #000; height: 10px; margin: 1em 0em;border-radius: 5px 15px;"></div> <!-- begin column one --> <div style="width: 25%; display: inline-block; vertical-align: top;"> <img src="http://i.imgur.com/PYu3JHk.jpg" style="max-width: 100%;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">STATS</span> <div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">STRENGTH</span></div> <div style="display: table-cell;">!! STRENGTH SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">DEXTERITY</span></div> <div style="display: table-cell;">!!DEXTERITY SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">CONSTITUTION</span></div> <div style="display: table-cell;">!!CONSTITUTION SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">INTELLIGENCE</span></div> <div style="display: table-cell;">!!INTELLIGENCE SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">WISDOM</span></div> <div style="display: table-cell;">!!WISDOM SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">CHARISMA</span></div> <div style="display: table-cell;">!!CHARISMA SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: .5em;"></div> </div> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">bonuses/saving throws</span> <div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">PROFICIENCY</div> <div style="display: table-cell;">!! PROFICIENCY BONUS !!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">STRENGTH</div> <div style="display: table-cell;">!! STRENGTH SAVE + PROFICIENCY ☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">DEXTERITY</div> <div style="display: table-cell;">!! DEXTERITY SAVE + PROFICIENCY ☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">CONSTITUTION</div> <div style="display: table-cell;">!! CONSTITUTION SAVE + PROFICIENCY ☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">INTELLIGENCE</div> <div style="display: table-cell;">!! INTELLIGENCE SAVE + PROFICIENCY ☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">WISDOM</div> <div style="display: table-cell;">!!WISDOM SAVE + PROFICIENCY ☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">CHARISMA</div> <div style="display: table-cell;">!! CHARISMA SAVE + PROFICIENCY ☐/☑!!</div> </div> </div> <!-- end column one --> </div> <!-- begin column two --> <div style="width: 30%; display: inline-block; vertical-align: top; padding: 0em 1em;"> <div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!! AC !!</div> <div style="display: table-cell;">!! INITIATIVE !!</div> </div> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia;"> <div style="display: table-cell;">ARMOR CLASS</div> <div style="display: table-cell;">INITIATIVE</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-top: 1em;"></div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!!MAX HP!!</div> <div style="display: table-cell;">!!HIT DICE!!</div> </div> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia;"> <div style="display: table-cell;">MAX HIT POINTS</div> <div style="display: table-cell;">HIT DICE</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: .5em;"></div> </div> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">skills</span> <div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell; width:75%;"></div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell; font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">acrobatics</div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">animal handling</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">arcana</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">athletics</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">deception</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">history</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">insight</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">intimidation</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">investigation</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">medicine</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">nature</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">perception</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">performance</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">persuasion</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">religion</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">sleight of hand</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">stealth</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">survival</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">passive wisdom</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: .5em;"></div> </div> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">other proficiencies & languages</span> <div style="width: 100%; padding: 0em 1em;"> — !!LANGUAGE!! <br /> — !!OTHER PROFICIENCY!!<br /> — !!SEPARATE WITH BREAK TAGS!! <br /> </div> </div> <!-- begin column three --> <div style="width: 39%; display: inline-block; vertical-align: top;"> <div style="display: table; width: 100%"> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;"> <div style="display: table-cell;">weapon</div> <div style="display: table-cell;">atk bonus</div> <div style="display: table-cell;">damage/type</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!! WEAPON TYPE !!</div> <div style="display: table-cell;">!! ATTACK BONUS !!</div> <div style="display: table-cell;">!! DAMAGE/TYPE !!</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: .5em;"></div> </div> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">features & traits</span> <div style="width: 100%; padding: 0em 1em;"> <p>— !! RAMBLINGS ABOUT FEATURES/TRAITS !!</p> <p>— !! MORE RAMBLINGS !!</p> <p>— !! EVEN MORE TEXT !!</p> <p>— !! IF YOU NEED MORE THAN FOUR BULLETS STICK THEM IN A P TAG !!</p> </div> </div> <div style="clear: both;"> </div> </div> <!-- begin spells --> <div style="margin: auto; width: 90%;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">SpellS</span><div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!! SPELL CASTING ABILITY !!</div> <div style="display: table-cell;">!! SPELL SAVE DC !!</div> <div style="display: table-cell;">!! SPELL ATTACK BONUS !!</div> </div> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia; text-transform: uppercase;"> <div style="display: table-cell;">spell casting ability</div> <div style="display: table-cell;">spell save dc</div> <div style="display: table-cell;">spell attack bonus</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: .5em;"></div> </div> </div> <!-- begin column one --> <div style="width: 33.3%; display: inline-block; vertical-align: top;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">cantrips</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level one</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level two</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> </div> <!-- end column one --> <!-- begin column two --> <div style="width: 33.3%; display: inline-block; vertical-align: top;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level three</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level four</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level five</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> </div> <!-- end column two --> <!-- begin column three --> <div style="width: 31%; display: inline-block; vertical-align: top;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level six</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level seven</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level eight</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level nine</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> </div> <!-- end column three --> </div>

without image
<cut><raw-code><div style="margin: auto; width: 90%;"> <span style="display: block; font: italic 2.3em 'Playfair Display', georgia, serif; background: #000; color: #fff; text-align: right; margin-bottom: .5em; padding: .25em; border-radius: 5px 15px;"> !! CHARACTER NAME !!</span> <div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!! CLASS AND LEVEL !!</div> <div style="display: table-cell;">!! BACKGROUND !!</div> <div style="display: table-cell;"><a href="!! CONTACT LINK !!">!! PLAYER NAME !!</a></div> </div> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia;"> <div style="display: table-cell;">CLASS & LEVEL</div> <div style="display: table-cell;">BACKGROUND</div> <div style="display: table-cell;">PLAYER</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-top: 1em;"></div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!! RACE !!</div> <div style="display: table-cell;">!! ALIGNMENT !!</div> <div style="display: table-cell;">!! XP !!</div> </div> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia;"> <div style="display: table-cell;">RACE</div> <div style="display: table-cell;">ALIGNMENT</div> <div style="display: table-cell;">EXPERIENCE POINTS</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: 2em;"></div> </div> </div> <!-- begin column one --> <div style="width: 25%; display: inline-block; vertical-align: top;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">STATS</span> <div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">STRENGTH</span></div> <div style="display: table-cell;">!! STRENGTH SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">DEXTERITY</span></div> <div style="display: table-cell;">!!DEXTERITY SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">CONSTITUTION</span></div> <div style="display: table-cell;">!!CONSTITUTION SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">INTELLIGENCE</span></div> <div style="display: table-cell;">!!INTELLIGENCE SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">WISDOM</span></div> <div style="display: table-cell;">!!WISDOM SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">CHARISMA</span></div> <div style="display: table-cell;">!!CHARISMA SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: .5em;"></div> </div> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">bonuses/saving throws</span> <div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">PROFICIENCY</div> <div style="display: table-cell;">!! PROFICIENCY BONUS !!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">STRENGTH</div> <div style="display: table-cell;">!! STRENGTH SAVE + PROFICIENCY ☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">DEXTERITY</div> <div style="display: table-cell;">!! DEXTERITY SAVE + PROFICIENCY ☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">CONSTITUTION</div> <div style="display: table-cell;">!! CONSTITUTION SAVE + PROFICIENCY ☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">INTELLIGENCE</div> <div style="display: table-cell;">!! INTELLIGENCE SAVE + PROFICIENCY ☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">WISDOM</div> <div style="display: table-cell;">!!WISDOM SAVE + PROFICIENCY ☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">CHARISMA</div> <div style="display: table-cell;">!! CHARISMA SAVE + PROFICIENCY ☐/☑!!</div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: .5em;"></div> </div> </div> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">vitality</span> <div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!! AC !!</div> <div style="display: table-cell;">!! INITIATIVE !!</div> </div> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia;"> <div style="display: table-cell;">ARMOR CLASS</div> <div style="display: table-cell;">INITIATIVE</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-top: 1em;"></div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!!MAX HP!!</div> <div style="display: table-cell;">!!HIT DICE!!</div> </div> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia;"> <div style="display: table-cell;">MAX HIT POINTS</div> <div style="display: table-cell;">HIT DICE</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: .5em;"></div> </div> </div> </div> <!-- end column one --> <!-- begin column two --> <div style="width: 30%; display: inline-block; vertical-align: top; padding: 0em 1em;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">skills</span> <div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell; width:75%;"></div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell; font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">acrobatics</div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">animal handling</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">arcana</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">athletics</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">deception</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">history</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">insight</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">intimidation</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">investigation</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">medicine</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">nature</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">perception</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">performance</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">persuasion</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">religion</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">sleight of hand</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">stealth</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">survival</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">passive wisdom</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: .5em;"></div> </div> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">other proficiencies & languages</span> <div style="width: 100%; padding: 0em 1em;"> — !!LANGUAGE!! <br /> — !!OTHER PROFICIENCY!!<br /> — !!SEPARATE WITH BREAK TAGS!! <br /> </div> </div> <!-- begin column three --> <div style="width: 39%; display: inline-block; vertical-align: top;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">weapons</span> <div style="display: table; width: 100%"> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;"> <div style="display: table-cell;">weapon</div> <div style="display: table-cell;">atk bonus</div> <div style="display: table-cell;">damage/type</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!! WEAPON TYPE !!</div> <div style="display: table-cell;">!! ATTACK BONUS !!</div> <div style="display: table-cell;">!! DAMAGE/TYPE !!</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: .5em;"></div> </div> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">features & traits</span> <div style="width: 100%; padding: 0em 1em;"> <p>— !! RAMBLINGS ABOUT FEATURES/TRAITS !!</p> <p>— !! MORE RAMBLINGS !!</p> <p>— !! EVEN MORE TEXT !!</p> <p>— !! IF YOU NEED MORE THAN FOUR BULLETS STICK THEM IN A P TAG !!</p> </div> </div> </div> <!-- begin spells --> <div style="margin: auto; width: 90%;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">SpellS</span><div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!! SPELL CASTING ABILITY !!</div> <div style="display: table-cell;">!! SPELL SAVE DC !!</div> <div style="display: table-cell;">!! SPELL ATTACK BONUS !!</div> </div> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia; text-transform: uppercase;"> <div style="display: table-cell;">spell casting ability</div> <div style="display: table-cell;">spell save dc</div> <div style="display: table-cell;">spell attack bonus</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: .5em;"></div> </div> </div> <!-- begin column one --> <div style="width: 33.3%; display: inline-block; vertical-align: top;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">cantrips</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level one</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level two</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> </div> <!-- end column one --> <!-- begin column two --> <div style="width: 33.3%; display: inline-block; vertical-align: top;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level three</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level four</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level five</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> </div> <!-- end column two --> <!-- begin column three --> <div style="width: 31%; display: inline-block; vertical-align: top;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level six</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level seven</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level eight</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level nine</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> </div> <!-- end column three --> </div>

Comments

[shrinkage]

HOLY SHIT YES ♥♥♥

[crisised]

:> ♥

[shittywizard]

Hi! Just wanted to let you know I used this excellent code and added stuff here and there for my own purposes, and it came out really great! It's in use here, if you like seeing your codes in action!

[crisised]

(pls pardon the rp account i am too lazy to log out of)

aaah that looks amazing, i love what you've done with it!!! i especially like the character relations bit, that is an a+ idea.

[negativecamber]

Used this one here with alterations to work for a Vampire: The Masquerade character sheet -- thought I'd drop it in this thread because there were definitely aspects inspired by shittywizard!

[shillelagh]

Sliding this in here because I was definitely inspired by your own additions on my sheet - I reverse-engineered it a bit, both for a CR section and to keep the spell slots all nice and neat.

Adding it here for anyone else wandering past who thinks it's cool. Plop it in after your spell table but before that final capping... line... thing, and don't put more then 3 on one horizontal row or it gets Weird.

<!-- begin cr --> <div style="margin: auto; width: 90%;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">CHARACTER RELATIONSHIPS</span> <table width="100%"> <!-- INSERT NEW TR BELOW THIS POINT --> <!-- ISOLATED ROW, 3 TD'S TO A TR AT MAXIMUM --> <tr> <td width="33.3%" style="vertical-align:top;"> <span style="display: inline-block; width:95%; vertical-align: top;font: italic 1.1em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; background: #000; border-radius: 5px 15px;"><a href="!! URL !!" style="text-decoration: none; color:#fff;">!! NAME !!</a></span> <center><img src="!! USERPIC !!" style="display: inline-block; border-radius: 5px 15px; vertical-align: middle;"> <span style="vertical-align: middle; font-size: 20pt">● ○ ○ ○ ○</span> <div style="display:inline-block; width: 90%; padding: 1em; text-align: justify!important"> !! lorem ipsum etc etc !!<br /></div> </td> <td width="33.3%" style="vertical-align:top;"> <span style="display: inline-block; width:95%; vertical-align: top;font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; background: #000; border-radius: 5px 15px;"><a href="!! URL !!" style="text-decoration: none; color:#fff;">!! NAME !!</a></span> <center><img src="!! USERPIC !!" style="display: inline-block; border-radius: 5px 15px; vertical-align: middle;"> <span style="vertical-align: middle; font-size: 20pt">● ○ ○ ○ ○</span> <div style="display:inline-block; width: 90%; padding: 1em; text-align: justify!important"> !! lorem ipsum etc etc etc !! <br /> </center> </div> </td> <td width="33.3%" style="vertical-align:top;"> <span style="display: inline-block; width:95%; vertical-align: top;font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; background: #000; border-radius: 5px 15px;"><a href="!! URL !!" style="text-decoration: none; color:#fff;">!! NAME !!</a></span><center></center> <center><img src="!! USERPIC !!" style="display: inline-block; border-radius: 5px 15px; vertical-align: middle;"> <span style="vertical-align: middle; font-size: 20pt">● ○ ○ ○ ○</span> <div style="display:inline-block; width: 90%; padding: 1em; text-align: justify!important"> !! lorem ipsum etc etc etc !!<br /> </center> </td> </tr> <!-- END ISOLATED ROW --> <!-- INSERT NEW TR ABOVE THIS POINT --> <!-- end cr--> </table>

Additionally, I added some other stuff inspired by tablestop below - but the primary tweak was adding another row to the hit point/armor class section, to track speed (since halflings, gnomes, and wood elves use something other then 30) and Something Else - usually darkvision range, but it could work for flight/swim speed too, or just plain ol' Inspiration.

<div style="width: 30%; display: inline-block; vertical-align: top; padding: 0em 1em;"> <div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!! AC !!</div> <div style="display: table-cell;">!! INITIATIVE !!</div> </div> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia;"> <div style="display: table-cell;">ARMOR CLASS</div> <div style="display: table-cell;">INITIATIVE</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-top: .5em;"></div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!! SPEED !!</div> <div style="display: table-cell;">!! OTHER !!</div> </div> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia;"> <div style="display: table-cell;">SPEED</div> <div style="display: table-cell;">OTHER</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-top: .5em;"></div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!! HP !!</div> <div style="display: table-cell;">!! HIT DICE !!</div> </div> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia;"> <div style="display: table-cell;">MAX HIT POINTS</div> <div style="display: table-cell;">HIT DICE</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: .5em;"></div>

All of this was tested on the "with image" code. I'm not sure if it works as well on the other.

[duskmeadow]

thank youuuuuuuuuuuuuuuuuu

[chanterie]

you're very welcome!!! ♥

[kairo]

Hi!

On the code WITHOUT the picture there's a thing that makes the vitality section go a bit shorter than the other section.

The fix is to add a /div tag before the vitality section, then to erase the /div after the "end column one" section and it ends up lining up nice like so!

also THANK YOU SO MUCH FOR MAKING THIS CODE IT IS AWESOME!

[chanterie]

ahhhh thank you! keeping track of all the div tags in this thing is a task and a half @_@

ALSO IM VERY LAD YOU LIKE THE CODE

omfg y do i type anything on my phone

[kairo]

haha np np it was my d&d buddy who discovered the fix, but i figured i'd share it with you/others who wanna use the code!

i'mma use this code for all my d&d peeps now! thanks again!

[tablestop]

Just wanted to say I love this and used it to do a bunch of character sheets the other day. I also added in some code to make the features & traits section a bit neater, so that each feature/trait can be collapsed in on itself.

<p><details style="background:transparent;"> <summary style="cursor:pointer;color:#000;font-size:10px;letter-spacing:1px;"> <i>FEATURE</i></summary> <div style="padding:2px 12px;"> <font color="#999"><i><small>Source: Source</small></i></font><br /> Description<br /> </div> </details></p>

it doesn't quite match the rest of the code lookswise because I didn't try to match the font choice you had done, but I thought I'd share it here just in case anyone else wanted to make use of it.