Questions about sheet building

i'm trying to make a character sheet for a game I don't think is on here (i checked) and I'm going to have questions. I assure you that as I continue making it I will have more questions. Thank you to all that have helped me so far, tme sheet I'm working on is 1/3 complete.

Yes, for the most part, there can be some advanced hidden fields, and styling that can change that (but its the exception to the rules, I don't know them myself, but I know its possible). But for the HTML its order in order out. Whatever is first comes first. CSS on the other hand it doesn't matter usually as its called from the HTML to style things. If you want to play with it and see what it does when you change something, make a 'temp' campaign goto the campaign details where you pick your sheets, pick custom and paste it in there, then goto 'preview'. You will be able to see what you change there as you change it. (Dont do this on your main game, as playing with the custom sheet and adding attributes, might bork characters already made in it if they go in and start playing with it and you switch back to your old sheet)

DXWarlock (William R) said: Yes, for the most part, there can be some advanced hidden fields, and styling that can change that (but its the exception to the rules, I don't know them but I know its possible). But for the HTML its order in order out. Whatever is first comes first. CSS on the other hand it doesn't matter usually as its called from the HTML to style things. If you want to play with it and see what it does when you change something, make a 'temp' campaign goto the campaign details where you pick your sheets, pick custom and paste it in there, then goto 'preview'. You will be able to see what you change there as you change it. so to make it look like the actual sheet the layout in the HTML will have to be precise?

Well yes and no depending on what your asking, it doesnt have to be 'laid out' in a standard way. But all the syntax has to be correct. like for example: <span class=foo>text1 </span> <span class=bar>text2 </span> will output the same as: <span class=foo>text1 </span> <span class=bar>text2 </span> And end up with text1 text2 as output. Both of them would have text1 before text2

DXWarlock (William R) said: Well yes and no depending on what your asking, it doesnt have to be 'laid out' in a standard way. But all the syntax has to be correct. like for example: <span class=foo>text1 </span> <span class=bar>text2 </span> will output the same as: <span class=foo>text1 </span> <span class=bar>text2 </span> And end up with text1 text2 as output. Both of them would have text1 before text2 ok i get that much but will this drastically effect the final outcome, or is there something in CSS that determines where everything goes on the final product?

Not to a large degree other than your div setup, (I believe, my html/css is competent amateur at best). I know you can do floats and such but I wouldnt do the whole sheet that way What do you mean it will drastically effect the outcome?

DXWarlock (William R) said: Not to a large degree, (I believe, my html/css is competent amateur at best). I know you can do floats and such but I wouldnt do the whole sheet that way What do you mean it will drastically effect the outcome? what i mean is what makes the character info go on the top left, the health track go directly below it? and what makes the primary stats go to the top right and the secondary stats go below it? is the positioning of all thas determing by the order of the HTML codes? a specific HTML tag? Something in CSS?

There would be a few ways you could do it. With html tables, with the CSS div columns that roll20 uses, with custom &lt;div&gt;'s They will divide that section of the page into 'columns' you can add things to. But everything inside them will be like above, first listed, first shown. Custom ones like this: (from the W3school put into a jsfiddle) <a href="https://jsfiddle.net/7vd95mq7/1/" rel="nofollow">https://jsfiddle.net/7vd95mq7/1/</a> the built in ones that do 2 or 3 columns are here <a href="https://wiki.roll20.net/Character_Sheets#Columns_a" rel="nofollow">https://wiki.roll20.net/Character_Sheets#Columns_a</a>...

I had to go find it, here is a good one to poke around in to see how the basic work for the sheets, and the Roll20 inputs and attributes: <a href="https://github.com/Roll20/roll20-character-sheets/" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/</a>... Just copy the HTML and CSS into your custom fields.

DXWarlock (William R) said: I had to go find it, here is a good one to poke around in to see how the basic work for the sheets, and the Roll20 inputs and attributes: <a href="https://github.com/Roll20/roll20-character-sheets/" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/</a>... Just copy the HTML and CSS into your custom fields. ok, so I looked over you're links and I think I've got it. &lt;div class="whatever you want to name the section"&gt; lines of code you want to put in &lt;/div&gt; is that right?

Yep. And to save yourself a lot of hassle, when naming your classes it's best to start them all with sheet- because even if you don't, the system will automatically appendix for you when referencing the CSS.

G V. said: Yep. And to save yourself a lot of hassle, when naming your classes it's best to start them all with sheet- because even if you don't, the system will automatically appendix for you when referencing the CSS. ok, so i'm seeing how many columns i can make and it all seems to go wrong after 3

Roll20 itself only has up to 3 built in as 'premade' css column layouts, anything more you will need to build your own in your css like .sheet-my4columns .sheet-col { width: calc(25%); } And call it with your div class: &lt;div class='sheet-my4columns'&gt; &lt;div class='sheet-col'&gt; &lt;!-- 1st column stuff --&gt; &lt;/div&gt; &lt;div class='sheet-col'&gt; &lt;!-- 2nd column stuff --&gt; &lt;/div&gt; &lt;div class='sheet-col'&gt; &lt;!-- 3rd column stuff --&gt; &lt;/div&gt; &lt;div class='sheet-col'&gt; &lt;!-- 4th column stuff --&gt; &lt;/div&gt; &lt;/div&gt;

DXWarlock (William R) said: Roll20 itself only has up to 3 built in as 'premade' css column layouts, anything more you will need to build your own in your css like .sheet-my4columns .sheet-col { width: calc(25%); } And call it with your div class: &lt;div class='sheet-my4columns'&gt; &lt;div class='sheet-col'&gt; &lt;!-- 1st column stuff --&gt; &lt;/div&gt; &lt;div class='sheet-col'&gt; &lt;!-- 2nd column stuff --&gt; &lt;/div&gt; &lt;div class='sheet-col'&gt; &lt;!-- 3rd column stuff --&gt; &lt;/div&gt; &lt;div class='sheet-col'&gt; &lt;!-- 4th column stuff --&gt; &lt;/div&gt; &lt;/div&gt; thanks I'll keep that in mind. For now I think i'm ok with 2

And remember &lt;div class='Something'&gt; Something is a class in the CSS file its calling, to tell it what it looks like..colors, fonts, width, padding, etc. If you put say: &lt;div class='Sheet-MyStats'&gt;some text&lt;/div&gt; But didn't define Sheet-MyStats in your CSS, it doesn't mean or do anything, its just going to be a plain old &lt;div&gt;some text&lt;/div&gt;. Best way to think of it is a 'shortcut name' of sorts. 'MyStats' is 'shortcut' code for whatever 'MyStats' is in the css, like: .sheet-MyStats { font-size: 11px; display: inline-block; width: 150px; color: #222; } So its a 'shortcut name' to tell it what to put as that div style, vs typing it out everytime you want a div to have those properties. Because you could just do this every time you wanted something to have those properties: &lt;div style="font-size: 11px;display: inline-block;width: 150px;color: #222;"&gt;some text&lt;/div&gt; and not NEED a CSS file, but that would get old typing it all out, and a lot of extra redundant text. So defining that all that means 'MyStats' in the CSS makes it easier to call it, say, 10 times in the HTML just with its 'shortcut name'. Thats all your CSS is really, a list of your commonly used 'properties' grouped into neat short names you can call on to apply them. (if I didnt confuse you more with that)

DXWarlock (William R) said: And remember &lt;div class='Something'&gt; Something is a class in the CSS file its calling, to tell it what it looks like..colors, fonts, width, padding, etc. If you put say: &lt;div class='Sheet-MyStats'&gt;some text&lt;/div&gt; But didn't define Sheet-MyStats in your CSS, it doesn't mean or do anything, its just going to be a plain old &lt;div&gt;some text&lt;/div&gt;. Best way to think of it is a 'shortcut name' of sorts. 'MyStats' is 'shortcut' code for whatever 'MyStats' is in the css, like: .sheet-MyStats { font-size: 11px; display: inline-block; width: 150px; color: #222; } So its a 'shortcut name' to tell it what to put as that div style, vs typing it out everytime you want a div to have those properties. Because you could just do this every time you wanted something to have those properties: &lt;div style="font-size: 11px;display: inline-block;width: 150px;color: #222;"&gt;some text&lt;/div&gt; and not NEED a CSS file, but that would get old typing it all out, and a lot of extra redundant text. So defining that all that means 'MyStats' in the CSS makes it easier to call it, say, 10 times in the HTML just with its 'shortcut name'. Thats all your CSS is really, a list of your commonly used 'properties' grouped into neat short names you can call on to apply them. (if I didnt confuse you more with that) thank you, this is all good to know.

Grim G. said: ok, so i'm seeing how many columns i can make and it all seems to go wrong after 3 DXWarlock (William R) said: Roll20 itself only has up to 3 built in as 'premade' css column layouts, anything more you will need to build your own in your css like .sheet-my4columns .sheet-col { width: calc(25%); } And call it with your div class: &lt;div class='sheet-my4columns'&gt; &lt;div class='sheet-col'&gt; &lt;!-- 1st column stuff --&gt; &lt;/div&gt; &lt;div class='sheet-col'&gt; &lt;!-- 2nd column stuff --&gt; &lt;/div&gt; &lt;div class='sheet-col'&gt; &lt;!-- 3rd column stuff --&gt; &lt;/div&gt; &lt;div class='sheet-col'&gt; &lt;!-- 4th column stuff --&gt; &lt;/div&gt; &lt;/div&gt; Not completely accurate, but DXWarlock is correct in that Roll20 has three different column classes pre-built: sheet-col, sheet-2cols, and sheet-3cols. However, you can have a TON of columns using just those three classes. Here are some things to remember: The default character sheet window is about 800px left to right. That means you want to keep things shorter than that. Your main &lt;div&gt; can be about 840px if you don't want to scroll left and right, but 800px seems to be a bit safer You can style those three pre-built classes to modify how they work/stack The trick I like to use is &lt;div&gt; with a class=sheet-row as my main contain for things that are on the same basic row (however tall that needs to be), and then use a &lt;div&gt; with class=sheet-col in side that "row" To get a lot of columns on a "row" I just use sheet-col. So, here's an example: &lt;div class="sheet-row&gt; &lt;div class="sheet-col" style="width: 50px;"&gt; &lt;!-- 1st col stuff --&gt; &lt;/div&gt; &lt;div class="sheet-col" style="width: 50px;"&gt; &lt;!-- 2nd col stuff --&gt; &lt;/div&gt; &lt;div class="sheet-col" style="width: 50px;"&gt; &lt;!-- 3rd col stuff --&gt; &lt;/div&gt; &lt;div class="sheet-col" style="width: 50px;"&gt; &lt;!-- 4th col stuff --&gt; &lt;/div&gt; &lt;div class="sheet-col" style="width: 50px;"&gt; &lt;!-- 5th col stuff --&gt; &lt;/div&gt; &lt;div class="sheet-col" style="width: 50px;"&gt; &lt;!-- 6th col stuff --&gt; &lt;/div&gt; &lt;div class="sheet-col" style="width: 100px;"&gt; &lt;!-- 7th col stuff --&gt; &lt;/div&gt; &lt;div class="sheet-col" style="width: 100px;"&gt; &lt;!-- 8th col stuff --&gt; &lt;/div&gt; &lt;div class="sheet-col" style="width: 100px;"&gt; &lt;!-- 9th col stuff --&gt; &lt;/div&gt; &lt;div class="sheet-col" style="width: 200px;"&gt; &lt;!-- 10th col stuff --&gt; &lt;/div&gt; &lt;/div&gt; The above is a single "row" with 10 columns using the pre-built class of "sheet-col". I use that quite a bit to create tables when I don't want to use the &lt;table&gt; tags. It allows me to get very precise in laying out things like Equipment using the &lt;fieldset&gt; tags so that everything lines up nicely. DXWarlock (William R) said: And remember &lt;div class='Something'&gt; Something is a class in the CSS file its calling, to tell it what it looks like..colors, fonts, width, padding, etc. If you put say: &lt;div class='Sheet-MyStats'&gt;some text&lt;/div&gt; But didn't define Sheet-MyStats in your CSS, it doesn't mean or do anything, its just going to be a plain old &lt;div&gt;some text&lt;/div&gt;. It has also been my experience that if you don't define a custom &lt;div&gt; class in the CSS that it takes on the properties of a &lt;div&gt; with the class of "sheet-col". I could be wrong, but that's been my experience as I build things. Hope this helps a little.

G V. said: It has also been my experience that if you don't define a custom &lt;div&gt; class in the CSS that it takes on the properties of a &lt;div&gt; with the class of "sheet-col". I could be wrong, but that's been my experience as I build things. You are probably right, never tried it with one that didn't exist. Was more trying to point out its useless to point it to class definitions that didnt exist, and that the class= actually does something other than a label for the div. Also Grim take anything GV says with more weight than mine, I got my sheet looking pretty good, but if anyone looked at the code they would slap me I think..haha

does anyone know the difference between the tags &lt;h1/6&gt; and &lt;label&gt;?

DXWarlock (William R) said: G V. said: It has also been my experience that if you don't define a custom &lt;div&gt; class in the CSS that it takes on the properties of a &lt;div&gt; with the class of "sheet-col". I could be wrong, but that's been my experience as I build things. You are probably right, never tried it with one that didn't exist. Was more trying to point out its useless to point it to class definitions that didnt exist, and that the class= actually does something other than a label for the div. Actually, there are times it can be useful to declare a class and not define any special styling, but usually when you want to do something tricky like hide/unhindered it in certain conditions. But generally speaking, you are correct DXWarlock. :) DXWarlock (William R) said: Also Grim take anything GV says with more weight than mine, I got my sheet looking pretty good, but if anyone looked at the code they would slap me I think..haha LOL - well, my code isn't much better in that regard. ;)

anyone?

Grim G. said: does anyone know the difference between the tags &lt;h1/6&gt; and &lt;label&gt;? the w3schools site has a lot of info on it, with demos of all the examples if you want to browse/search around on it, it will help you with a lot of basic tags and syntax Label is used to 'label' something like a button, or input like this: <a href="http://www.w3schools.com/tags/tryit.asp?filename=t" rel="nofollow">http://www.w3schools.com/tags/tryit.asp?filename=t</a>... H1-6 is 'headers' like this: <a href="http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_headers" rel="nofollow">http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_headers</a>

Or for a general list you can click on: <a href="http://www.w3schools.com/tags/" rel="nofollow">http://www.w3schools.com/tags/</a>

DXWarlock (William R) said: Grim G. said: does anyone know the difference between the tags &lt;h1/6&gt; and &lt;label&gt;? the w3schools site has a lot of info on it, with demos of all the examples if you want to browse/search around on it, it will help you with a lot of basic tags and syntax Label is used to 'label' something like a button, or input like this: <a href="http://www.w3schools.com/tags/tryit.asp?filename=t" rel="nofollow">http://www.w3schools.com/tags/tryit.asp?filename=t</a>... H1-6 is 'headers' like this: <a href="http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_headers" rel="nofollow">http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_headers</a> right I get it, so I should't use &lt;label&gt;s unless it labels a function. but Headers aren't the only tag for putting text over something, right? Cause what i'm trying to do is put the word "weapons" over the table of weapon stats.

You can do it a few ways, you can make h1-6 classes in your CSS and format them however you want and use them as 'titles' Like these are mine: h1 { font-size: 16px; margin:0; text-shadow: 2px 2px #000; margin-bottom: 0px; text-align:justify; border: 1px solid #000; border-radius: 10px; } h2 { font-size: 35px; margin:0; font-family:"impact"; padding:0px 0px 0px 0px; color:#555; text-align:center; width:100%; } h3 { font-size: 14px; border: 1px solid black; text-shadow: 2px 2px #000; width:95%; background-color:#4D4D4D; color:#fff; text-align:center; margin:auto; } h4 { margin:0; font-size: 18px; } ....(5,6 cut off because it was long) which gives me boxes to play with like these (the blue 'title' and grey with the MPH in it): Or set a &lt;div&gt; with the fontsize font and color you want with a class..and so on.

What DXWarlock said. and.. For tables you might want to use the table header tag &lt;th&gt; <a href="http://www.w3schools.com/tags/tag_th.asp" rel="nofollow">http://www.w3schools.com/tags/tag_th.asp</a>

DXWarlock (William R) said: You can do it a few ways, you can make h1-6 classes in your CSS and format them however you want and use them as 'titles' Like these are mine: h1 { font-size: 16px; margin:0; text-shadow: 2px 2px #000; margin-bottom: 0px; text-align:justify; border: 1px solid #000; border-radius: 10px; } h2 { font-size: 35px; margin:0; font-family:"impact"; padding:0px 0px 0px 0px; color:#555; text-align:center; width:100%; } h3 { font-size: 14px; border: 1px solid black; text-shadow: 2px 2px #000; width:95%; background-color:#4D4D4D; color:#fff; text-align:center; margin:auto; } h4 { margin:0; font-size: 18px; } which gives me boxes to play with like these (the blue 'title' and grey with the MPH in it): Or set a &lt;div&gt; with the fontsize font and color you want with a class..and so on. ...so what you're saying is that I should be using headers?

Its up to you really (hate to be vague and keep saying that but 101 ways to skin a cat). If you want it part of the table itself for a neat clean box setup, use what Vince said since thats simple and to the point of adding a header to a table, and it always stays aligned to the table ,and you can format it to look different than the table itself. If you are wanting a fancy detached header 'banner' thing. I do it the above way, not sure if its 'right' but it worked good for me. But it doesn't have to be a header, can be a CSS div class you setup with color, font, drop shadow, border radius, whatever, and use it wherever you want also.

thanks for all you're help, i'll try the &lt;th&gt; tag and get back to you tomorrow, it's late right now.

Personally I like using divs and classes. Very flexible.

G V. said: Not completely accurate, but DXWarlock is correct in that Roll20 has three different column classes pre-built: sheet-col, sheet-2cols, and sheet-3cols. However, you can have a TON of columns using just those three classes. Here are some things to remember: The built-in classes are sheet-col, sheet-2colrow, and sheet-3colrow. G V. said: It has also been my experience that if you don't define a custom &lt;div&gt; class in the CSS that it takes on the properties of a &lt;div&gt; with the class of "sheet-col". I could be wrong, but that's been my experience as I build things. No. &lt;div&gt; elements have default style properties, and possibly some properties specified in base.css, but a &lt;div&gt; without a class is not the same as a sheet-col div. In particular, div by default has display: block (it takes up the full width of its parent), while sheet-col (which is inside a sheet-2colrow or sheet-3colrow) has display: inline-block. Grim G. said: ...so what you're saying is that I should be using headers? The various tags have semantic meaning. Being clear on their meaning is particularly important for things like screen readers, and while that's less of a concern for something on Roll20, I know for a fact there are blind people who play games here (although I don't know whether they use screen readers or not). h1-6 is meant to signify the heading of a section on the page. th is meant to signify a cell in a header row or column of a table. label is meant to signify the label of an input field. And so on. While CSS can completely change the display properties of an element, they have default styles to reflect these purposes: text within &lt;h1&gt; is very large, text within th is bold and centered, etc. However, if all you want to do is know how to put visible text somewhere... just write it. All printable characters which are not between matching pairs of angle brackets &lt;&gt; become visible text on the page. Putting text within certain tags simply organizes it semantically and makes it possible to style the text. If you want to put the word "Weapons" over your weapons table, you can also consider the &lt;caption&gt; tag. The caption element should be the first child of the table, and not be inside a &lt;thead&gt;, &lt;tfoot&gt;, or &lt;tbody&gt;.

Brian said: G V. said: Not completely accurate, but DXWarlock is correct in that Roll20 has three different column classes pre-built: sheet-col, sheet-2cols, and sheet-3cols. However, you can have a TON of columns using just those three classes. Here are some things to remember: The built-in classes are sheet-col, sheet-2colrow, and sheet-3colrow. My bad...I wasn't at home and was trying to do it from memory, but I rarely use sheet-2colrow and sheet-3colrow. Brian said: G V. said: It has also been my experience that if you don't define a custom &lt;div&gt; class in the CSS that it takes on the properties of a &lt;div&gt; with the class of "sheet-col". I could be wrong, but that's been my experience as I build things. No. &lt;div&gt; elements have default style properties, and possibly some properties specified in base.css, but a &lt;div&gt; without a class is not the same as a sheet-col div. In particular, div by default has display: block (it takes up the full width of its parent), while sheet-col (which is inside a sheet-2colrow or sheet-3colrow) has display: inline-block. Again, my bad. :) What I meant was that in my character sheets, when I use &lt;div&gt; and don't give it a class, but I do define a width, I seem to be able to stack them next to each other, just like using sheet-col. That's why I assumed they took on that same basic formatting. Grim, you are definitely better off listening to Brian than anything I say; he has answered my questions more times than I can count. And, like Coal Powered Puppet said of himself in another thread, my style is more of a "headbutt-it-into-submission", often times not understanding why something is working, only that it does.

G V. said: Grim, you are definitely better off listening to Brian than anything I say; he has answered my questions more times than I can count. And, like Coal Powered Puppet said of himself in another thread, my style is more of a "headbutt-it-into-submission" , often times not understanding why something is working, only that it does. My sentiments exactly and I've been looking for an analogy that explains my coding experience. Nailed it. :-P

anyone?

Grim G. said: anyone? I am assuming you are asking about the using &lt;th&gt; vs. &lt;h5&gt; (or whatever). Its personal preference, also known as what-ever-works-best. There are different ways to accomplish many things. If you are trying to get things to line up all pretty inside of a table, then using &lt;th&gt; for the top row (inside the first &lt;tr&gt;) is a way to go, or you could put a heading (&lt;h5&gt;, for example) inside a &lt;td&gt; instead. If you are trying to give a table a title, outside the table, then &lt;h3&gt; (or whatever size you want) works well. You can also put the title of the table inside it's own &lt;div&gt;, give it a class (say, &lt;div class="sheet-table_title"&gt;) and then apply some css to the class to make it pretty. All of the above was covered by what Brian, Vince, GV and DXWarlock said, only said differently. If you question is still unanswered, you might need to ask it in a different way, so we can understand what you need.

To make an analogy that might help when your asking "How do I do this?". Think of trying to remove a bolt from a car. And you ask "What tool do I need": You will get the answers:"3/8 closed end wrench", "A 3/8 socket and ratchet", "A crescent wrench", "Channel Lock Pliers", "Vice Grips", "Impact Wrench". Unless you point out where the bolt is, and what its on (what your trying to remove it from vs just telling people the size of it)..its a bit vague on helping you pick the 'correct' tools. Thats kinda whats happening here. Brian would be the Certified Mechanic, I and some of the others 'Home Garage mechanics". Brian would suggest the right sized deep well socket with the pneumatic impact wrench. Id say the crescent wrench does just fine. But in the end all of them will do the same thing, remove the bolt just as easy (or nearly as easy) as the rest of them depending on what your comfortable using as a tool. But until you have a basic grasp of what the tools are, trying to fill your toolbox with all of them first, and drag the whole thing under the car with you, just makes it more confusing on what to reach for. Start small, get a basic socket set, and screw driver set (the css and html basics) and learn from there what the more advanced ones do.

DXWarlock (William R) said: To make an analogy that might help when your asking "How do I do this?". Think of trying to remove a bolt from a car. And you ask "What tool do I need": You will get the answers:"3/8 closed end wrench", "A 3/8 socket and ratchet", "A crescent wrench", "Channel Lock Pliers", "Vice Grips", "Impact Wrench". Unless you point out where the bolt is, and what its on (what your trying to do vs what does this tool do)..its a bit vague on helping you pick the 'correct' tools. Thats kinda whats happening here. Brian would be the Certified Mechanic, I and some of the others 'Home Garage mechanics". Brian would suggest the right sized deep well socket with the pneumatic impact wrench. Id say the crescent wrench does just fine. But in the end all of them will do the same thing, remove the bolt just as easy (or nearly as easy) as the rest of them depending on what your comfortable using as a tool. But until you have a basic grasp of what the tools are, trying to fill your toolbox with all of them first, and drag the whole thing under the car with you, just makes it more confusing on what to reach for. Start small, get a basic socket set, and screw driver set (the css and html basics) and learn from there what the more advanced ones do. I suppose what i'm trying to (and failing at) explain is how do I create a table with adjustable text, numbers, properties etc. I'm sorry if i'm not understanding what you're trying to explain, communication is something I fail at.

adjustable means - areas you can fill in? or how do I make a table ?

OldSchoolChris said: adjustable means - areas you can fill in? or how do I make a table ? what I'm planing to do is make a section where you fill in the name and stats of a weapon, the state then get properly calculated and finally roll. Under that is the exact same thing repeated a few more times. As I'm looking at other sheets to see how it's done I'm starting to think I can't fit it all in one table. Instead I think i'm going to have to make several rows, each row having the stats for a different roll. what do you think?

There several ways you can do this. You could put everything into a table, but doing so (from my experience) requires you enter a pre-determined number of rows of weapons. The benefit of doing this is that static fields of this nature are easier to work with in other parts of the character sheet. Another way is to have a dynamic area where you click an "+Add" button to add a row. To do that you would use a &lt;fieldset&gt; list of things. This has the benefit of not requiring a lot of lines of codes for someone who wants 20 weapons, but does make it trickier to work with in other areas of the character sheet and even when creating custom macros. I chose the &lt;fieldset&gt; method, but am considering migrating to a static number of rows...maybe. Anyway, here's how I implemented mine: &lt;!-- This is the Melee Weapons Area --&gt; &lt;div class='sheet-mweapons'&gt; &lt;div class='sheet-row' style="width:800px;"&gt; &lt;!--Begin Weapons Row --&gt; &lt;div class='sheet-col' style='width:460px;'&gt;&lt;!-- Begin Contain Column --&gt; &lt;!-- This is the Header Section to Visually Display that this is for Melee Weapons--&gt; &lt;h2 style='text-align:center;'&gt;Melee / Strength-based Weapons&lt;/h2&gt;&lt;br /&gt; &lt;!-- This is the header row for the weapons themselves --&gt; &lt;!-- The headers are: Weapon Type, Damage, and Raise --&gt; &lt;div class='sheet-row'&gt; &lt;div class='sheet-col' style='width:140px; border-bottom-style:dashed; border-width:1px; text-align:left;'&gt; &lt;!-- Weapon Type (150px) --&gt; &lt;h4&gt;Weapon Type&lt;/h4&gt; &lt;/div&gt; &lt;div class='sheet-col' style='width:170px; border-bottom-style:dashed; border-width:1px; text-align:center;'&gt; &lt;!-- Damage (200px) --&gt; &lt;h4&gt;Damage&lt;/h4&gt; &lt;/div&gt; &lt;div class='sheet-col' style='width:120px; border-bottom-style:dashed; border-width:1px;'&gt; &lt;!-- Raise/Bonus Damage (60px)--&gt; &lt;h4&gt;Raise&lt;/h4&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- This Ends the Header Row. This was done so that I'd only have to do the headers --&gt; &lt;!-- one time... --&gt; &lt;br /&gt; &lt;!-- This next section creates the dynamic rows for each weapon --&gt; &lt;fieldset class="repeating_mmeleeweapons"&gt; &lt;div class='sheet-row' style='width: 460px;'&gt; &lt;!-- Set up the fields: Weapon Type = Text Input Damage = Option value (drop down menu) Raise = Checkbox --&gt; &lt;div class='sheet-col' style='width:140px;'&gt; &lt;!-- Weapon Type (150px) --&gt; &lt;input type="text" name="attr_mWeaponType" title="@{repeating_mmeleeweapons_#_mWeaponType}" style='width:135px;'/&gt; &lt;/div&gt; &lt;div class='sheet-col' style='width:170px;'&gt; &lt;!-- Damage (150px) --&gt; &lt;span style='font-size:14px; font-weight:bold;'&gt;STR+&lt;/span&gt; &lt;select name="attr_mDmgType" title="@{repeating_mmeleeweapons_#_mDmgType}" class="dtype"&gt; &lt;option value="4!"&gt;d4&lt;/option&gt; &lt;option value="6!"&gt;d6&lt;/option&gt; &lt;option value="8!"&gt;d8&lt;/option&gt; &lt;option value="10!"&gt;d10&lt;/option&gt; &lt;option value="12!"&gt;d12&lt;/option&gt; &lt;/select&gt;+&lt;input type="number" name="attr_mMDmgMod" title="@{repeating_mmeleeweapons_#_mMDmgMod}" value="0" /&gt; &lt;/div&gt; &lt;div class="sheet-useStandard sheet-col" style='width:60px; text-align: center;'&gt; &lt;input type="checkbox" style="width: 15px;" name="attr_mDmgRaise" title="@{repeating_mmeleeweapons_#_mDmgRaise}" value="6!" /&gt; &lt;/div&gt; &lt;!-- This setups up the buttons for each weapon to roll damage --&gt; &lt;!-- There are two buttons, one for everyone to see, and a GM only --&gt; &lt;div class='sheet-col' style='width:70px;'&gt; &lt;!-- Notes (344px) --&gt; &lt;button class="sheet-normalbutton" type='roll' name='roll_mWeaponTypeRoll' title="@{repeating_mmeleeweapons_#_mWeaponTypeRoll}" value='/em @{character_name} attempts to do damage with a @{mWeaponType} and rolls: @{rollmMeleeWeapon}!'&gt;&lt;/button&gt;&lt;button type='roll' class="sheet-normalbutton sheet-GM-button" name='roll_gmmWeaponTypeRoll' title="@{repeating_mmeleeweapons_#_gmmWeaponTypeRoll}" value='/w gm @{character_name} attempts to do damage with a @{mWeaponType} and rolls: @{rollmMeleeWeapon}!'&gt;&lt;/button&gt; &lt;input type='hidden' name='attr_rollmMeleeWeapon' value="[[1d@{mStrength}![Strength]+1d@{mDmgType}+@{mMDmgMod}[Weapon Damage]+@{mdmgmod}[Damage Modifier]+1d@{mDmgRaise}[Bonus Damage]]]" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/fieldset&gt; &lt;!--More code--&gt; I tried commenting the code more than actually exists to try and walk you through how I did it and what I was doing with each section of the code. I don't use &lt;table&gt; tags myself, because I found the &lt;div&gt;s easier to work with to get the look I wanted. That doesn't mean tables aren't viable, only trickier for certain things and they weren't right for me. I hope this helps.

Few things: I noticed that the Number input is right under the select input, was this by desine? (<a href="http://i.imgur.com/YkYywh9.jpg[/img]" rel="nofollow">http://i.imgur.com/YkYywh9.jpg[/img]</a>) Second: what's this? &lt;!-- This is the Melee Weapon Area --&gt; I keep seeing it and I feel like it's important to what I'm doing, but I haven't been able to find anything about it other then it's apparently called a "comment tag". Also how do i use &lt;fieldset&gt;? if it will alow me to add more empty slots for weapon details I think I should use it.

Not sure why it looks that way for you...here's what it looks like for me: It's a comment tag. It just just notes you make to yourself (or others). The browser ignores/doesn't display text encapsulated in &lt;!-- --&gt; It's a way of hiding information from the browser. The example above shows how to use a &lt;fieldset&gt;. In roll20, each &lt;fieldset&gt; must have a class that starts with "repeating_", after the underscore you can name it anything you want. Then you set up the fields in the layout you want and close the whole thing with &lt;/fieldset&gt;. Then whenever someone clicks +Add, that layout is replicated again.

G V. said: Not sure why it looks that way for you...here's what it looks like for me: It's a comment tag. It just just notes you make to yourself (or others). The browser ignores/doesn't display text encapsulated in &lt;!-- --&gt; It's a way of hiding information from the browser. The example above shows how to use a &lt;fieldset&gt;. In roll20, each &lt;fieldset&gt; must have a class that starts with "repeating_", after the underscore you can name it anything you want. Then you set up the fields in the layout you want and close the whole thing with &lt;/fieldset&gt;. Then whenever someone clicks +Add, that layout is replicated again. strange, perhaps there's something different with the code you put in with the screenshot that what I copied down? on an unrelated note, how do you get the image on the post?

As for your 5e table question...without looking at the code I can tell you a few things: The top section (Core Stats, Skills, etc) is actually tabs and not part of the table at all the Melee Weapons in the black ribbon looks like it's probably a &lt;h#&gt; tag with special formatting. I couldn't tell you the which number it is, maybe a 3? The gray bar area could have been created using any of the methods mentioned above The rest of the table could either be a &lt;table&gt; or a series of &lt;div&gt;s. If it's a table, it would likely be something like this: &lt;table&gt; &lt;tr&gt; &lt;td&gt;Prof?&lt;/td&gt; &lt;td&gt;Weapon&lt;/td&gt; &lt;td&gt;Attack Stat&lt;/td&gt; &lt;td&gt;Magic Bonus&lt;/td&gt; &lt;td&gt;To Hit&lt;/td&gt; &lt;td&gt;Damage Dice&lt;/td&gt; &lt;td&gt;+ Stat?&lt;/td&gt; &lt;td&gt;Dmg Bonus&lt;/td&gt; &lt;td&gt;Damage type&lt;/td&gt; &lt;td&gt;Crit Dmg&lt;/td&gt; &lt;td&gt;Crit on a&lt;/td&gt; &lt;td&gt;Attack&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;input type="checkbox" name="attr_prof1" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="attr_weapon1" /&gt;&lt;/td&gt; &lt;td&gt; &lt;select name="attr_attackstat1"&gt; &lt;option value="Str"&gt;Str&lt;/option&gt; &lt;option value="Dex"&gt;Dex&lt;/option&gt; &lt;option&gt;...&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_mbonus1" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_tohit1" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_dmgdice1" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="checkbox" name="attr_stat1" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_dmgBonus1" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="attr_dmgtype1" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="attr_critdmg1" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_criton1" /&gt;&lt;/td&gt; &lt;td&gt;&lt;button type='roll' name='roll_attackWeapon1' /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;input type="checkbox" name="attr_prof2" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="attr_weapon2" /&gt;&lt;/td&gt; &lt;td&gt; &lt;select name="attr_attackstat2"&gt; &lt;option value="Str"&gt;Str&lt;/option&gt; &lt;option value="Dex"&gt;Dex&lt;/option&gt; &lt;option&gt;...&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_mbonus2" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_tohit2" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_dmgdice2" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="checkbox" name="attr_stat2" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_dmgBonus2" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="attr_dmgtype2" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="attr_critdmg2" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_criton2" /&gt;&lt;/td&gt; &lt;td&gt;&lt;button type='roll' name='roll_attackWeapon2' /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; The table would use CSS and most likely each &lt;tr&gt; or &lt;td&gt; would have some sort of class associated with it to get the formatting right, but, the basic skeleton might look like something above.

Grim G. said: how do you get the image on the post? Click on the button in the header bar of the form your typing in. A secondary window will open and you can drag the picture file from your computer desktop (or wherever you have it stored) to that window and it will upload it as part of the post. :)

Grim G. said: G V. said: Not sure why it looks that way for you...here's what it looks like for me: &lt;snip&gt; strange, perhaps there's something different with the code you put in with the screenshot that what I copied down? on an unrelated note, how do you get the image on the post? Well, on second thought, I know why it probably looks like that...I have CSS code that helps with the formatting and the code you are using from above doesn't have all that. So, that would likely account for it.

G V. said: Grim G. said: G V. said: Not sure why it looks that way for you...here's what it looks like for me: &lt;snip&gt; strange, perhaps there's something different with the code you put in with the screenshot that what I copied down? on an unrelated note, how do you get the image on the post? Well, on second thought, I know why it probably looks like that...I have CSS code that helps with the formatting and the code you are using from above doesn't have all that. So, that would likely account for it. Ah... that explains it. I told myself I would cross the CSS bringe when I got to it.

Would you say it's better to learn CSS at the same time as HTML?

Coal Powered Puppet said: If you are trying to get things to line up all pretty inside of a table, then using &lt;th&gt; for the top row (inside the first &lt;tr&gt;) is a way to go, or you could put a heading (&lt;h5&gt;, for example) inside a &lt;td&gt; instead. If you are trying to give a table a title, outside the table, then &lt;h3&gt; (or whatever size you want) works well. I personally wouldn't recommend a hX inside a td. While it's valid HTML, it's semantically... strange. Use th, caption, or hX outside of the table. Grim G. said: Would you say it's better to learn CSS at the same time as HTML? While all of the HTML elements have some kind of default styling, if you attempt to create your sheet without any CSS at all, you will likely become extremely frustrated. Learning CSS alongside the HTML takes a little bit more effort to learn, but producing a result will be easier in the end.

Brian said: Coal Powered Puppet said: If you are trying to get things to line up all pretty inside of a table, then using &lt;th&gt; for the top row (inside the first &lt;tr&gt;) is a way to go, or you could put a heading (&lt;h5&gt;, for example) inside a &lt;td&gt; instead. If you are trying to give a table a title, outside the table, then &lt;h3&gt; (or whatever size you want) works well. I personally wouldn't recommend a hX inside a td. While it's valid HTML, it's semantically... strange. Use th, caption, or hX outside of the table. Grim G. said: Would you say it's better to learn CSS at the same time as HTML? While all of the HTML elements have some kind of default styling, if you attempt to create your sheet without any CSS at all, you will likely become extremely frustrated. Learning CSS alongside the HTML takes a little bit more effort to learn, but producing a result will be easier in the end. good to know. I'll try and learn it on my own then come back here with any questions.

I would also suggest looking at other sheet's code and design. I've found that most sheets are about 90% of repetitive code with just small changes.