Quick guide into [TABLE][/TABLE]

most important and always keep in mind if you want to use this function:

the very first row of your table must start next to the opening [table] - code and not in a new line. if there are no cells directly after [table], the table will not be parsed correctly.

table structure example

column 1	column 2	column 3	column 4	column 5
cell 1 of row 2		cell 3 of row 2		cell 5 of row 2
	cell 2 of row 3		cell 4 of row 3

example code:
adding cells & rows

you can add as many cells as you want, by using the pipe-symbol | for further cells in the same row. you are in the same row unless you press [ENTER] on your keyboard. the amount of cells in the very first row sets the maximum amount of columns for the entire table. any following row will have the same amount of cells as defined with the first row, no matter if you add more or less cells than you have set for the first row. less cell amount will add empty cells to the end of a row, more cells than in the first row won't be parsed at all. if you want specific cells empty, just continue your row with further pipe symbols, not adding anything between.


linebreaks inside of a cell

as described, each usage of [ENTER] on your keyboard creates a new table row if the cursor is inside the table segment, which is disappointing but the actual table function works this way. I'd rather like to see the addition of inside-tags like [ROW] and [CELL] instead of just the main tag which parses everything what's inside of it. so, if you want to have linebreaks inside a table cell without starting a new row, you have to use {br} instead (case sensitive!). you have to modify each linebreak which leads to an unwanted new row manually and also you have to take in account that other cells will center its contents vertically if its content-height is smaller.


layout example

having thumbnails next to each other and adding text below each thumbnail. thumb and text are in the same cell:

https://thumbs4.imagebam.com/dd/fd/a0/MED28UL_t.jpg Brianna Knight

https://thumbs4.imagebam.com/9a/72/9a/MED28UO_t.jpg Dionna @Suze

https://thumbs4.imagebam.com/a9/9f/34/MED28UQ_t.jpg Jenny @Suze

here's the code:
note: 2 of these 3 references are dead (for non-moderators), but this shouldn't matter here cause it's just an example.



more?

the new function offers some more options (like sorting, connecting cells, table header and some more) which aren't described with this quick guide yet. if you want to self-exercise, visit this post:
http://www.vbulletin.org/forum/showp...70&postcount=2

(note: forget about the css-option - we will not install any css you like to add)


if you want to try the function, i recommend to copy&paste one of the code examples into a post and play with it... ...in the test chamber.

Further options explored
 

Thought I'd try some of those things in that link, and post the results. I've used hos's first example table, adding an extra line to it:

column 1	column 2	column 3	column 4	column 5
cell 1 of row 2		cell 3 of row 2		cell 5 of row 2
	cell 2 of row 3		cell 4 of row 3
cell 1 of row 4		cell 3 of row 4		cell 5 of row 4

Merging Cells

Table options, unlike BBCode, are always in lower case. There's one that differs from the others in that it's placed at the start of a cell: '{colsp=2}' (or whatever value) causes that many cells to merge together. The effect only applies on that row and all the following cells are moved up, in this case causing the last one to be lost:

column 1	column 2	column 3	column 4	column 5
cell 1 of row 2			cell 3 of row 2
	cell 2 of row 3		cell 4 of row 3
cell 1 of row 4		cell 3 of row 4		cell 5 of row 4

Column Headings

All the remaining options are added in the TABLE tag itself. The option 'head' gives the first line a distinctive look:

column 1	column 2	column 3	column 4	column 5
cell 1 of row 2		cell 3 of row 2		cell 5 of row 2
	cell 2 of row 3		cell 4 of row 3
cell 1 of row 4		cell 3 of row 4		cell 5 of row 4

Specifying Table Width

Usually a table is the cumulative width of each column but it can be made to span the posting area by adding the option 'width=100%'. Additional options are added using a semicolon - looks peculiar because the first equals sign starts the list of options, the second one is part of an option:

column 1	column 2	column 3	column 4	column 5
cell 1 of row 2		cell 3 of row 2		cell 5 of row 2
	cell 2 of row 3		cell 4 of row 3
cell 1 of row 4		cell 3 of row 4		cell 5 of row 4

Smaller percentages can be used, but the table can never be made narrower than is necessary to hold all its contents:

column 1	column 2	column 3	column 4	column 5
cell 1 of row 2		cell 3 of row 2		cell 5 of row 2
	cell 2 of row 3		cell 4 of row 3
cell 1 of row 4		cell 3 of row 4		cell 5 of row 4

Comes out more like 33%. The width can also be expressed in pixels or em-spaces:
Although percentages greater than 100% won't make the table wider than the posting area, larger tables can be achieved by increasing the width of the posting area itself, for example with a long line of dashes.


