# How to do tables



## salvidor (23 Feb 2010)

A quick guide to using tables (I have played around with these and do not have any access to documentation, so someone out there might do better).

NOTE: carriage returns (the enter key) are very important each row is a new line.

NOTE: all of the quotes below contain a space between the / and table [/ table] in the closing block so you can see the code - you can copy and paste these examples and just remove the extra space.

Start the line with the table tag and then type the value you wish to appear in the first cell, next use the pipe character (shift + \) and type the value you want to appear in the next cell and so on.  Once you do not use enter to go the the next line - these cells will all appear on a single row - note you do not end the line with a pipe.  And then end the table block [/ table] - either on the same or next line.



> 3 columns, 1 row
> 
> 
> 
> ...








both gives you: 


cell1|cell2|cell3



> 9 columns, 1 row
> 
> 
> 
> ...







gives you: 


cell1|cell2|cell3|cell4|cell5|cell6|cell7|cell8|cell9


WRONG: if you have the table tag on one line and the cell text on the next line like this:



> incorrect format - give 1 column, 1 row
> 
> 
> 
> ...







you get:




cell1|cell2|cell3


This is because the first line with the table tag determines the number of columns the table will have - since there is nothing except the table tag on this line only a single column is generated.



Now we know how to create a single row of data - adding new rows is very simple - after you have defined the amount of columns you want (the first line) - just hit the enter key and enter a new row - there should be the same number of cells in each row.



> 3 columns, 3 rows
> 
> 
> 
> ...







gives you: 


cellA1|cellA2|cellA3
cellB1|cellB2|cellB3
cellC1|cellC2|cellC3



> 3 columns, 5 rows
> 
> 
> 
> ...







gives you: 


cellA1|cellA2|cellA3
cellB1|cellB2|cellB3
cellC1|cellC2|cellC3
cellD1|cellD2|cellD3
cellE1|cellE2|cellE3


Each table row that is produced alternated in colour so you can distinguish the rows - but what if you want to add a proper looking header to your table?

This is achieved by placing ="head" in the opening table tag, like so:



> 3 columns, 5 rows - with headers
> 
> [table*="head"*]Heading1|Heading2|Heading3
> cellA1|cellA2|cellA3
> ...




gives you: 


Heading1|Heading2|Heading3
cellA1|cellA2|cellA3
cellB1|cellB2|cellB3
cellC1|cellC2|cellC3
cellD1|cellD2|cellD3
cellE1|cellE2|cellE3



If you need to leave cells blank you just omit the text you would have put in and always remember the | (pipes) and carriage returns must remain.

Say I want to have a table which compares a car and a bike against having wheels, engine and pedals - I want to have car and bile on the Y and Wheels, Engine and Pedals on the X - firstly I need to have an empty cell in the top left.

To do this we just omit the text for this cell but keep the pipe.




> Empty cells example
> 
> 
> 
> ...







gives you: 


 |Wheels?|Engine?|Pedals?
Car|X|X|
BIke|X| |X

_In the following examples you will need to look closely to see the empty cells_

Notice the first line after the table tag has an empty space before the first | - this tells the table to define 3 columns and leave the first empty:


> |Wheels?|Engine?|Pedals?







     |Wheels?|Engine?|Pedals?

The second line - the car has a trailing pipe with a blank space after it - this tells the table to leave that cell empty


> Car|X|X|





Car|X|X|    

The third line has an empty space between the pipes which tells the table to leave the 3rd cell of this row empty.


> BIke|X|     |X





BIke|X|     |X

I hope that you have found this useful and I have updated a post: www dot askaboutmoney dot com/showpost.php?p=1006396&postcount=5 for you to have a look at how it might be used.

If you have any questions, comments or issues post here and Ill answer to the best of my ability.


NOTE: I have written this based on playing with the tags, with no access to documentation as I do not have an account to access info here: www dot vbulletin dot org/forum/showthread.php?t=107985

Happy tabling!


----------



## Brendan Burgess (23 Feb 2010)

*Re: How to use tables*

Salvidor

That is brilliant. Thanks very much. I will play with it later.

By the way, you should be able to post links now that you have 10 posts. 

I have pasted the content of the other thread in case it adds anything. Though I think you have covered everything: 

BB Code 



by StGaensler

*Description*

This Hack provides a BB code 


 to add a table to the post
The skin of the table automatically fits the style because the CSS classes of vBulletin are used.

A table is simply made of some lines (will be the rows). The cols are seperated by 
*|*
. So this will be a table:

