Post Table Guide

[Admiral Striker General]

So SG learned today (well yesterday now, meh) how people do epic decorated post tables. Turns out it required a little extra code in the wrappers, but we now has epicsauce ability. :3 SO, SG is going to explain now to those who understand coding well enough to try this and have any interest in it in the first place how to use them!

This DOES require knowledge of basic HTML to use most effectively, but does not USE HTML directly, either.

So! First, let's look at how you'd even create a basic table with no glam on ProBoards; this much we've always been able to do.

[table]
[tr]
[td]
THERE IS CONTENT HERE.
[/td]
[/tr]
[/table]

These are the three basic tags you need. TABLE establishes you're starting or ending a table. TR marks the beginning or end of a "row" (horizontal); TD marks the beginning or end of a "column" (vertical). It takes BOTH of these tags to create a "cell" (one box within a table).

If it helps you remember, TR is "Table Right"; TD is "Table Down". If that just confuses you more, disregard it.

At any rate, so using one of each tag as listed above, this is what we get. (You do not need to skip down a line for each tag. I only did this to make each stand out more in showing. In fact, the Enter key being pressed only effects content within a cell-- that is, when between TD tags. (Hence the enter here after the first opening TD tag, which we'll take out in later examples.))

THERE IS CONTENT HERE.

As you can see, with one of each, we only get one little box. So what if we want more? To get more going across..

[table]
[tr]
[td]THERE IS CONTENT HERE.[/td]
[td]AND HERE.[/td]
[/tr]
[/table]

To go across, keep adding more TD tags within a SINGLE set of TR tags.

THERE IS CONTENT HERE.

AND HERE.

Now what if we want to go down?

[table]
[tr]
[td]THERE IS CONTENT HERE.[/td]
[/tr]
[tr]
[td]AND HERE.[/td]
[/tr]
[/table]

To move down to the next row, close your current TR tags and open new ones. :3

THERE IS CONTENT HERE.

AND HERE.

So if you want a grind, then, three across and two down, for example?

[table]
[tr]
[td]THERE IS CONTENT HERE.[/td]
[td]AND HERE.[/td]
[td]AND HERE.[/td]
[/tr]
[tr]
[td]ALSO HERE.[/td]
[td]AND HERE.[/td]
[td]AND HERE.[/td]
[/tr]
[/table]

THERE IS CONTENT HERE.	AND HERE.	AND HERE.
ALSO HERE.	AND HERE.	AND HERE.

VOILA!

So I know what you're thinking. That's cool, but it kind of sucks the cells are only as big as the content, right? Can't we get it to stretch the page? ALSO, what if we want one big cell stretching across, and a row of three under it? If we tried with the basic code we'd get...

[table]
[tr]
[td]THERE IS CONTENT HERE.[/td]
[/tr]
[tr]
[td]ALSO HERE.[/td]
[td]AND HERE.[/td]
[td]AND HERE.[/td]
[/tr]
[/table]

THERE IS CONTENT HERE.
ALSO HERE.	AND HERE.	AND HERE.

D; Not cool!

SO! This is where the new extra tags come in!<3 To quote the source page.

Overview: Enhances the standard UBBC tables by adding pseudo-tags for colSpan (column span), rowSpan (row span) and bgColor (background color). In addition, a pseudo-tag to make a cell span all columns (like a header) and a generic attribute tag is defined. The corresponding pseudo-tags are:

[cs=n] - where n is the number of columns the cell should span
[rs=n] - where n is the number of rows the cell should span
[bg=color] - where color can be any of the predefined HTML colors or a 6-digit hexadecimal custom color
[th] - makes the TD span all columns
[atrb=name,value,bTable] - where name is the name of any valid attribute and value is the value to assign to that attribute. The bTable, if present, will apply the attribute to the table rather than the cell. (This pseudo-tag is the most powerful and can be used exclusively to set any valid attribute including the predefined ones above.)


These pseudo-tags should only go between the [td] and [/td] tags. They do not have or need closing tags.
Example:

Correct:
[tr]
[td][cs=2]This cell spans two columns[/td]
[/tr]

Incorrect:
[tr]
[cs=2][/cs]
[td]This cell won't span two columns and in addition the [/cs] is not needed[/td]
[/tr]

AWESOME! So let's try a few of those out. We're gonna try my "one big cell with three under it" thing now, along with making the backgrounds of the three little ones black, white, and gray, and making the table much wider.

[table]
[tr]
[td][th][atrb=width,400px,bTable]THERE IS CONTENT HERE.[/td]
[/tr]
[tr]
[td][bg=black]ALSO HERE.[/td]
[td][bg=gray]AND HERE.[/td]
[td][bg=white]AND HERE.[/td]
[/tr]
[/table]

[th][atrb=width,400px,bTable]THERE IS CONTENT HERE.
[bg=black]ALSO HERE.	[bg=gray]AND HERE.	[bg=white]AND HERE.

(x3 And of course, if the being off-skew is still making you D< RAAAGE, just put the whole table between normal CENTER tags. Again, center tags on the OUTSIDE of the table; if you put them inside they'll affect content within. In fact, we'll do that to the gray cell this time too. And for fun right-align the white.)

[th][atrb=width,400px,bTable]THERE IS CONTENT HERE.
[bg=black]ALSO HERE.	[bg=gray] AND HERE.	[bg=white] AND HERE.

;3 How da ya like THAT! To break down what I did if you didn't see.

This was the first cell.

[td][th][atrb=width,400px,bTable]THERE IS CONTENT HERE.[/td]

The [th] made it span the entire width. (Like "table right" and "table down", this is "table header".)

The powerful [atrb] tag used the Width attribute, and defined a value of 400px. Because I added "bTable" after it, it made the whole table that width.

(NOTE: It DOES NOT MATTER which cell you put a bTable ATRB tag in; personally, I just find it easiest to use the first cell, as it gets it out of the way. :3 You can use as many of these as you want, as well, as long as you don't try to apply the same thing to the same place twice. (Using two width in the same cell is fine as long as one is applied to the table and the other to the cell; just don't try to do more than one of the same thing to only one area. ;P))

[td][bg=black]AND HERE.[/td]

The bg=black, and similar other-colored tags in the other cells, made the background that color. :3 Recognized internet colors like "black", "red", "teal", "violet", etc can be used here, as well as hex codes like ffffff or 92de15. That is, any color you could use in a normal [color=WHATEVER]text[/color] scenario like you use when writing your character's speech. :3

You can google a vast number of lists that will tell you all acceptable color names (like "maroon" or "khaki"), help you figure out hex codes, and, most importantly, will show you all the attributes you can use in a table. ^__^ Any valid attribute you could use in an HTML table can be used in these; just use the altered BB Tag format shown here~

---

I KNOW some of you are staring at this guide after the third time rereading parts going "....D: WHAT?" 'xD; Don't feel bad, don't worry about it. Feel free to reply here testing out stuff or asking for help it tweaking it or whatever if you want. But THIS IS PURELY OPTIONAL FOR FUN FOR THOSE WHO LIKE THE IDEA AND CAN UNDERSTAND IT[/u]. So don't worry if it goes over your head a bit, it's not big.

I hope this has helped at least some of you, and hope you'll enjoy our fun new toy. This has been your friendly SG with another batch of almost-useful information. See you next time, and have a nice night!~

[Prince Pony Age]

...So, you never said how exactly you fix just a cell/row/column's width 8'D

My PC table is being stuuupid so yeah that's why I wanna know

[Admiral Striker General]

Yes it did.

[atrb=width,400px,bTable]

Take out the bTable and it'll apply to only one cell. A row will be as wide as the table (unless you have columns spanned from a different one?) and a column will be as wide as the widest cell within in.

[Prince Pony Age]

Oooh. Okay. Sorry I didn't get that! 8'D;;