Make a sheet look pretty

okay so I've made a HTML with everything fitting together as I want it but now I'm looking to make it look like the original I'm using as a template, sorry about the wall of text, however considering the original design I doubt I could symplify it any source material: my code: <table border=1><!--holding table--> <tr> <td><table width=100% border=1><!--basic information--> <th colspan=2>Battlestations Character Sheet</th> <tr> <td>Name</td> <td><input type="text" name="attr_char_name"/></td> </tr> <tr> <td>Profession</td> <td><input type="text" name="attr_char_profession"/></td> </tr> <tr> <td>Species</td> <td><input type="text" name="attr_char_Species"/></td> </tr> <tr> <td>Ability</td> <td rowspan=2><input type="text" name="attr_char_Ability_1"/></td> </tr> <tr> <tr> <td></td> <td><input type="text" name="attr_char_Ability_2"/></td> </tr> </tr> </table></td> <td><table width=100% border=1><!--skills--> <th>Skills</th> <th colspan=2>Level</th> <tr> <td>Athletics</td> <td><input type="number" name="attr_char_ath" value="0"/></td> <td><button type='roll' name='roll_Athletics_check' value='[[2d6+@{char_ath}]]'></button></td> </tr> <tr> <td>Combat</td> <td><input type="number" name="attr_char_com" value="0"/></td> <td><button type='roll' name='roll_Combat_check' value='[[2d6+@{char_com}]]'></button></td> </tr> <tr> <td>Engineering</td> <td><input type="number" name="attr_char_eng" value="0"/></td> <td><button type='roll' name='roll_Engineering_check' value='[[2d6+@{char_eng}]]'></button></td> </tr> <tr> <td>Piloting</td> <td><input type="number" name="attr_char_pil" value="0"/></td> <td><button type='roll' name='roll_Pilot_check' value='[[2d6+@{char_pil}]]'></button></td> </tr> <tr> <td>Science</td> <td><input type="number" name="attr_char_sci" value="0"/></td> <td><button type='roll' name='roll_Science_check' value='[[2d6+@{char_sci}]]'></button></td> </tr> </table></td> <td><table width=100% border=1><!--stats--> <th colspan=4>Statistics</th> <tr> <td>Base ♥</td> <td><input type="number" name="attr_char_baseHP"/></td> <td>true ♥</td> <td><input type="number" name="attr_char_trueHP" value="(@{char_ath}+@{char_rank}+@{char_baseHP})" disabled="true"/></td> </tr> <tr> <td>Movement</td> <td><input type="number" name="attr_char_move"/></td> <td>Wounds</td> <td><input type="number" name="attr_char_wounds"/></td> </tr> <tr> <td>Luck</td> <td><input type="number" name="attr_char_luck" value="(@{char_rank}+5)" disabled="true"/></td> <td>Spent</td> <td><input type="number" name="attr_char_lspen"/></td> </tr> <tr> <td>Target</td> <td><input type="number" name="attr_char_target"/></td> <td>Rank</td> <td><input type="number" name="attr_char_rank" value="1"/></td> </tr> <tr> <td>Hands</td> <td><input type="number" name="attr_char_hands"/></td> <td>Carry</td> <td><input type="number" name="attr_char_carry" value="(@{char_ath}*10)" disabled="true"/></td> </tr> </table></td> </tr> <tr> <td colspan=3><table border=1> <tr> <td colspan=2><table width=100% border=1> <tr> <td>Prestige</td> <td><input type="number" name="attr_char_pres"/></td> <td>Experience</td> <td><input type="number" name="attr_char_exp"/></td> <td>Credits</td> <td><input type="number" name="attr_char_credits"/></td> </tr> </table></td> </tr> <tr> <td><table border=1><!--Special Abilities--> <th colspan=4>Special Abilities</th> <tr> <td>Ability</td> <td>Notes</td> <td>Pool</td> <td>Used</td> </tr> <tr> <td><input type="text" name="attr_char_special_name_1"/></td> <td><input type="text" name="attr_char_special_note_1"/></td> <td><input type="text" name="attr_char_special_pool_1"/></td> <td><input type="text" name="attr_char_special_used_1"/></td> </tr> <tr> <td><input type="text" name="attr_char_special_name_2"/></td> <td><input type="text" name="attr_char_special_note_2"/></td> <td><input type="text" name="attr_char_special_pool_2"/></td> <td><input type="text" name="attr_char_special_used_2"/></td> </tr> <tr> <td><input type="text" name="attr_char_special_name_3"/></td> <td><input type="text" name="attr_char_special_note_3"/></td> <td><input type="text" name="attr_char_special_pool_3"/></td> <td><input type="text" name="attr_char_special_used_3"/></td> </tr> <tr> <td><input type="text" name="attr_char_special_name_4"/></td> <td><input type="text" name="attr_char_special_note_4"/></td> <td><input type="text" name="attr_char_special_pool_4"/></td> <td><input type="text" name="attr_char_special_used_4"/></td> </tr> <tr> <td><input type="text" name="attr_char_special_name_5"/></td> <td><input type="text" name="attr_char_special_note_5"/></td> <td><input type="text" name="attr_char_special_pool_5"/></td> <td><input type="text" name="attr_char_special_used_5"/></td> </tr> <tr> <td><input type="text" name="attr_char_special_name_6"/></td> <td><input type="text" name="attr_char_special_note_6"/></td> <td><input type="text" name="attr_char_special_pool_6"/></td> <td><input type="text" name="attr_char_special_used_6"/></td> </tr> <tr> <td><input type="text" name="attr_char_special_name_7"/></td> <td><input type="text" name="attr_char_special_note_7"/></td> <td><input type="text" name="attr_char_special_pool_7"/></td> <td><input type="text" name="attr_char_special_used_7"/></td> </tr> <tr> <td><input type="text" name="attr_char_special_name_8"/></td> <td><input type="text" name="attr_char_special_note_8"/></td> <td><input type="text" name="attr_char_special_pool_8"/></td> <td><input type="text" name="attr_char_special_used_8"/></td> </tr> <tr> <td><input type="text" name="attr_char_special_name_9"/></td> <td><input type="text" name="attr_char_special_note_9"/></td> <td><input type="text" name="attr_char_special_pool_9"/></td> <td><input type="text" name="attr_char_special_used_9"/></td> </tr> <tr> <td><input type="text" name="attr_char_special_name_10"/></td> <td><input type="text" name="attr_char_special_note_10"/></td> <td><input type="text" name="attr_char_special_pool_10"/></td> <td><input type="text" name="attr_char_special_used_10"/></td> </tr> </table></td> <td><table border=1><!--Personal Equipment--> <th colspan=4>Personal Equipment</th> <tr> <td>Item</td> <td>Notes</td> <td>Mass</td> <td>Status</td> </tr> <tr> <td><input type="text" name="attr_char_equip_item_1"/></td> <td><input type="text" name="attr_char_equip_note_1"/></td> <td><input type="text" name="attr_char_equip_mass_1"/></td> <td><input type="text" name="attr_char_equip_status_1"/></td> </tr> <tr> <td><input type="text" name="attr_char_equip_item_2"/></td> <td><input type="text" name="attr_char_equip_note_2"/></td> <td><input type="text" name="attr_char_equip_mass_2"/></td> <td><input type="text" name="attr_char_equip_status_2"/></td> </tr> <tr> <td><input type="text" name="attr_char_equip_item_3"/></td> <td><input type="text" name="attr_char_equip_note_3"/></td> <td><input type="text" name="attr_char_equip_mass_3"/></td> <td><input type="text" name="attr_char_equip_status_3"/></td> </tr> <tr> <td><input type="text" name="attr_char_equip_item_4"/></td> <td><input type="text" name="attr_char_equip_note_4"/></td> <td><input type="text" name="attr_char_equip_mass_4"/></td> <td><input type="text" name="attr_char_equip_status_4"/></td> </tr> <tr> <td><input type="text" name="attr_char_equip_item_5"/></td> <td><input type="text" name="attr_char_equip_note_5"/></td> <td><input type="text" name="attr_char_equip_mass_5"/></td> <td><input type="text" name="attr_char_equip_status_5"/></td> </tr> <tr> <td><input type="text" name="attr_char_equip_item_6"/></td> <td><input type="text" name="attr_char_equip_note_6"/></td> <td><input type="text" name="attr_char_equip_mass_6"/></td> <td><input type="text" name="attr_char_equip_status_6"/></td> </tr> <tr> <td><input type="text" name="attr_char_equip_item_7"/></td> <td><input type="text" name="attr_char_equip_note_7"/></td> <td><input type="text" name="attr_char_equip_mass_7"/></td> <td><input type="text" name="attr_char_equip_status_7"/></td> </tr> <tr> <td><input type="text" name="attr_char_equip_item_8"/></td> <td><input type="text" name="attr_char_equip_note_8"/></td> <td><input type="text" name="attr_char_equip_mass_8"/></td> <td><input type="text" name="attr_char_equip_status_8"/></td> </tr> <tr> <td><input type="text" name="attr_char_equip_item_9"/></td> <td><input type="text" name="attr_char_equip_note_9"/></td> <td><input type="text" name="attr_char_equip_mass_9"/></td> <td><input type="text" name="attr_char_equip_status_9"/></td> </tr> <tr> <td><input type="text" name="attr_char_equip_item_10"/></td> <td><input type="text" name="attr_char_equip_note_10"/></td> <td><input type="text" name="attr_char_equip_mass_10"/></td> <td><input type="text" name="attr_char_equip_status_10"/></td> </tr> </table></td> </tr> </table> </tr> </table>

