Welcome to my code camp. Please bare in mind this is a work in progress, but can be referenced from whenever needed!
Table & Profile Coding Guide
This is a handy table and profile coding guide. These are by no means rules that you have to follow, but rather suggestions that may help you clean up your codes and avoid any table breakages. They are the plague! But they are also common, and normal, so never be discouraged from trying your hand. If you see anything on here you have questions about, or have any questions or suggestions for me to add, please feel free to reach out!
Step One: Know thy Language
Tables are commonly coded with HTML and inline CSS. Profiles also have the option to have a CSS stylesheet in the appropriate CSS Codes field. This is not a super ideal way to code, but we work with what we must. Because of this, it leaves a lot of room for error. Knowing common types of errors can help you prevent them or recognize them when (not if, when) they do occur. Below are some principle rules about HTML:
- Quotations are everything. And by quotations, I mean " and ', as unfortunately the fancy ones won't work (“ ”). If you're coding from your phone, you may need to double check and make sure it doesn't auto default to the fancy ones.
- Spaces are also everything. The less spaces the better.
- Most everything can be kept in one div. I'll expand more on this later.
- If you're looking to do something, Google it! Alternatively, if you use inspect element, you can see what codes may become available to you.
- Don't forget your semicolons.
- Everything can be styled! This means you can style a center element, or style a bold one. You do not need to do a simple center tag and then a font or div element afterward, you can just stick it all in your center! Please bare in mind that divs have certain properties that differentiate it from spans and fonts. You can read more here.
- And lastly, remember to close your divs. More on this later.
Step Two: Be the Cleanest You
Having a "clean code" is one of the best pieces of advice I was ever given when I was in college. The cleaner your code is, the easier it is to not only catch mistakes, but to keep them from happening. Whenever I've noticed table breakages here, it is usually because the code isn't cleaned up, and has a lot more elements than it needs. Below, I will give two examples: one of a "messy" code, and one of a "clean" code.
Messy Code
Code:
<center><div style="width: 550px; padding: 40px;"><div style="color: #FFF; font-family: Times; font-size: 12px;"></div></div></center>See how many elements we have in that one bit of code? Would you be astonished if I told you we can accomplish all of this in one element?
Clean Code
Code:
<div style="width: 550px; margin: 0 auto; padding: 40px; color: #FFF; font-family: Times; font-size: 12px;"></div>The takeaway here is: the less elements you have in your code, the less chances of there being one too little or too many open elements.
Additionally, it is important to remember that your cleanest codes need to be within the style tag. While it is mightily tempting to not throw everything into a style, and technically it's not against the rules, it toes the line enough that it can cause simple mistakes such as missing a quotation mark or semicolon. Examples below:
Messy Code
Code:
<div width="550px" font="Times" style="margin: 0 auto; color: #FFF;"></div>Clean Code
Code:
<div style="width: 550px; font-family: 'Times'; margin: 0 auto; color: #FFF;"></div>This will keep your code clean and help avoid any small mistakes. A frequent one I see is spacing issues or forgetting a quotation mark (i.e. div width=500px" is missing its first quotation!). While sometimes computers will correct our mistakes and read it correctly, if we do too many, then the code will break, and then you're stuck fixing ten other things!
Step Three: Know Thy Cheats
This section will likely be expanded, but for now, here are a few tips and tricks I've learned to help keep my code clean and functional!
Code:
margin: 0 auto;This code completely erases the need to add a center tag. This means no more having to center before your divs. It also allows you to add some padding space above and below your table if that's what you desire!
Code:
<div class="clearfix" style="you code goes here!">For floating elements, this is an especially useful code. It will keep whatever objects you have floating from falling into the spaces below the div. This will make sure it doesn't go all whacky tacky on your lovely profiles. A lot of clearfixes are already built into certain areas of the site, but it never hurts to add more.
Step Four: Take Advantage of your Tools
Lastly, take advantage of what's already built into the site! We currently have fanciful things from FontAwesome to use for lovely icons to flexboxes and clearfix already built into the core code. If you like something, simply Right Click over the feature and hit Inspect Element. It will then give you the class for that specific feature. You can then add it into your codes like below:
Code:
<div class="flexContainer"><div class="flexItem" syle="flex: 50%;">Box 1</div><div class="flexItem style="flex: 50%">Box 2</div></div>Step Five: When in Doubt, Take it Apart
If your code is broken and you're absolutely stumped on how, I always recommend to break your code up. This is extremely useful on sites such as jsfiddle which highlights your code for you, but can also be done via the Edit Post feature onsite. What do I mean by "taking it apart"? I mean separating all your divs by spaces. This will help give a visualization and not have the text clumped together into a fustercluck. I will provide an example below, can you spot the mistake?!
Code:
<div style="margin: 0 auto; width: 575px; background: url('img.png') no-repeat center top; background-size: 100%; padding: 400px 45px 45px 45px; color: #FFF; font-family: 'Times'; font-size: 12px; line-height: 17px;">
<div style="width: 100%; padding: 30px; text-align: justify;">
<center style="font-size: 14px;">
Look at me!
</div>
Texting goes here.
<center style="font size: 10px;">
Bottom text
</center>
</div>
</div>
</div>Now that we've spaced it out, we can count the number of open elements we have, and the number of closed ones. As you can see, we have two open divs up top, but three closed ones down below. We will need to remove one of them since we only need to close two divs! Additionally, the first center tag does not have a closer, instead having another div closer. In this case, we could change the /div to /center.
-- Thank you @cala for pulling this all together!