Converting tables to divs

Hey so I'm in the process of converting the thirty thousand tables that made up my sheet into divs, I've managed to do so, but it isn't quite where I want it to be aesthetically.  Any tips on css to make it look like my nice and neat tables from before? Here's what the table looked like: And here's what it looks like now:

It would be helpful if you would post your current html and css for that section.  It would be easier for someone to suggest changes then.

<div class="row"> <div class="col"><h4>Stats</h4></div> <div class="col"><h4>Dice</h4></div> <div class="col"><h4>Hard </h4></div> <div class="col"><h4>Wiggle</h4></div> <div class="col"><h4>Hyper</h4></div> <div class="col"><h4>H Hard</h4></div> <div class="col"><h4>H Wiggle</h4></div> <div class="col"><h4></h4></div> <div class="col"><h4>Amounts</h4></div> <div class="col"><h4></h4></div> <div class="col"><h4>Cost</h4></div> <div class="col"><h4>Roll</h4></div> </div> <div class="row"> <div class="col"> Body </div> <div class="col"> <input type="number" name="attr_bodydice" value="0" /> </div> <div class="col"> <input type="number" name="attr_bodyhard" value="0" /> </div> <div class="col"> <input type="number" name="attr_bodywiggle" value="0" /> </div> <div class="col"> <input type="number" name="attr_bodyhyper" value="0" /> </div> <div class="col"> <input type="number" name="attr_bodyhhard" value="0" /> </div> <div class="col"> <input type="number" name="attr_bodyhwiggle" value="0" /> </div> <div class="col"> <input type="number" style="width:37px" name="attr_bodyamount" value="(@{bodydice} + @{bodyhyper})" disabled="true" />D </div> <div class="col"> <input type="number" style="width:37px" name="attr_bodyhamount" value="(@{bodyhard} + @{bodyhhard})" disabled="true" />HD </div> <div class="col"> <input type="number" style="width:37px" name="attr_bodywamount" value="(@{bodywiggle} + @{bodyhwiggle})" disabled="true" />WD </div> <div class="col"> <input type="number" name="attr_bodycost" value="@{bodydice}*5 + @{bodyhard}*10 + @{bodywiggle}*20 + @{bodyhyper}*4 + @{bodyhhard}*8 + @{bodyhwiggle}*16" disabled="true" /> </div> <div class="col"> <button type="roll" name="roll_bodyoutput" value="/roll (@{bodydice} + @{bodyhyper})d10msd"></button> </div> </div> <div class="row"> <div class="col"> Coordination </div> <div class="col"> <input type="number" name="attr_coorddice" value="0" /> </div> <div class="col"> <input type="number" name="attr_coordhard" value="0" /> </div> <div class="col"> <input type="number" name="attr_coordwiggle" value="0" /> </div> <div class="col"> <input type="number" name="attr_coordhyper" value="0" /> </div> <div class="col"> <input type="number" name="attr_coordhhard" value="0"/> </div> <div class="col"> <input type="number" name="attr_coordhwiggle" value="0" /> </div> <div class="col"> <input type="number" style="width:37px" name="attr_coordamount" value="(@{coorddice} + @{coordhyper})" disabled="true" />D </div> <div class="col"> <input type="number" style="width:37px" name="attr_coordhamount" value="(@{coordhard} + @{coordhhard})" disabled="true" />HD </div> <div class="col"> <input type="number" style="width:37px" name="attr_coordwamount" value="(@{coordwiggle} + @{coordhwiggle})" disabled="true" />WD </div> <div class="col"> <input type="number" name="attr_coordcost" value="@{coorddice}*5 + @{coordhard}*10 + @{coordwiggle}*20 + @{coordhyper}*4 + @{coordhhard}*8 + @{coordhwiggle}*16" disabled="true" /> </div> <div class="col"> <button type="roll" name="roll_coordoutput" value="/roll (@{coorddice} + @{coordhyper})d10msd"></button> </div> </div> <div class="row"> <div class="col"> Sense </div> <div class="col"> <input type="number" name="attr_sensedice" value="0" /> </div> <div class="col"> <input type="number" name="attr_sensehard" value="0" /> </div> <div class="col"> <input type="number" name="attr_sensewiggle" value="0" /> </div> <div class="col"> <input type="number" name="attr_sensehyper" value="0" /> </div> <div class="col"> <input type="number" name="attr_sensehhard" value="0" /> </div> <div class="col"> <input type="number" name="attr_sensehwiggle" value="0" /> </div> <div class="col"> <input type="number" style="width:37px" name="attr_senseamount" value="(@{sensedice} + @{sensehyper})" disabled="true" />D </div> <div class="col"> <input type="number" style="width:37px" name="attr_sensehamount" value="(@{sensehard} + @{sensehhard})" disabled="true" />HD </div> <div class="col"> <input type="number" style="width:37px" name="attr_sensewamount" value="(@{sensewiggle} + @{sensehwiggle})" disabled="true" />WD </div> <div class="col"> <input type="number" name="attr_sensecost" value="@{sensedice}*5 + @{sensehard}*10 + @{sensewiggle}*20 + @{sensehyper}*4 + @{sensehhard}*8 + @{sensehwiggle}*16" disabled="true" /> </div> <div class="col"> <button type="roll" name="roll_senseoutput" value="/roll (@{sensedice} + @{sensehyper})d10msd"></button> </div> </div> <div class="row"> <div class="col"> Mind </div> <div class="col"> <input type="number" name="attr_minddice" value="0" /> </div> <div class="col"> <input type="number" name="attr_mindhard" value="0" /> </div> <div class="col"> <input type="number" name="attr_mindwiggle" value="0" /> </div> <div class="col"> <input type="number" name="attr_mindhyper" value="0" /> </div> <div class="col"> <input type="number" name="attr_mindhhard" value="0" /> </div> <div class="col"> <input type="number" name="attr_mindhwiggle" value="0" /> </div> <div class="col"> <input type="number" style="width:37px" name="attr_mindamount" value="(@{minddice} + @{mindhyper})" disabled="true" />D </div> <div class="col"> <input type="number" style="width:37px" name="attr_mindhamount" value="(@{mindhard} + @{mindhhard})" disabled="true" />HD </div> <div class="col"> <input type="number" style="width:37px" name="attr_mindwamount" value="(@{mindwiggle} + @{mindhwiggle})" disabled="true" />WD </div> <div class="col"> <input type="number" name="attr_mindcost" value="@{minddice}*5 + @{mindhard}*10 + @{mindwiggle}*20 + @{mindhyper}*4 + @{mindhhard}*8 + @{mindhwiggle}*16" disabled="true" /> </div> <div class="col"> <button type="roll" name="roll_mindoutput" value="/roll (@{minddice} + @{mindhyper})d10msd"></button> </div> </div> <div class="row"> <div class="col"> Charm </div> <div class="col"> <input type="number" name="attr_charmdice" value="0" /> </div> <div class="col"> <input type="number" name="attr_charmhard" value="0" /> </div> <div class="col"> <input type="number" name="attr_charmwiggle" value="0" /> </div> <div class="col"> <input type="number" name="attr_charmhyper" value="0" /> </div> <div class="col"> <input type="number" name="attr_charmhhard" value="0" /> </div> <div class="col"> <input type="number" name="attr_charmhwiggle" value="0" /> </div> <div class="col"> <input type="number" style="width:37px" name="attr_charmamount" value="(@{charmdice} + @{charmhyper})" disabled="true" />D </div> <div class="col"> <input type="number" style="width:37px" name="attr_charmhamount" value="(@{charmhard} + @{charmhhard})" disabled="true" />HD </div> <div class="col"> <input type="number" style="width:37px" name="attr_charmwamount" value="(@{charmwiggle} + @{charmhwiggle})" disabled="true" />WD </div> <div class="col"> <input type="number" name="attr_charmcost" value="@{charmdice}*5 + @{charmhard}*10 + @{charmwiggle}*20 + @{charmhyper}*4 + @{charmhhard}*8 + @{charmhwiggle}*16" disabled="true" /> </div> <div class="col"> <button type="roll" name="roll_charmoutput" value="/roll (@{charmdice} + @{charmhyper})d10msd"></button> </div> </div> <div class="row"> <div class="col"> Command </div> <div class="col"> <input type="number" name="attr_commdice" value="0" /> </div> <div class="col"> <input type="number" name="attr_commhard" value="0" /> </div> <div class="col"> <input type="number" name="attr_commwiggle" value="0" /> </div> <div class="col"> <input type="number" name="attr_commhyper" value="0" /> </div> <div class="col"> <input type="number" name="attr_commhhard" value="0" /> </div> <div class="col"> <input type="number" name="attr_commhwiggle" value="0" /> </div> <div class="col"> <input type="number" style="width:37px" name="attr_commamount" value="(@{commdice} + @{commhyper})" disabled="true" />D </div> <div class="col"> <input type="number" style="width:37px" name="attr_commhamount" value="(@{commhard} + @{commhhard})" disabled="true" />HD </div> <div class="col"> <input type="number" style="width:37px" name="attr_commwamount" value="(@{commwiggle} + @{commhwiggle})" disabled="true" />WD </div> <div class="col"> <input type="number" name="attr_commcost" value="@{commdice}*5 + @{commhard}*10 + @{commwiggle}*20 + @{commhyper}*4 + @{commhhard}*8 + @{commhwiggle}*16" disabled="true" /> </div> <div class="col"> <button type="roll" name="roll_commoutput" value="/roll (@{commdice} + @{commhyper})d10msd"></button> </div> </div> </div>