Auto-numbering

The 'autonum=1' option inserts a column at the front of the table and automatically fills it with sequential numbers:

	column 1	column 2	column 3	column 4	column 5
1	cell 1 of row 2		cell 3 of row 2		cell 5 of row 2
2		cell 2 of row 3		cell 4 of row 3
3	cell 1 of row 4		cell 3 of row 4		cell 5 of row 4

The numbers go up to 500, which is the maximum number of rows possible. Lower-case letters can be used instead:Letters run from a-z, then aa-sf. Uppercase letters can also be specified:The numbering begins on the second row because the 'head' option was used. The first cell of all is left blank, but the 'autonumtitle' option can specify a heading:

count	column 1	column 2	column 3	column 4	column 5
1	cell 1 of row 2		cell 3 of row 2		cell 5 of row 2
2		cell 2 of row 3		cell 4 of row 3
3	cell 1 of row 4		cell 3 of row 4		cell 5 of row 4

Sorting

The 'sort' option sorts the table by the specified column. The 'head' option once again prevents the first row being affected:

column 1	column 2	column 3	column 4	column 5
	cell 2 of row 3		cell 4 of row 3
cell 1 of row 2		cell 3 of row 2		cell 5 of row 2
cell 1 of row 4		cell 3 of row 4		cell 5 of row 4

The sort order can be reversed with the addition of 'd' for descending:

column 1	column 2	column 3	column 4	column 5
cell 1 of row 4		cell 3 of row 4		cell 5 of row 4
cell 1 of row 2		cell 3 of row 2		cell 5 of row 2
	cell 2 of row 3		cell 4 of row 3

If 'autonum' is also used, the sort ignores it, so column 1 is still column 1 and the auto-numbers are applied afterwards rather than being sorted:

	column 1	column 2	column 3	column 4	column 5
1	cell 1 of row 4		cell 3 of row 4		cell 5 of row 4
2	cell 1 of row 2		cell 3 of row 2		cell 5 of row 2
3		cell 2 of row 3		cell 4 of row 3

Finally, secondary sort orders can be defined by specifying further column numbers, separated by commas:

Excellent guys. Just been looking at this for my posts so very ironic that you have posted recently - top stuff:

Implemented here - any advice on improvements would be great!
http://vintage-erotica-forum.com/sho...postcount=1582

Mega Thanks for the tute!
BCFC

Thanks to joey for jogging my memory.... Hos and MrInBetween massive thanks to you both here.

I settled on something like this:
http://vintage-erotica-forum.com/sho...postcount=2929

Biggest issue was the multi model rows. If you quote my post above you can see I had to add a space and carriage return for each model otherwise it wouldn't centre the first cell on the new row. If that makes sense?

Thanks for your awesome tutorial. Somebody called my post a dogs dinner but hey can't win them all lol

Hi all,

thank you for this excellent tutorial, it is thanks to this and inspiration from BCFC that I have started to use tables in this forum. It is excellent for presenting a clean nice post :)

I have a question, is there any way to specify what size the thumbnails for pictures is show at? Or is there only one size? It would be very handy to make some smaller thumbnail in certain cases.

Thanks 'yall

The answer to that is not really anything to do with tables, but flattery will get you everywhere; and it's been fascinating seeing what you and BCFC_1982 have produced, so:

If you're using the default PimpAndHost uploader, which you seem to be, no. If you want flexibility over thumbnail sizes, you need to use another imagehost, such as ImageBam - just follow palo5's succinct instructions here, but select one of the sizes smaller than 180 pixels, obviously.

Thank you
 

Thank you for your reply, MrInBetween!

Will certainly have a look-see on this, I am very curious if it will turn out the way I plan.

If so, I have lots of ideas on how to use it :)

Thanks, again!

Thank you
 

:) Thank you very much for this post, I found out only now. I have been a member of the forum for many years, always wanted to know how to do table columns, but I thought the tag was disabled to work columns. But this code that is written is different from the BB code of examples that I find in google, where they use the tag [ROW] and [TD] which is closer to the html, but may be due to the forum system version. The current form that the forum allows to write the code in columns, I realize that it is difficult to read when you have large information, the code is confusing. In this case ROW and TD would be better than break line and character for columns.

column 1	column 2	column 3	column 4	column 5
cell 1 of row 2	cell 2 of row 2	cell 3 of row 2	cell 4 of row 2	cell 5 of row 2

Form that works in the VEF

Form that does not work in the VEF, but would be ideal