ScubaBoard - How To: Create Formatted Content Using Tables

In the current version of vBulletin (the software we use), you can now format your posts using the TABLE function.
With this function, you can now achieve text wrap around an image, or to make a caption under an image (offset to one side) and have the story (post) on the other side (much like a magazine).

Tables use following main BB Code Tags (Much like the HTML Tags, but with the [ ] instead of the < > to enclose the tags.

Tables are defined with the [table] tag.

A table is divided into rows (with the [tr] Table Row Tag), and each row is divided into data cells (with the [td] Table Data tag). "Table data holds the content of a data cell. A [td] tag can contain text, links, images, lists, forms, other tables, etc.

For example:

On the right you will see the image that I've placed in the second column of the table. It is simply the ScubaBoard Mini-Oval logo, but without the use of tables, you can't place objects (images) inline.

Here is the code I used to generate that table.

[TABLE="width: 80%, align: center"]
[TR]
[TD]On the right you will see the image that I've placed in the second column of the table. It is simply the ScubaBoard Mini-Oval logo, but without the use of tables, you can't place objects (images) inline.[/TD]
[TD][attach=CONFIG]101110[/attach][/TD]
[/TR]
[/TABLE]
By centering the table, and specifying the width as 80%, it doesn't quite fill up the entire post, and automatically fits the image in the data cell on the right.

Here's the same table, but now with the BORDER enabled, so you can see it:

The Width and Alignment functions may also be used to specify the width of a TD cell.

All of this is relatively easy to insert, if you're using the WYSIWYG (enhanced) editor. To insert a table, click the "Table Button" (bottom Left)
The insert table popup asks you to specify the number of rows and columns.

I recommend using a percentage for size, or just leave it blank, and it will automatically size the table for you. The Enhanced editor functions are available from the "Go Advanced" button on every post, or when you are posting a new Thread, Blog Entry, or Article. Click on the Picture to the left to see which buttons to look for in the editor.

Here's the code for the preceding table:
[TABLE="width: 90%, align: center"]
[TR]
[TD="width: 20%"]All of this is relatively easy to insert, if you're using the WYSIWYG (enhanced) editor. To insert a table, click the "Table Button" (bottom Left)[/TD]
[TD][attach=CONFIG]101111[/attach][/TD]
[TD]The insert table popup asks you to specify the number of rows and columns. I recommend using a percentage for size, or just leave it blank, and it will automatically size the table for you. The Enhanced editor functions are available from the "Go Advanced" button on every post, or when you are posting a new Thread, Blog Entry, or Article. Click on the Picture to the left to see which buttons to look for in the editor.[/TD]
[/TR]
[/TABLE]

With the information provided, you should be able to figure out how to use the attributes and configurations of the table function to suit your needs.

Enjoy.