CSS is merely: div {     padding:5px; } so far.

The default classes for row and col might be messing with your code.  I would rename the classes for both to sheet-tr and sheet-td so your css isn't being interfered with.  I also wrapped your code in a div with class="stats" just to keep things "tighty". Try this as a start; html <div class="stats"> <div class="tr"> <div class="td"> <h4>Stats</h4> </div> <div class="td"> <h4>Dice</h4> </div> <div class="td"> <h4>Hard </h4> </div> <div class="td"> <h4>Wiggle</h4> </div> <div class="td"> <h4>Hyper</h4> </div> <div class="td"> <h4>H Hard</h4> </div> <div class="td"> <h4>H Wiggle</h4> </div> <div class="td"> <h4></h4> </div> <div class="td"> <h4>Amounts</h4> </div> <div class="td"> <h4></h4> </div> <div class="td"> <h4>Cost</h4> </div> <div class="td"> <h4>Roll</h4> </div> </div> <div class="tr"> <div class="td">Body</div> <div class="td"> <input type="number" name="attr_bodydice" value="0" /> </div> <div class="td"> <input type="number" name="attr_bodyhard" value="0" /> </div> <div class="td"> <input type="number" name="attr_bodywiggle" value="0" /> </div> <div class="td"> <input type="number" name="attr_bodyhyper" value="0" /> </div> <div class="td"> <input type="number" name="attr_bodyhhard" value="0" /> </div> <div class="td"> <input type="number" name="attr_bodyhwiggle" value="0" /> </div> <div class="td"> <input type="number" style="width:37px" name="attr_bodyamount" value="(@{bodydice} + @{bodyhyper})" disabled="true" />D </div> <div class="td"> <input type="number" style="width:37px" name="attr_bodyhamount" value="(@{bodyhard} + @{bodyhhard})" disabled="true" />HD </div> <div class="td"> <input type="number" style="width:37px" name="attr_bodywamount" value="(@{bodywiggle} + @{bodyhwiggle})" disabled="true" />WD </div> <div class="td"> <input type="number" name="attr_bodycost" value="@{bodydice}*5 + @{bodyhard}*10 + @{bodywiggle}*20 + @{bodyhyper}*4 + @{bodyhhard}*8 + @{bodyhwiggle}*16" disabled="true" /> </div> <div class="td"> <button type="roll" name="roll_bodyoutput" value="/roll (@{bodydice} + @{bodyhyper})d10msd"></button> </div> </div> <div class="tr"> <div class="td"> Coordination </div> <div class="td"> <input type="number" name="attr_coorddice" value="0" /> </div> <div class="td"> <input type="number" name="attr_coordhard" value="0" /> </div> <div class="td"> <input type="number" name="attr_coordwiggle" value="0" /> </div> <div class="td"> <input type="number" name="attr_coordhyper" value="0" /> </div> <div class="td"> <input type="number" name="attr_coordhhard" value="0"/> </div> <div class="td"> <input type="number" name="attr_coordhwiggle" value="0" /> </div> <div class="td"> <input type="number" style="width:37px" name="attr_coordamount" value="(@{coorddice} + @{coordhyper})" disabled="true" />D </div> <div class="td"> <input type="number" style="width:37px" name="attr_coordhamount" value="(@{coordhard} + @{coordhhard})" disabled="true" />HD </div> <div class="td"> <input type="number" style="width:37px" name="attr_coordwamount" value="(@{coordwiggle} + @{coordhwiggle})" disabled="true" />WD </div> <div class="td"> <input type="number" name="attr_coordcost" value="@{coorddice}*5 + @{coordhard}*10 + @{coordwiggle}*20 + @{coordhyper}*4 + @{coordhhard}*8 + @{coordhwiggle}*16" disabled="true" /> </div> <div class="td"> <button type="roll" name="roll_coordoutput" value="/roll (@{coorddice} + @{coordhyper})d10msd"></button> </div> </div> <div class="tr"> <div class="td"> Sense </div> <div class="td"> <input type="number" name="attr_sensedice" value="0" /> </div> <div class="td"> <input type="number" name="attr_sensehard" value="0" /> </div> <div class="td"> <input type="number" name="attr_sensewiggle" value="0" /> </div> <div class="td"> <input type="number" name="attr_sensehyper" value="0" /> </div> <div class="td"> <input type="number" name="attr_sensehhard" value="0" /> </div> <div class="td"> <input type="number" name="attr_sensehwiggle" value="0" /> </div> <div class="td"> <input type="number" style="width:37px" name="attr_senseamount" value="(@{sensedice} + @{sensehyper})" disabled="true" />D </div> <div class="td"> <input type="number" style="width:37px" name="attr_sensehamount" value="(@{sensehard} + @{sensehhard})" disabled="true" />HD </div> <div class="td"> <input type="number" style="width:37px" name="attr_sensewamount" value="(@{sensewiggle} + @{sensehwiggle})" disabled="true" />WD </div> <div class="td"> <input type="number" name="attr_sensecost" value="@{sensedice}*5 + @{sensehard}*10 + @{sensewiggle}*20 + @{sensehyper}*4 + @{sensehhard}*8 + @{sensehwiggle}*16" disabled="true" /> </div> <div class="td"> <button type="roll" name="roll_senseoutput" value="/roll (@{sensedice} + @{sensehyper})d10msd"></button> </div> </div> <div class="tr"> <div class="td"> Mind </div> <div class="td"> <input type="number" name="attr_minddice" value="0" /> </div> <div class="td"> <input type="number" name="attr_mindhard" value="0" /> </div> <div class="td"> <input type="number" name="attr_mindwiggle" value="0" /> </div> <div class="td"> <input type="number" name="attr_mindhyper" value="0" /> </div> <div class="td"> <input type="number" name="attr_mindhhard" value="0" /> </div> <div class="td"> <input type="number" name="attr_mindhwiggle" value="0" /> </div> <div class="td"> <input type="number" style="width:37px" name="attr_mindamount" value="(@{minddice} + @{mindhyper})" disabled="true" />D </div> <div class="td"> <input type="number" style="width:37px" name="attr_mindhamount" value="(@{mindhard} + @{mindhhard})" disabled="true" />HD </div> <div class="td"> <input type="number" style="width:37px" name="attr_mindwamount" value="(@{mindwiggle} + @{mindhwiggle})" disabled="true" />WD </div> <div class="td"> <input type="number" name="attr_mindcost" value="@{minddice}*5 + @{mindhard}*10 + @{mindwiggle}*20 + @{mindhyper}*4 + @{mindhhard}*8 + @{mindhwiggle}*16" disabled="true" /> </div> <div class="td"> <button type="roll" name="roll_mindoutput" value="/roll (@{minddice} + @{mindhyper})d10msd"></button> </div> </div> <div class="tr"> <div class="td"> Charm </div> <div class="td"> <input type="number" name="attr_charmdice" value="0" /> </div> <div class="td"> <input type="number" name="attr_charmhard" value="0" /> </div> <div class="td"> <input type="number" name="attr_charmwiggle" value="0" /> </div> <div class="td"> <input type="number" name="attr_charmhyper" value="0" /> </div> <div class="td"> <input type="number" name="attr_charmhhard" value="0" /> </div> <div class="td"> <input type="number" name="attr_charmhwiggle" value="0" /> </div> <div class="td"> <input type="number" style="width:37px" name="attr_charmamount" value="(@{charmdice} + @{charmhyper})" disabled="true" />D </div> <div class="td"> <input type="number" style="width:37px" name="attr_charmhamount" value="(@{charmhard} + @{charmhhard})" disabled="true" />HD </div> <div class="td"> <input type="number" style="width:37px" name="attr_charmwamount" value="(@{charmwiggle} + @{charmhwiggle})" disabled="true" />WD </div> <div class="td"> <input type="number" name="attr_charmcost" value="@{charmdice}*5 + @{charmhard}*10 + @{charmwiggle}*20 + @{charmhyper}*4 + @{charmhhard}*8 + @{charmhwiggle}*16" disabled="true" /> </div> <div class="td"> <button type="roll" name="roll_charmoutput" value="/roll (@{charmdice} + @{charmhyper})d10msd"></button> </div> </div> <div class="tr"> <div class="td"> Command </div> <div class="td"> <input type="number" name="attr_commdice" value="0" /> </div> <div class="td"> <input type="number" name="attr_commhard" value="0" /> </div> <div class="td"> <input type="number" name="attr_commwiggle" value="0" /> </div> <div class="td"> <input type="number" name="attr_commhyper" value="0" /> </div> <div class="td"> <input type="number" name="attr_commhhard" value="0" /> </div> <div class="td"> <input type="number" name="attr_commhwiggle" value="0" /> </div> <div class="td"> <input type="number" style="width:37px" name="attr_commamount" value="(@{commdice} + @{commhyper})" disabled="true" />D </div> <div class="td"> <input type="number" style="width:37px" name="attr_commhamount" value="(@{commhard} + @{commhhard})" disabled="true" />HD </div> <div class="td"> <input type="number" style="width:37px" name="attr_commwamount" value="(@{commwiggle} + @{commhwiggle})" disabled="true" />WD </div> <div class="td"> <input type="number" name="attr_commcost" value="@{commdice}*5 + @{commhard}*10 + @{commwiggle}*20 + @{commhyper}*4 + @{commhhard}*8 + @{commhwiggle}*16" disabled="true" /> </div> <div class="td"> <button type="roll" name="roll_commoutput" value="/roll (@{commdice} + @{commhyper})d10msd"></button> </div> </div> </div> css div { padding:5px; } .sheet-tr { display:table-row; } .sheet-td { display: table-cell; text-align: center; } input { width:4.5em; }

