Styling Your Tables

[/ DANI]

So I've seen some struggling around the site with the style tables because of the v5 conversion and I thought it might help if I posted a little help guide. The new Proboards has automatically integrated [ "div style" ] tags into their interface so there is no longer a need for a code to get this feature (yess!). Keep reading below for more tips on how to code your tables successfully!

(Note: All of the tags I will be using in this post will have an asterisk in front of the code {i.e. [*center]}. The proper way to code would be without this asterisk.)


So for starters, this is how you would begin your tables:

[*table][*tbody][*tr][*td] content goes here [*/td][*/tr][*/tbody][*/table]

As some of you may (or may not) know, the "tr" and "td" tags represent table rows and table columns, respectively. The "atrb=style" tag no longer works to customize the entire table (color, width, etc.). You have to insert that part of the code into the table body. This is how it would look:

[*table][*tbody style="width:400px;background-color:#FF0099;border-right:10px solid #990099;"][*tr][*td] content for 1st row/1st column [*/td][*td] content for 1st row/2nd column [*/td][*/tr][*/tbody][*/table]

Notice that you must now put the hashtag (#) in front of hex colors when trying to code colors for tables, otherwise your colors will not show up! Of course in addition to the table, you can also customize the individual cells within the table, just as you used to be able to.

[*table][*tbody style="width:400px;background-color:#FF0099;border-right:10px solid #990099;"][*tr][*td style="width:350px;padding:5px;"] cell content goes here [*/td][*/tr][*/tbody][*/table]

Now if you want to customize some font within your table cells you can use the "div style" tags to accomplish this. (Yes, you must now include "div" before "style".) Look below for some examples of what you can use to further customize your text.

[*table][*tbody][*tr][*td] content for 1st row [*/td][*/tr][*tr][*td] [*div style="text-align:center;letter-spacing:1px;color:#FFCC00;font-family:arial;font-size:20px;"]content for 2nd row[*/div] more content can go here of course [*/td][*/tr][*/tbody][*/table]

See the red? Please make sure that when you are trying to assign a font size via "div style" tags, that you include the "px" variable after the number. Otherwise your font will not be sized accordingly. This applies for width and height sizes too. Also it is very important that you wrap your code in quotations ("") or the "div style" tags won't work at all. And of course the "style" tags don't apply to tables only! We use them all the time for our pretty little templates that we post up for you guys.

So I hope this guide was helpful. As always, if you have any questions you are more than welcome to ask! Just reply to this thread or feel free to PM me.
Happy coding!