NEV'S SUPER EASY TABLE GUIDE

[( NEV )]

Hello all,
I'll be explaining this epic thing called a TABLE. DUN DUN DUUUN.
Ever been upset when you go to CAUTION to look for codes, and see all of those pretty dohtml, and there's nothing for proboards?
LOL. Be upset no more!
Some genius has made tables possible on proboards. They aren't as advanced as dohtml, but they can still look very appealing.

BASICS

[atrb=border,0,true][atrb=width,350,true][bg=1e2a54] This is your most basic table EVER. Well, not the most basic, but close enough.

That table is just that; a table. Nothing to it. Here is the code;

[table][tr][td][atrb=border,0,true][atrb=width,350,true][bg=1e2a54]

[font=Verdana][color=d4d4d4][size=1]
[blockquote][/blockquote][/size][/color][/font]
[/td][/tr][/table]

Now, to explain each part. Every table needs this, or it wont work:

[table][tr][td][/td][/tr][/table]

That is your base. Everything else goes INSIDE of that.

Unless you want a fugly white border around your table that looks disgusting, you add this;

[atrb=border,0,true]

Remember. INSIDE THE TABLE. There is no [/atrb], remember that, also. Atrb stands for attribute, homies. :D

You can also set a certain width, or height. You CAN set a certain height, but it wont work unless we get another code on here. Even then, you'd need to be a bit more advanced in table making.

To set width;
[atrb=width,WIDTH HERE. JUST A NUMBER,true]

If you try and put that all together, you'll notice your table is transparent. You need a background color! Woot woot.

[bg=HEX CODE HERE]

Yep, that's it. You've got your basic table down.

----
Between all of that, you can change font size, color, face, etc like normal. You can add a picture, whatev.

ONTO PART TWO.

[( NEV )]

PART TWO
Ok, for part two, we'll learn about images. Woot Woot.
Instead of having a giant box table, you can spiffy it up with images.
We'll be using Sai's table as an example, as I have it on me.

[atrb=border,0,true][atrb=width,450,true][bg=533238] OOH. LOOK. IT'S A TABLE WITH A PICTURE THAT FADES SO IT LOOKS LIKE IT'S PART OF THE TABLE.

OK, in all honesty I rarely use footers (the bottom picture, aka those gray lines I drew to show you guys what a footer is) so, yeah. You have the option to though. You can add 'made by so and so' or put lyrics or something. It can be any size, but should match your tables width.

This is the code;

[table][tr][td][atrb=border,0,true][atrb=width,450,true][bg=533238][center][IMG]http://i51.tinypic.com/2dt9ffn.jpg[/IMG][/center]
[color=c995a0][size=1][blockquote]
OOH. LOOK. IT'S A TABLE WITH A PICTURE THAT FADES SO IT LOOKS LIKE IT'S PART OF THE TABLE.
[/blockquote][/size][/color]
[img]http://i55.tinypic.com/1118hn4.jpg[/img][/td][/tr][/table]

OMFG. It's all that crap you learned, but with images! YES. Exactly. To create this, alll you need is;
one image
two images or
three images

For one image, you just grab a graphic, rape it, make sure it's the same width, and insert it right into the code. It's smart to make it blend with the bg color, but whatever you want is fine.
For those of you who do not know how to do it add;
[img]IMAGE HERE[/img]

Right after;
[bg=COLOR HERE]

Now, if you want a FOOTER, you obviously add it at the very end.
Usually, that's right after you've done your post. After closing up the tags (NOT THE TABLE), you just add

[IMG] IMAGE HUR.[/IMG]

and you'll have a nice table. I really suggest making sure your bg and the pic color is the exact same hex; it's really funny looking at a lighter bg. It's super easy to notice.

Lastly, for three images. I rarely use this because I'm a lazy bitch, but I'll admit it looks nice. Since I don't use three images often, make due with this crappy table I put together.

[atrb=border,0,true][atrb=width,300,true][atrb=background,http://i51.tinypic.com/2hd8jdg.jpg] OMG. There are YELLOW STRIPES DOWN THE SIDES. D:

Without the middle image, you cant have the stripes. You can do any design you set your little heart out to do. Just make sure it's a pattern that can be repeated as your table gets longer.


[table][tr][td][atrb=border,0,true][atrb=width,300,true][atrb=background,http://i51.tinypic.com/2hd8jdg.jpg][center][IMG]http://i54.tinypic.com/2v9cd47.jpg[/IMG][/center]
[color=yellow][size=1][blockquote]
OMG. There are YELLOW STRIPES DOWN THE SIDES. D:
[/blockquote][/size][/color]
[img]http://i55.tinypic.com/2gv2f7q.jpg[/img][/td][/tr][/table]

Did you notice how [bg=COLOR] got replaced by [atrb=background,MIDDLE IMAGE]
Well, that's all you do. Replace [bg=COLOR] with [atrb=background, MIDDLE IMAGE] and your set. Note that you don't need [/ img], just the url is fine.

Next is PART THREE. Were you can have rounded corners and such. :)

[( NEV )]

RESERVED

So, you're tired of a box. How about this;

[atrb=border,0,true][atrb=width,350,true][atrb=style,border: #341f23 solid 10px;][atrb=style,-moz-border-radius: 30px 30px 30px 30px;][atrb=style,border-radius: 30px 30px 30px 30px;][bg=533238] I have rounded borders.

This is simple, but can easily make a table much more appealing.
Also note I added the border. Yes. Well, I like the thick border. You can delete it if you want. The code for that;

[center]
[table][tr][td][atrb=border,0,true][atrb=width,350,true][atrb=style,border: #341f23 solid 10px;][atrb=style,-moz-border-radius: 30px 30px 30px 30px;][atrb=style,border-radius: 30px 30px 30px 30px;][bg=533238][color=c995a0][size=1][blockquote]I have rounded borders. :D
[/blockquote][/size][/color][/td][/tr][/table][/center]

you will notice three new things in here.
[atrb=style,border: #341f23 solid 10px;][atrb=style,-moz-border-radius: 30px 30px 30px 30px;][atrb=style,border-radius: 30px 30px 30px 30px;]

Now, to explain them. The [atrb=style,border: COLOR solid PXHERE;] Is simple the darker border you see. You can do dotted, dashed, solid, etc. You can change the color, and the thickness. Or, you can just delete it altogether.

Now, onto the border. [atrb=style,-moz-border-radius: 30px 30px 30px 30px;][atrb=style,border-radius: 30px 30px 30px 30px;]

You'll need this to make your borders rounded. The bigger px, the more rounded it'll look. You can play around with it, so you can have two rounded borders, three, one, etc. I think the pattern is;
TOPLEFTpx TOPRIGHTpx BOTTOMRIGHTpx BOTTOMLEFTpx

But I forget so you go and find out by tweaking it.

Oh, a note. If you want to add a picture in, make sure the corners are transparent (not the same color as the bg, actually transparent as in not there) or it won't work.

PART FOUR All about the style tag and such.

[( NEV )]

RESERVED

YOU GUYS CAN POST TESTING AND SUCH NOW.