Hey it worked! Mostly. It certainly made it look like it did previously, but the issue now is that when I apply the same changes to other tables beneath that one, they are shunted way off to the right, eventually off the page entirely. Like so:

I don't think making a CSS table using <div>s is in the spirit of "no table-based layout" rule, to be honest ;).

I thought the no tables was for technical reasons, like slower load-times and lack of flexibility.

My (possibly mistaken) impression was that all styling was to be moved from the html to css because that was the way the web (and browser support) was moving.  I could be totally wrong there though.  I'm not familiar enough with css grid/flex or whatever other type of css might be out there to quickly run out something for you.  I expect you will end up wanting to do a lot more class labeling for things. For example, I would give a class label to your stat column labels, since you may want to do something with those to make them stand out more through underline or whatever.  Then I would give a different class label to each of your stat names that run down the left column.  I would give all your number entry boxes a class name so that the width of the field could be controlled in css.  Same for your disabled boxes, though I seem to remember somewhere that using "readonly" was preferred.  Your roll buttons should have a class given to them, so that you can assign widths, colors, etc.  If you really want to get fancy, you move your rolls to the left column and restyle the buttons to have no die image and just the stat name on the button.  That would save you a column.  Unfortunately, there doesn't seem to be a good shortcut to learning the css.   I just made it though mine by muddling my way through over time.

