Styling tables in Community

Hey Samantha,

Can I ask why you're using a table vs. divs to style what looks like to be a simple link/button with an image? I ask because tables are difficult to use for styling for a myriad of reasons (more tags to manage, to many general tags unless you go in and apply classes to them but then creating more code, slower to load, trickier to style, not very accessible, etc.). Tables should really only be used to hold and organize tabular data and the image you showed in your original post looks like something that could be easily and quickly achieved with divs and css (preferable in a style sheet, but you could try inline..).

I have some historically knowledge that in the past, the wysiwyg editor has its own style sheet, and configurations that can affect how tables are displayed in published posts. (e.g. allowing html, inline code, etc.) One example i remember was a community that would copy and paste the same code written for email newsletters (done using tables) into topic posts, but the formatting changed as a result. some of this was fixed by altering the css specific to tables in message posts and I think specifically it was the property for border-collapse, but I digress.

Your table might be affecting by something similar, but really, I suggest trying to re-create this with divs and css. It simple enough that if it would be a great problem to solve especially if you're just learning html/css.

In fact, here's a js fiddle showing just one quick way to accomplish what you want. You may ned to tweak the css a bit, (add the css to your community's css file) and replace the image url with the image you have in your screenshot. http://jsfiddle.net/shampookie/8p0qdh4s/1/

Hopefully that helps, and you're able to break down the code to understand what it's doing.