coding your v5 tables/templates

hello everyone! it's sleet white here. and this is for all of the people who converted from v4 and are are having trouble with making tables for proboards v5. so as you know, proboards has recently added the
[ div style ] code, and so making tables is a lot easier after you get the hang of it!

so this is the basic structure of making a table

[div align="center"][div style="width:XXXpx; background-color:#COLORHERE; color:#TEXTCOLORHERE;"]
texttexttext
[/div][/div]

keep in mind that you can't combine "div align=center" with the rest

so if we use that code above and add in our width (450px) and our colors (white background and black font), it'll get us something like this:

it looks like this!

so that's the basic form of a table. since that's looking plain, we add stuff like borders and backgrounds and font sizes/texts, etc. a full list of supported css can be found here.

so for me, i'm going to sent the font to arial, make it size 10, align it so that it's justified, and have borders 10px solid colored d7d7d7. you can also blockquote your text if you'd like.

and this is what it looks like

so this is the code that i used

[div align="center"][div style="width:450px;background-color:#fff;color:#000;font-family:arial;font-size:10px;text-align:justify;border-right:10px solid #d7d7d7;border-left:10px solid #d7d7d7;border-top:10px solid #d7d7d7;border-bottom:10px solid #d7d7d7;"][blockquote]texttexttext[/blockquote]
[/div][/div]
so now, what if you want to add an image to it? well that's easy. you just add either the img & /img, or you can use the img scr="link" code

and this is what it looks like

[div align="center"][div style="width:450px;background-color:#fff;color:#000;font-family:arial;font-size:10px;text-align:justify;border-right:10px solid #d7d7d7;border-left:10px solid #d7d7d7;border-top:10px solid #d7d7d7;border-bottom:10px solid #d7d7d7;"][img src="http://farm3.staticflickr.com/2459/3775787381_bd4ced9c17.jpg" style="max-width:100%;"]
[blockquote]and this is what it looks like[/blockquote][/div][/div]
well now that you have an image added in there. maybe you'd like some lyrics. so let's add some lyrics, and make them stand out by using a different font, a bigger text size, and adding some letter spacing!

i'm coming home, i'm coming home *

and this is what it looks like

[div align="center"][div style="width:450px;background-color:#fff;color:#000;font-family:arial;font-size:10px;text-align:justify;border-right:10px solid #d7d7d7;border-left:10px solid #d7d7d7;border-top:10px solid #d7d7d7;border-bottom:10px solid #d7d7d7;"][img src="http://farm3.staticflickr.com/2459/3775787381_bd4ced9c17.jpg" style="max-width:100%;"]
[div style="font-size:20px;font-family:georgia;letter-spacing:2px;text-align:center;"] [i]i'm coming home, i'm coming home *[/i][/div]
[blockquote]and this is what it looks like[/blockquote]
[/div][/div]

and now you have a simple template that makes your posts prettier!

well that's the basics of making a table on v5. you can also do a lot of other fancy things such as aligning your tables differently, provide scrolling, adding text wrap around an image, using an image as a background and writing over it.

if you have any specific requests or want to know how to do something, just post here or pm me or tag me in a post, and i'll get right to it.

i also might update this if i have the time

enjoy and happy coding!

(originally posted by myself on twf, where i go by sleet).