Yeah I managed to figure out the issue, was mostly a lot of misplaced /divs. I'm not sure if what I'm doing is somehow not allowed, so I'll find out when I send it out..

I believe that using tables for layout/design (not their intended use) can cause odd behavior(s) among various html elements that often require workarounds that in themselves are often inconsistent across browsers(as well as versions of the same browser) and is typically frowned upon by web designers/developers.  As mentioned; "we" should all learn to separate the content from design and layout by utilizing css.  Roll20 has established that all sheet authors follow some minimum guidelines when creating/editing/maintaining character sheets.  Dropping table's for divs is one such guideline.

Jakob said: I don't think making a CSS table using <div>s is in the spirit of "no table-based layout" rule, to be honest ;). Agree, but if you simply need to emulate a table...

Vince said: Agree, but if you simply need to emulate a table... It's still better to use something like CSS Grid. That being said, I didn't know about display :table as an option, I move my layout design from floats & tables directly to CSS Grid & Flexbox when I actually started looking into things.

I think the goal is using a non-table layout so that the character sheet can collapse into one or two columns to be displayed on mobile. 

There are also issues with repeating sections and tables that using divs circumvents

I've started using css grid and flex as well.  Good stuff. We can all agree, tables be damned. ;-p

Good job, Jack M.  Find those lost bits of code is the primary reason for the keyboard shaped indents on my forehead. ...tables were great for me, when I started.  They made sense, were easy, and so long as I didn't make a table-in-a-table, looked okay.  But since i moved to using <div>'s and grids (like AndreaJ., though flexbox still confuses me), things line up better, especially into and out of repeating sections (like Josh A. said).  So, now that I know how, non-table approaches are kinda fun. But I also agree with Jakob, emulating tables with <div>s instead of just using tables, is using tables with extra steps.  I mean, if one is displaying tabular data, why not use a table?

Coal Powered Puppet said: Good job, Jack M.  Find those lost bits of code is the primary reason for the keyboard shaped indents on my forehead. ...tables were great for me, when I started.  They made sense, were easy, and so long as I didn't make a table-in-a-table, looked okay.  But since i moved to using <div>'s and grids (like AndreaJ., though flexbox still confuses me), things line up better, especially into and out of repeating sections (like Josh A. said).  So, now that I know how, non-table approaches are kinda fun. But I also agree with Jakob, emulating tables with <div>s instead of just using tables, is using tables with extra steps.  I mean, if one is displaying tabular data, why not use a table? I was told you can't use tables for layouts, but I liked the look of the tables as they were.

Jack M. said: I was told you can't use tables for layouts, but I liked the look of the tables as they were. Per the Minimum Requirements page, the Devs would prefer that you don't use <table>s except for tabular data, which isn't actually all that common with character sheets.  At least, not as common and when <table> was being used.  In addition, <div> and grids are a great deal more flexible in what they can do, and can be controlled a lot better. They hare just...not as easy to use. Once you get the hang of grids, you will see how awesome they are.  Tightly controlled <div> are also good