*Block Disabled:*
      (
Update License Status
) 		  	 	 		Suspended or Unlicensed Members Cannot View Code. 	  
A screenshot of a "ready" table is attached

*Usage*

install attached product XML through product manager (overwrite existing)
install at least one language pack in _AdminCP -> Languages & Phrases -> Download / Upload Languages -> Import Language XML File_
Important: Select the language you want to import the phrases into, not "(Create New Language)" - this won't work! If you use another version of vBulletin than I use enable "Ignore Language Version" to import the language pack.

*Please note: (installing)*

Installing this product will: (reverted during uninstall)

rename a existing BB code "table" to "table_saved"
add a new BB code 






If you want to have 
*live sortable columns*
 (JavaScript): Download attached 
_sorttable.js.txt_
 rename it to 
_sorttable.js_
 and place it into the 
_/clientscript/_
 folder of your vBulletin. Then go to 
_AdminCP -> vBulletin Options -> BB Code 

 Settings -> Enabled Features Of This BB Code_


 and enable 
_sortable_

Note: Including the file on the webpages where it is necessary is done by my product. So if 
_sortable_
 is disabled, it won't be included automatically.
If you want to have a 
*icon for the editor*
 you may use this for free:

	

	
	
		
		

		
			






 Download this icon and place it in your /images/editor/ folder.

*Please note: (usage)*

Of course you *can use vB Code and smilies inside the table*!
The first line defines how much columns are in the table. If the other lines have more or less colums they are cut off or filled with &nbsp; (space)
You can find a *detailed description of the options* (please read it before requesting help)
Empty rows are (should be 
	

	
	
		
		

		
		
	


	




) removed.

*New features*

define colspan of cells
small panel in AdminCP
define CSS class of table and tablerows
live sorting of table through clicking the head of a column
defining maximum width of a table

*Maybe planned features*

detailed description of the vB Code in _misc.php?do=bbcode_ depending on the features enabled in AdminCP _(planned for next beta version)_
define formatting (bold, italic), align (left, right, center) and width of the cols

*Suggested but not planned features*

none

*Known problems*

Bugfix of version 0.1.1 doesn't work if vBulletin should write template names into the source code

*Version history:*

0.0.1 - 0.0.5 internal releases for testing purposes (Thanks to Zombie79 from [broken link removed] for testing)
0.1 first official release
0.1.1 fixed small bug: if a line ends with eg vbcode quote no new row was generated (should already have been fixed but did not work)
0.1.2 workaround: removed call to function bcmod(), it could also be done another way 

	

	
	
		
		

		
		
	


	



0.1.3.x beta version described 
here (and following)
 - added admin panel, colpan and css feature
0.1.4 stable version - no significant changes to the last beta (0.1.3.8)
0.1.5.x beta version described 
here (and following)
 - added sortable, maxwidth, versioncheck, upgrade message, compatibility to vB 3.6
0.1.6 stable version - two bugfixes to last beta, {br} for posting linebreaks in a tablecell
0.1.7.x stable version - compatibility to vB 3.7 (
description
) - added tab seperated tables

This hack can be used for free. If you want to make a small donation, just contact me. We will find a way 

	

	
	
		
		

		
		
	


	



I don't want this product to be distributed from other sources. Please don't upload it to other vBulletin related boards etc.


----------



## salvidor (23 Feb 2010)

*Re: How to use tables*

No problem!

1 post left before I hit 15 to post links!

Thanks


----------



## Brendan Burgess (23 Feb 2010)

*Re: How to use tables*

I thought it was 10 - I will reduce it as it has served its purpose of virtually eliminating spam.


----------



## Brendan Burgess (23 Feb 2010)

*Re: How to use tables*

Salvidor

I have had a bit more time to go through this and you really wrote it well. 

You even anticipated my errors in practice:



> WRONG: if you have the table tag on one line and the cell text on the  next line like this:



The examples are really good.


----------



## Brendan Burgess (23 Feb 2010)

*Re: How to use tables*



drugs|drink|gambling

drugs|drink|gambling
10||20
OK, so it's head , not "head" 



drugs|drink|gambling
10||20

20|30|40


|drugs|drink|gambling
women:|10||20

men:|20|30|40



|drugs|drink|gambling|other addictions
women:|10||20|5

men:|20|30|40|80




|drugs|drink|gambling|other
 addictions
women:|10||20|5

men:|20|30|40|80
I tried to get Other Addictions onto two lines in the one cell and it doesn't work. Even with shift and enter.


