A very simple, very quick tutorial
ps: grammar is prudent, i'll be writing without caps from here on out, so as to not make a mistake. all codes are to be written with no caps, or else they will not work.
i noticed a help thread the other day asking how to make text sit between two images, another person pointed out that it was a table code, being a coding student, i thought of posting a quick tutorial.
if you're lazy, this site (http://adoxographyv2.boards.net) has loads of free templates, though you'd have to register to access them.
or this (http://www.teamopolis.com/tools/bbcode-table-generator.aspx) if you want.
A SIMPLE TABLE CODE
let us dissect it. be advised that the spaces within the code shouldn't be there, so you'd remove that.
[table]
[tr]
[td][/td]
[td][/td]
[td][/td]
[/tr]
[tr]
[td][/td]
[td][/td]
[td][/td]
[/tr]
[tr]
[td][/td]
[td][/td]
[td][/td]
[/tr]
[/table]
1. [ table][/ table] <--- this is the starting point of your code, any content you wish to display in your table should be written INSIDE it. Think of it as the title of an essay. Just remove the spaces.
2. [ tr][/ tr]<--- this stands for "table row", at least, the way I look at it, in the example above, you can see the table has three rows.
3. [ td][/ td]<--- This stands for "table data" and is the location where all your writing, images, etc are placed. it also dictates the amount of columns you have.
PREVIEW
displaying 3 rows and 6 coloumns.
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
PREVIEW WITH IMAGES
| (http://i.imgur.com/5FDTuUm.png) | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | (http://i.imgur.com/5FDTuUm.png) |
above shows only one [ tr][/ tr] code and 3 [td ][/ td] codes to make this occur.
[table]
[tr]
[td][img]http://i.imgur.com/5FDTuUm.png[/img][/td]
[td]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/td]
[td][img]http://i.imgur.com/5FDTuUm.png[/img][/td]
[/tr]
[/table]
normally, you're able to change the width of each column, however, i cannot seem to pull that off within the code itself. i have noticed that divs don't work here either, so it must be a plugin issue... ???
though, if you're looking to add a space between the text and the image, you can just add a few more [ td]'s to do so. it does, however, require a lot of previewing.
| (http://i.imgur.com/5FDTuUm.png) | | | | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | | | | (http://i.imgur.com/5FDTuUm.png) |
[table]
[tr]
[td][img]http://i.imgur.com/5FDTuUm.png[/img][/td]
[td][/td]
[td][/td]
[td][/td]
[td]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/td]
[td][/td]
[td][/td]
[td][/td]
[td][img ]http://i.imgur.com/5FDTuUm.png[/img][/td]
[/tr]
[/table]
THAT'S IT.
I suppose I've answered the question, and will be open to answering a few more. ^^
Last Updated:
10 December 2016
You wonderful person you! Thanks for making this! -nuzzle-
Ooo this is very interesting and helpful! I'll be sure to keep this in mind for my future threads! Thank you for putting this together. c:
You wonderful person you! Thanks for making this! -nuzzle-
Thank you, both! <3 Much appreciated. c:
Thanks so much! :D I've always wanted to learn how to do this. I'll have to use this sometime
(Love your avatar/signature btw)
Eyyyyy, that's pretty good. 8)
you, my floof, deserve a +nuzzle!
Thank you both very much!