***Lalia's Guide To Table Coding
Jun 9, 2013 18:02:27 GMT -5
Post by L△LIA on Jun 9, 2013 18:02:27 GMT -5
BASIC TABLE CODING
To start, we'll need a basic table code:[table][tr][td]text goes here[/td][/tr][/table]
text goes here
[ table ] is what defines the code as a table.
[ tr ] creates a new row within the table.
[ td ] creates a new column within the table.
Most posting tables (like this one) only have one row and column. This makes a single box. To change the way that box looks, the following codes must be added:[table][tr][td][atrb=border,0,true][atrb=cellSpacing,0,true][atrb=cellPadding,0,true][atrb=width,500,true][bg=594F4F]text goes here[/td][/tr][/table]
[atrb=border,0,true][atrb=cellSpacing,0,true][atrb=cellPadding,0,true][atrb=width,500,true][bg=594F4F]text goes here
"atrb" is short for attribute. "bg" is short for background.
[ atrb=border,0,true ] changes the way the border around the table looks AKA the outer white line. Changing the number in this piece of code changes the width of that border line and setting it to "0" gets rid of it entirely.
[ atrb=cellSpacing,0,true ][ atrb=cellPadding,0,true ] is the coding that gets rid of the inner border line. Without this piece of coding that line will still be there, it will just be the color of your table's background.
[ atrb=width,500,true ] changes the width of your table. This table will be 500 pixels wide. Changing "500" to a larger number will make your table wider and changing it to a smaller number will make it more narrow.
[ bg=594F4F ] changes the color of the table's background. This can be either a color hex code (like I'm using here) or a simple color name like "red" or "purple". (If you're confused about color hex codes, check out Aya's helpful guide: HERE.)
If you would like the table to be centered within your post then you will need to add the [ center ] code around ALL of your coding.
After that, you add content to a table the same way you would a regular post, putting anything you want within the table where it says "text goes here". This is where you add the coding to change the size, color, and formatting of your text and it's also where you can add images.[center][table][tr][td][atrb=border,0,true][atrb=cellSpacing,0,true][atrb=cellPadding,0,true][atrb=width,500,true][bg=594F4F][blockquote][size=1][color=E5FCC2][center][img]http://mjcdn.motherjones.com/preset_16/cat-glasses-hat.jpg[/img][/center]
I love kittens. Kittens are awesome. I mean just look at that hat and those glasses. This is what you call [i]quality[/i].[/color][/size][/blockquote][/td][/tr][/table][/center]
[atrb=border,0,true][atrb=cellSpacing,0,true][atrb=cellPadding,0,true][atrb=width,500,true][bg=594F4F]
I love kittens. Kittens are awesome. I mean just look at that hat and those glasses. This is what you call quality.
Tada! Now you have a basic table template. The next part of this guide will cover the coding of borders and corners.