----------



## Brendan Burgess (23 Feb 2010)

*Re: How to use tables*

If you want to learn tables

1) Do a simple example
2) Hit Submit Reply to see what it looks like
3) Edit the post
4) Copy the text and paste it again within the same post
5) Edit the second version to add something else e.g. head
6) Hit Submit Reply to see the impact of that.


----------



## donee (23 Feb 2010)

*Re: How to use tables*

you two really need to get out more


----------



## salvidor (4 Mar 2010)

*Re: How to use tables*



Brendan said:


> |drugs|drink|gambling|other addictions
> women:|10||20|5
> men:|20|30|40|80
> 
> ...


 
In order to break the text over two lines in a cell you can use {br} where you want the line break to appear - however, this doesnt appear to work if the table is marked to have a header:


> [table*=head*]|drugs|drink|gambling|other{br}addictions
> women:|10||20|5
> men:|20|30|40|80[/ table]




|drugs|drink|gambling|other{br}addictions
women:|10||20|5
men:|20|30|40|80 


> |drugs|drink|gambling|other{br}addictions
> women:|10||20|5
> men:|20|30|40|80[/ table]





NOTE: no 
*=head*


|drugs|drink|gambling|other{br}addictions
women:|10||20|5
men:|20|30|40|80

So for examples like the one above it appears not to be suitible, but for an example like the below - it works well.

From Brendans 
post


> Private residential{br} mortgages: |793,000||€118 billion
> Average mortgage: |€150,000||
> Number in arrears {br}over 90 - 180 days:| 9,418 |1%|€1.7billion
> Number over {br}180 days: |19,185 |2.5%|€3.6 billion
> [/ table]







Private residential{br} mortgages: |793,000||€118 billion 
Average mortgage: |€150,000||
Number in arrears {br}over 90 - 180 days:| 9,418 |1%|€1.7billion
Number over {br}180 days: |19,185 |2.5%|€3.6 billion



> *Legal action*
> 
> 
> Court proceedings outstanding : |3,200
> ...







Court proceedings{br} outstanding : |3,200
Repossessions: |27
Voluntary surrender {br}or abandonment: |74

You can use as many breaks as you like in a cell.



> this{br}is{br}a{br}single{br}cell{br}with{br}multiple{br}breaks|no break here
> [/ table]







this{br}is{br}a{br}single{br}cell{br}with{br}multiple{br}breaks|no break here


As above: NOTE: all of the quotes below contain a space between the / and table [/ table] in the closing block so you can see the code - you can copy and paste these examples and just remove the extra space.


----------



## callybags (4 Mar 2010)

*Re: How to use tables*

I think the examples shown are seriously flawed.

Who would believe that no women are addicted to drink?


----------



## lyonsie (4 Mar 2010)

*Re: How to use tables*

What are tables.   What are they for...   Why would you use them, and for what.   Are we all missing something?


----------



## salvidor (4 Mar 2010)

*Re: How to use tables*



lyonsie said:


> What are tables.   What are they for...   Why would you use them, and for what.   Are we all missing something?


Hi lyonsie,

It is just for presentation really...

Say you wanted to present a table of data to show something like the Break down of Principle & Interest over the term of a loan - these dont present well by default:



> *Break down of P&I*
> 
> 
> YR         Intrest              Principal           Balance
> ...



The above is not very readable, so you can use a table to present the same data in a far more readable format:



> *Break down of P&I*
> 
> 
> 
> ...



Thats all really - its just so you can present data better.  See this thread for a real world example.


----------



## salvidor (4 Mar 2010)

*Re: How to use tables*



callybags said:


> I think the examples shown are seriously flawed.
> 
> Who would believe that no women are addicted to drink?



My wife...


----------



## Brendan Burgess (4 Mar 2010)

*Re: How to use tables*



lyonsie said:


> What are tables.   What are they for...   Why would you use them, and for what.   Are we all missing something?



The Best Buy Tables could well be reformatted into real tables. 

It took me ages to read the Financial Regulator's press release on arrears.

Putting it into the table above makes it readable.

Brendan


----------



## Brendan Burgess (25 Jul 2012)

A few people have asked how to do tables.


----------



## Marion (25 Jul 2012)

Hi Cashier

The table tag is just an opening table tag [ table] followed by your columns and then a closing table tag [ /table] at the end of your table. (Type these without the spaces)

The columns are divided by pipes which are just |||. These pipes are found by holding down shift and the backslash key.

