Show Posts
1
Miscellaneous Tutorials / How to make an mybb html table
« on: November 21, 2016, 04:04:54 pm »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.
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 has loads of free templates, though you'd have to register to access them.
or this if you want.
if you're lazy, this site has loads of free templates, though you'd have to register to access them.
or this 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.
let us dissect it. be advised that the spaces within the code shouldn't be there, so you'd remove that.
Code: [Select]
[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.
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
 | 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. | |
above shows only one [ tr][/ tr] code and 3 [td ][/ td] codes to make this occur.
Code: [Select]
[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.
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.
| 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. | |
Code: [Select]
[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. ^^
I suppose I've answered the question, and will be open to answering a few more. ^^
Preset enthusiast, though mainly personal, BAHAHAHA and definitely a literature and ART enthusiast. Ask me for help or just have a chat, I'm easy to talk to! <3