|
|
Post by nali on Mar 26, 2011 21:03:00 GMT -5
this tutorial © 'Nali. please, no reproduction without permission. [atrb=cellSpacing,0,true][atrb=cellPadding,0,false][atrb=border,1,true][atrb=width,475,true][atrb=background,http://i228.photobucket.com/albums/ee114/MorningFever/Nitika/HiriziTable4copy.png,true]
Woo! Check it out! XD
So you've decided you'd like to use a table while posting. Unfortunately, you're not to handy with UBBCode. Fear not! Read on and and you will find a handy tutorial for how to code your very own table. In no time you'll be posting with tables as spiffy as this one here that I use for posting with Hirizi. >3
This is ridiculously long because I wanted to show the entire background image. ^^;;
|
|
|
|
|
Post by nali on Mar 26, 2011 21:03:35 GMT -5
Tags and Functions!
These tags are necessary for the table to work and must be included for all tables.
[table][/table]The most important of all the tags. The table won't exist unless you surround it in table tags.
[tr][/tr]These define rows in a table. They are just as necessary as the
[/td][/code]These define a regular cell in a table. If you want to modify table attributes, [td] tags must be included. You must have tags in order for the table to appear. Each tag only needs to be closed once. The code should appear as follows:
[table][tr][td]text goes here.[/td][/tr][/table] |
These are optional but handy modifiers. For attributes to be set, they must be surrounded by [td] tags. Attributes allow you to adjust the various specifics of your table such as width, background, border, ect. To adjust attributes, simply alter the center values to your liking. [th]This defines a header for your table. Must be surrounded by [td] tags. [cs=2]This defines the number of columns in your table. Must be surrounded by [td] tags. [rs=2]This defines the number of rows in your table. Must be surrounded by [td] tags. [bg=white]This will let you set a background color for your table. Must be surrounded by [td] tags. [atrb=background,url goes here,true]An alternate way to set a background. This one will let you set an image instead of just a color. Must be surrounded by [td] tags. If you set it to true (or false), the background will expand through the entire image. If you do not set it to true (or false), the background will only appear in the row you set it for. [atrb=cellSpacing,0,true]This creates space between different cells in your table. Must be surrounded by [td] tags. [atrb=cellPadding,0,false]This creates a small space between your text and the table border. Must be surrounded by [td] tags. [atrb=border,1,true]This places a border around your table. Must be surrounded by [td] tags. [atrb=width,475,true]This allows you to control the width of your table. Must be surrounded by [td] tags. To be updated as more attributes are discovered. Attributes do not need closing tags. You can list any number of attributes as long as the entire list is surrounded in [td] tags. For a table with its width and background color set, the code should appear as follows:
[table][tr][td][atrb=width,475,true][bg=yellow]text goes here.[/td][/tr][/table]
The scrolly div will allow you to add a scroll bar to your posting table. It has its own unique set of attributes that need to be set. It should be included between the [td] tags and must have a closing tag. Check it out! [*scrolly:h(100),w(100),sy,c(000000)]texthere.[/scrolly]First off, for it to work you have to remove the asterisk (*). Did that? Good. Now time to define the variables. Make sure each one is separated by a comma (,). Color is optional. h(#) = height of textbox w(#) = width of textbox sy = scroll along y-axis (vertical) sx = scroll along x-axis (horizontal) c(hex) = color hex code of textbox[/blockquote] |
|
|
|
Post by nali on Mar 26, 2011 21:04:04 GMT -5
Use of Images!
Images can be used in a variety of ways. You can have header images, footer images, and background images. Unfortunately, images have limitations set by both the site and the tags you choose to surround them with.
On Wonderwhy, images cannot be larger than 500px wide.
Please Note: NEVER blockquote images! It results in page stretching. If you wish to blockquote text, set your code so it looks something like this:
[img]url goes here.[/img]
[blockquote]text goes here.[/blockquote] Background Images:Backgrounds can be set in one of two ways. First, you can set a color for your background. Proboards recognizes the names of certain colors (such as the ones listed in the dropdown list) as well as their 6 digit hex codes, which you can find via Google. | [bg=yellow]Example of Table with Color Background |
[table][tr][td][bg=yellow]Example of Table with Color Background[/td][/tr][/table]You can also have a background image instead of using just a color. | [atrb=background,http://i228.photobucket.com/albums/ee114/MorningFever/Nitika/RandomBGImage.png,true]Example of Table with Background Image |
[table][tr][td][atrb=background,http://i228.photobucket.com/albums/ee114/MorningFever/Nitika/RandomBGImage.png,true]Example of Table with Background Image[/td][/tr][/table]How much of the background image is shown depends on the how much you type. Longer type and lots of spacing will increase the height and width of the image shown. The table will automatically expand until it reaches the forum width. If your image is shorter than the forum width, it will automatically repeat. [atrb=background,http://i228.photobucket.com/albums/ee114/MorningFever/Nitika/RandomBGImage.png,true]
Example of Table with Background Image with lots and lots and lots and lots and lots and lots of words and enter spaces to increase the table's width and height.
|
[table][tr][td][atrb=background,http://i228.photobucket.com/albums/ee114/MorningFever/Nitika/RandomBGImage.png,true]
Example of Table with Background Image with lots and lots and lots and lots and lots and lots of words and enter spaces to increase the table's width and height.
[/td][/tr][/table]If you want your table to be only as wide as your image, I suggest you set the table's width. It will prevent auto-repetition of the image. [atrb=width,475,true][atrb=background,http://i228.photobucket.com/albums/ee114/MorningFever/Nitika/RandomBGImage.png,true]
Example of Table with Background Image with lots and lots and lots and lots and lots and lots of words and enter spaces to increase the table's width and height.
|
[table][tr][td][atrb=width,475,true][atrb=background,http://i228.photobucket.com/albums/ee114/MorningFever/Nitika/RandomBGImage.png,true]
Example of Table with Background Image with lots and lots and lots and lots and lots and lots of words and enter spaces to increase the table's width and height.
[/td][/tr][/table]Height is determined by how much you type, no ifs, ands, or buts. Type a little and only a little bit of the image will be shown. Type a lot and the full image will be shown. Type too much and the image will automatically repeat itself. I'm going to be lazy and only show an example in which the length begins to repeat itself. Since it's so long and the code doesn't actually change, I'm also excluding the code. ^^;; Rule of Thumb: Don't make your image height larger than 1000px. Most images hosting site (including PhotoBucket and TinyPic) will automatically resize images that are over 1000px tall, which will result in your width being proportionately resized. [atrb=background,http://i228.photobucket.com/albums/ee114/MorningFever/Nitika/RandomBGImage.png,true]
Example of Table with Background Image with lots and lots and lots and lots and lots and lots of words and enter spaces to increase the table's width and height.
|
Header and Footer images are essentially the same thing. Neither is part of the actual table. Header images are added in before your text. Footer images are added in after your text. To avoid page stretching, do not surround images in [blockquote*] tags. This includes placing the entire table in [blockquote*] tags. I recommend setting the width attribute if you do not want your table wider than your header or footer images. Height is determined by how much you type, no ifs, ands, or buts. Type a little and only a little bit of the image will be shown. Type a lot and the full image will be shown. Type too much and the image will automatically repeat itself. [atrb=width,475,true][bg=yellow]
Example of Table with Header Image
blah
blah
blah |
[table][tr][td][atrb=width,475,true][bg=yellow][img]http://i228.photobucket.com/albums/ee114/MorningFever/Nitika/Header.png[/img]
[blockquote]Example of Table with Header Image
blah
blah
blah[/blockquote][/td][/tr][/table][atrb=width,475,true][bg=yellow]Example of Table with Footer Image
blah
blah
blah
 |
[table][tr][td][atrb=width,475,true][bg=yellow][blockquote]Example of Table with Footer Image
blah
blah
blah[/blockquote]
[img]http://i228.photobucket.com/albums/ee114/MorningFever/Nitika/Footer.png[/img][/td][/tr][/table] |
|
|
|
Post by nali on Mar 26, 2011 21:05:11 GMT -5
Basic Code!
For those of you that just can't seem to wrap your head around the coding aspect but have some handy dandy images, here's a pretty versatile code that should work for most table styles. All you have to do is edit the attributes to your liking. Most notable changes should be the three image URLs, the width, text alignment (left/right/center/justify), and text and speech colors.
Enjoy!
[center][table][tr][td][atrb=cellSpacing,0,true][atrb=cellPadding,0,false][atrb=border,0,true][atrb=width,450,true][img]HEADERURL[/img][/td][/tr][tr][td][atrb=background,BACKGROUNDURL]
[blockquote][left][size=1][color=white]
text goes here.
[color=black][b]"speechtest"[/b][/color]
[/color][/size][/left][/blockquote][/td][/tr][tr][td][img]FOOTERURL[/img][/td][/tr][/table][/center] |
|
