Phia's Posting Tables Tutorial! \m/

[⋆ Phia ⋆]

woop I'm bringing this sexy back as well \m/
Aaalright it's very nice to see many of you guys have already gotten the hang of v5 coding! Keep it up! :)
For those who haven't and want to- time to get down to work!

So let me rephrase;


Tables consist of three parts; top, middle, and bottom. Here's what a table image looks like;

Top image:


Middle image (or, "background" image):


Bottom image:


Yep, the background image only has to be a little tiny thing, since it's going to repeat itself! Once you have your image ready and cut in three parts just like shown above, you get to deal with the fun part of table making! Kidding..

This is where coding comes into play! Today, we shall be messing with this one:

[div align="center"][table][tbody][tr][td style="width:WIDTH NUMBERpx;margin:0px;"][div style="font-size:11px;color:#FONT COLOUR;text-align:justify;background-image:url('URL OF MIDDLE IMAGE');margin:0px;"][img src="URL OF TOP IMAGE"][blockquote]Text, text, text.[/blockquote][/div][img src="URL OF BOTTOM IMAGE"][/td][/tr][/tbody][/table][/div]

Width number: the width is how wide your table is. Just grab the width of one of your images (middle, top, or bottom). For example, the width I'm using for the table above is 500. So I'll type 500 in there. (note: Your tables should be about 600 pixels max, else they will stretch the page. However, my personal preference is always around 500px.)

Urls of top, middle and bottom image: upload to photobucket/imgur/something and copy-paste the urls.

Font colour: whatever font colour will go best with your table. Remember, it should be easy on the eyes so others won't have a hard time reading your posts! ^-^

Here's what a complete code should look like:

Text, text, text.

one day i'll fix those sloppy edges ^

From there, you can develop your tables a loooot more, you can really do anything you wish with them. But these will come later!

Now, apart from these sweet, regular tables, there are also the scrolling tables, for example the table I've been using for Rat. Scrolling tables are slightly more complicated, so if you're going to attempt to make one from scratch, you will need some sort of experience with tables. Generally, I recommend scrolling tables to people who tend to write a lot (like myself) without intending to. If you can keep your posts sweet and short -from 200 to 600 or 800 words depending on one's level- (which is the best!) regular tables will work like a charm for you! If you want to make your table scroll, just add the overflow:auto; somewhere within your div styles.

If you're trying to make a table and are stuck with something, feel free to ask, I'll try my best to help! If you're trying to make your old table work but cannot seem to get it right, send it to me in a private message and I will convert it for you.

Happy table making!

- Phia

[Forest]

Thanks so much for this tutorial, I am so bad at coding. ):
If any new coding comes out please post how to do it, you make it really easy to understand.
Keep up the great work!

[Featherz]

[/blockquote][/div][/td][/tr][/tbody][/table][/div]<o:p></o:p>[/p]


oops i forgot to cut the image up. ok, so if i will go do that then send the finished thing, may take a while though. My brian hates work

[⋆ Phia ⋆]

Follow the guide carefully. Your image should be cut in three parts. Meaning you should have 3 image links. Then all you have to do is replace links and numbers. You don't have to code at all.

[Featherz]

Ok thanks, i am cutting the image up, or trying. Gimp wont let me, and my comp wontlet me dowload anything else

[Cher]

You shouldn't need to download anything else, you can easily use paint to divide the image into three. Use the cropping tool.

[Featherz]

yay it worked