Edit: skip to the next posts - i did the code for you. This post outlines the basic method, but it needed some tweaks. What are your plans for this sheet? You realise you cant share it with the community, because roll20 rejects all sheets that use table for layout. Is that the full sheet? It looks like a pretty simple design, not hard to lay out using CSS grid (in fact, it's almost a perfect test case for it). I know you've seen it, but I need to refer to you my blog article on using CSS Grid instead of table: <a href="https://cybersphere.me/dont-use-table-use-grid/" rel="nofollow">https://cybersphere.me/dont-use-table-use-grid/</a> Here's the steps I'd recommend in order: 1. Set Up Headings You have sections like this, containing headings: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Item&lt;/td&gt; &lt;td&gt;Notes&lt;/td&gt; &lt;td&gt;Mass&lt;/td&gt; &lt;td&gt;Status&lt;/td&gt; For each of those, replace each td with h4 so you have &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h4&gt;Item&lt;/h4&gt; &lt;h4&gt;Notes&lt;/h4&gt; &lt;h4&gt;Mass&lt;/h4&gt; &lt;h4&gt;Status&lt;/h4&gt; 2. get rid of rows and columns Now do 4 global replaces: &lt;td&gt; =&gt; "" &lt;/td&gt; ==&gt; "" &lt;tr&gt; =&gt; "" &lt;/tr&gt; =&gt; "" you are removing all td and tr entries. Then look at the leftover sheet, and find any text that has no surronding HTML. So for example, you start with one section like this: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Prestige&lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_char_pres"/&gt;&lt;/td&gt; &lt;td&gt;Experience&lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_char_exp"/&gt;&lt;/td&gt; &lt;td&gt;Credits&lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_char_credits"/&gt;&lt;/td&gt; After the above replace operations, it should look like this: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Prestige &lt;input type="number" name="attr_char_pres"/&gt; Experience &lt;input type="number" name="attr_char_exp"/&gt; Credits &lt;input type="number" name="attr_char_credits"/&gt; Notice how the text entries (Prestige, Experience, and Credits) are naked text? You need to surround them with a html element - span is perfect for this, like so: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;Prestige&lt;/span&gt; &lt;input type="number" name="attr_char_pres"/&gt; &lt;span&gt;Experience&lt;/span&gt; &lt;input type="number" name="attr_char_exp"/&gt; &lt;span&gt;Credits&lt;/span&gt; &lt;input type="number" name="attr_char_credits"/&gt; This makes no difference to the text appearance, but makes the following grid code work (and allows you to add styling later). 3. Section Headers You have several headings like this: &lt;th colspan=4&gt;Personal Equipment&lt;/th&gt; Change them to &lt;h3&gt;Personal Equipment&lt;/h3&gt; In other words, change the th to h3, and remove anything else inside the &lt;&gt; like column span. 4 deal with tables Replace all table entries with div, and give them a descriptive class name (maybe based on the comment following): &lt;table border=1&gt;&lt;!--Personal Equipment--&gt; becomes &lt;div class="personal-equipment"&gt; and replace &lt;/table&gt; with &lt;/div&gt; (you can do that last step with a global replace). For your very first table you have this: &lt;table border=1&gt;&lt;!--holding table--&gt; Change that to: &lt;div class="container"&gt;&lt;!--holding table--&gt; 5. Get Rid of table columns You have table columns like this: &lt;td colspan=3&gt;&lt;table border=1&gt; If you have followed the steps above, that will now look like &lt;td colspan=3&gt;&lt;div class="something"&gt; Just delete the td, so that becomes &lt;div class="something"&gt; 6. Starting the CSS Now you have fixed the HTML, you need to create a separate CSS file (if you are using the standard code editor, you'll have a CSS tab to go along with the HTML one). You'll be creating a master grid, and several grids nested inside it (one for each table you used to have). That will look something like: div.container { &nbsp; &nbsp; display : grid ; &nbsp; &nbsp; grid-template-columns : 300px 100px 100px 300px ; } div.basic-information { &nbsp; &nbsp; display : grid ; &nbsp; &nbsp; grid-template-columns : 1fr 4fr ; } div.skills { &nbsp; &nbsp; grid-column : 2 / span 2 ; &nbsp; &nbsp; display : grid ; &nbsp; &nbsp; grid-template-columns : 1fr 2fr ; } div.stats { &nbsp; &nbsp; display : grid ; &nbsp; &nbsp; grid-template-columns : 2fr 3fr 2fr 5fr ; } div.middle-bar , div.container h3 { &nbsp; &nbsp; grid-column : 1 / -1 ; } div.middle-bar { &nbsp; &nbsp; display : grid ; &nbsp; &nbsp; grid-template-columns : repeat ( 6 , 1fr ); } div.special-abilities { &nbsp; &nbsp; grid-column : 1 / span 2 ; &nbsp; &nbsp; display : grid ; &nbsp; &nbsp; grid-template-columns : 80px 100px 60px 6px ; } div.special-abilities { &nbsp; &nbsp; grid-column : 3 / span 2 ; &nbsp; &nbsp; display : grid ; &nbsp; &nbsp; grid-template-columns : 80px 100px 60px 6px ; } div.luck { &nbsp; &nbsp; grid-column : 2 / span 2 ; } I'm just eyeballing the dimensions here - you'll want to change them. But what's happening here: The first grid (div.container) creates a master grid, and its columns arrange the divs within it. When you have span x, like this: grid-column: 2 / span 2; It's telling where that column starts (the 2nd column) and how wide it is (its 2 columns wide). When have span -1, like this: grid-column: 1 / -1; It's saying to start at the 1st column, and fill the entire cntainer (go to the last column: -1). So it allows those h3 headings to fill their grid, and that middle bar with prestige and experience to fill the entire sheet. 7. The Luck Value Finally you need to make sure that the luck column is 2 columns wide, so in the html find this: &lt;input type="number" name="attr_char_luck" value="(@{char_rank}+5)" disabled="true"/&gt; and add a luck class, like this: &lt;input type="number" class="luck" name="attr_char_luck" value="(@{char_rank}+5)" disabled="true"/&gt; The CSS already includes code to turn this into 2 columns. It just needs a class to hook into. 8. Checking The Result Now you can load this HTML and CSS into your campaign. But before you do, make sure legacy sanitization is unchecked (or your JSON tab is says "legacy": false). There's a lot of steps here, but each is fairly straightforward if you follow them one or after another. Once that's done, it becomes possible to change the layout further (like adding blie backgrounds to the headers, making certain text uppercase, using different fonts, and optionally adding icons in various places). But that's for another time. Try this and post your finished code. I've used a variety of methods to set the column widthds, like 20%, 1fr, 300px. That's just because I'm guessing approptiate widths, we can fine tune it to more suitable values once we see how it looks. Note that 1fr, 2fr, etc are proportional. If you have something like 1fr 2fr, that means 2 columns, and the first is 1/3rd the total width, and the second is 2/3rd. You add up all the frs, divide by the total, then multiply each column by its fr. It's a proportional system.

I realised without changing some of the above, the sheet would be a horrible mess to figure out (there were some changes needed), so here you go:

I keep trying to post the code, and getting a Page Not Found error.

There must be something in the code that roll20 forum software doesnt like. Here's the code: <a href="https://gist.github.com/birdbrainiac/8d7348e5f87c93e38d1b72d8069f249b" rel="nofollow">https://gist.github.com/birdbrainiac/8d7348e5f87c93e38d1b72d8069f249b</a> There's a lot of tweaks could be made to the code - changing special abilities and equipment to repeating sections, changing text to icons, changing some of the inputs, but I think this lookslike a pretty good conversion.

GiGs said: There must be something in the code that roll20 forum software doesnt like. Here's the code: <a href="https://gist.github.com/birdbrainiac/8d7348e5f87c93e38d1b72d8069f249b" rel="nofollow">https://gist.github.com/birdbrainiac/8d7348e5f87c93e38d1b72d8069f249b</a> There's a lot of tweaks could be made to the code - changing special abilities and equipment to repeating sections, changing text to icons, changing some of the inputs, but I think this lookslike a pretty good conversion. that looks bootiful

okay so with this I'm now moving on to the vehicle sheet, the second and final sheet from this system, this one however I feel will be more complicated, I'd like to have a vertical slider and the ability to tab between different parts