Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Are not tables required for official sheets for tables with repeating rows ? Advice on changing with CSS?

1611085767

Edited 1611085876
Daniel S.
Pro
Marketplace Creator
Sheet Author
I read somewhere that html tables were not allowed for official sheets for layout purposes. Does this mean individual tables within a sheet with repeating rows are also not allowed? And if so, do you have any recommendations on how to make changes to an existing sheet with several tables? I've done some research on flexbox and grid but not sure what steps to take to transition everything. So far the sheet has worked pretty well and relatively bug free with repeating table rows. But I also read somewhere that repeating sections should only be a single cell? I'm getting ready to finalize a sheet and want to make sure I'm following the code requirements before submitting a pull request. I'm still cleaning up some of the html code to minimize inline styles and fix some other issues, so some of this code is a mess. But wanted to ask while doing so in case I need to go through a different process setting it up with grid or flexbox or abandoning the tables altogether. Here's a screenshot to what it looks like in a game, and also a link to the github: <a href="https://www.dropbox.com/s/4si1pwwo03x17ox/Screen%20Shot%202021-01-19%20at%201.48.27%20PM.png?dl=0" rel="nofollow">https://www.dropbox.com/s/4si1pwwo03x17ox/Screen%20Shot%202021-01-19%20at%201.48.27%20PM.png?dl=0</a> <a href="https://github.com/danimagaming/ForgeofSteelRoll20beta" rel="nofollow">https://github.com/danimagaming/ForgeofSteelRoll20beta</a> Thanks for any helps you're willing to provide! It's possible I just need to dig more thoroughly into the CSS guidelines, etc.
1611086517

Edited 1611086758
Andreas J.
Forum Champion
Sheet Author
Translator
CSS grid is better for tables than flexbox, but yeah for creating something like a table look with a repeating section, flexbox is as good, or might even be easier. <a href="https://wiki.roll20.net/Designing_Character_Sheet_Layout#CSS_Grid" rel="nofollow">https://wiki.roll20.net/Designing_Character_Sheet_Layout#CSS_Grid</a> tables aren't 100% forbidden, in theory, but would be more on the safe side to design things without &lt;table&gt;
1611086991

Edited 1611087121
Kraynic
Pro
Sheet Author
Instead of the html tables, generally people use css grid and/or flex to lay out the sheet. <a href="https://wiki.roll20.net/Building_Character_Sheets" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets</a> From the minimum requirements section of that page: 2. Good Code Minimum styling . All character sheets should have a small amount of CSS &amp; HTML styling to make them aesthetically pleasing and usable. For example elements should not unintentionally overlap when a window is resized. The sheet should be familiar to players who are used to seeing the paper version of that sheet. It need not be identical to the paper version and should avoid violating any copyright, but it also shouldn't be laid out in such a crazy way that players will have a hard time understanding how to use it. Design for ease of use first and foremost. Proper HTML Syntax . Proper HTML syntax is encouraged to increase accessibility and make the code maintainable for community contributions. All new sheets are expected to use proper containers elements such as &lt;⁠div&gt; and &lt;⁠span&gt; elements. Your HTML file must not use &lt;⁠head&gt; or &lt;⁠body&gt; tag, or your character sheet may not load in the virtual tabletop. No &lt;⁠table&gt; used for layout . As a general standard a &lt;⁠table&gt; element should only be used for tabular data. The &lt;⁠table&gt; shall not be used for layouts . See Designing Character Sheet Layout for alternative Unix server compatibility is required. All CSS, HTML, and JSON files are required to be submitted with Unix line endings (LF). A Google search can tell you how to set this in your favorite text editor. Additionally every submission must include a valid sheet.json file and a preview image. Directions for creating a proper sheet.json can be found on the GitHub README . Chrome &amp; Firefox Compatible . The two official supported browsers of Roll20 are Chrome &amp; Firefox. All character sheets need to be tested for functionality and styling in these two browsers. Edit:&nbsp; This same section can also be found on the Help Center: <a href="https://roll20.zendesk.com/hc/en-us/articles/360037773453-Minimum-Requirements-Best-Practices#2-good-code-0-1" rel="nofollow">https://roll20.zendesk.com/hc/en-us/articles/360037773453-Minimum-Requirements-Best-Practices#2-good-code-0-1</a>
1611091485
Daniel S.
Pro
Marketplace Creator
Sheet Author
Sounds like I can use &lt;table&gt; for tabular data (individual stat tables?) but not for the overall layout of the sheet. But that, ideally I should still switch to grid or flex for the individual tables as well, but not as a requirement.&nbsp;