So:



 |2011|2012
Sales:|1000|2000
Profit:|500|600 [ /table]

If you type the above exactly except don't leave a space after the opening bracket and the forward slash for the closing tag. I just left this so that it wouldn't convert to a table.

You should then get the following:



 |2011|2012
Sales:|1000|2000
Profit:|500|600 

Use preview post to check it.

Marion


----------



## Marion (26 Jul 2012)

Hi cashier

Great.

So you could see that the opening tag with 

 just gave me a dark blue header row.

I could have just had a regular row by typing 




I have decided that I don't want a dark blue header in my next table.

Marion


----------



## Marion (26 Jul 2012)

Sometimes it is not possible to have a header row and word wrap in a column at the same time.

So:





 |2011|2012|Average {br} over two years
Sales: |1000 |2000|1500
Profit: |500|600|550[ /table]





Cashier you might indulge me by checking if it works for you. Thanks.



 |2011|2012|Average {br} over two years
Sales: |1000 |2000|1500
Profit: |500|600|550


If I didn't have word wrap {br} my table would look like this:



 |2011|2012 |Average over two years
Sales: |1000|2000|1500
Profit|500|600|550

Marion

PS: {br} just means break row or word wrap so that my column is not too long.


----------



## Brendan Burgess (26 Jul 2012)

cashier said:


> How do I get the total amount?



It doesn't do totals like Excel. You have to work them out manually. 

Marion 

Thanks for that lesson. 



I had not known about word wrap {br} which will be very helpful to me|100
Nor had I known about the heading {br} which I will try as well|200
Brendan


----------



## Brendan Burgess (26 Jul 2012)

I wonder why word wrap is not working in the above example



 Science|History and {br} geography
100|200


----------



## Marion (26 Jul 2012)

Brendan: I think you just forgot that you knew this already. 

Cashier: Glad you're having some fun with this.

Salvidor: Many thanks for your great thread that enabled us to summarise tables.

Marion


----------



## Marion (26 Jul 2012)

Why didn't the word wrap work above?

I don't know the reason.

It seems that we can have a dark blue header by using the 

 tag. But if we use this we can't have word wrap in that header row.


Word wrap will always work in a header row when the regular 


 tag is used.


We can get around this by just using the formatting fonts in our header to differentiate the header from the other rows.

So:

Using the regular 


 tag we can separate our headings from the other rows by changing the formatting fonts of the text. We can also change the alignment  of the text to centre.



|
*Two*
|
*Three​*
|
*Four​*
*and *
*Five*

numbers:|two|three four {br}and five|


I would advise leaving the formatting until the table itself is done. Just double click on the words to be formatted and hit the relevant font on the toolbar. You could of course apply the formatting codes manually if you were looking for a challenge.  For the headings above, I used bold and red. I also centred the heading "Three" 


Marion


----------



## Brendan Burgess (26 Jul 2012)

I had not known about word wrap {br} which will be very helpful to me|100
Nor had I known about the heading {br} which I will try |200​OK, so it works if there is no table=head   start.

I have also tried centering the text​


----------



## orka (7 Feb 2013)

|1.7%|2.7%|3.7%|4.7%|5.7%
Int. only|612|972|1,332|1,692|2,052
20 yr repay|2,122|2,325|2,536|2,757|2,985
35 yr repay|1,766|1,975|2,195|2,426|2,667
30 yr repay|1,530|1,745|1,973|2,215|2,468Got it eventually but I had to type it manually in AAM - I tried copying previous posts into Word, editing and then copying back but it went wonky - even though I checked and double-checked spacing, symbols etc. - any ideas why?


----------



## ajapale (7 Feb 2013)

orka said:


> testing



Thanks for that Orca! I never knew that this thread even existed!

aj


----------



## orka (7 Feb 2013)

sorry - meant to edit my first post instead


----------



## Brendan Burgess (7 Feb 2013)

> I tried copying previous posts into Word, editing and then copying back but it went wonky



I think that Word contains some spacing and other invisible bits which wreck tables ( and my head). 

When I do a long post in Word using tables, I then copy it into Wordpad which removes the hidden problems. Then I copy that and paste it into Askaboutmoney.


----------



## Sue Ellen (7 Feb 2013)

If you put on the show/hide or display controls as it used to be called you might be able to see any possible problems if you are using Word.  Not sure if this would help in any way with tables.


----------



## RichInSpirit (16 Sep 2014)

Interesting thread. Going to try doing a table soon.


----------

