- Joined
- Aug 7, 2021
ps. this is not finished yet.
|
please do not post in this thread.
Last edited:
Your support makes Blue Moon possible (Patreon)
ห โบ XTABLES โ ๐ ๐ช๐ฎ๐ข๐๐ค ๐ ๐ฎ๐ข๐๐.
ps. this is not finished yet.
ห โบ ๐ญ๐ก๐ ๐๐๐ฌ๐ข๐๐ฌ
New
OP
OP
- Joined
- Aug 7, 2021
|
ห โบ the basicsโ let's start with the basics, so you know how the codes work and what they do. it's pretty straightforward, but it's easier if you know what each code does, so you can create tables from scratch instead of copy-pasting entire templates without understanding how it works. this makes it easier to troubleshoot too!
xtable = the entire "table", like the entire workplace you want to work in ( you can create tables within tables ) tr = a new row td = a new box / column when you know how this works, it's a lot easier to play around with the codes ~ change width, change colors, add columns, etc. after you're done creating the table, you can format things within it ~ centering images, change fonts and sizes, aligning things, etc etc. ps!! you have to format things separately within each column!! |
|
ห โบ examplesโ
| this is bcenter, 600px width, background with no border. |
| this is bcenter, 900px width, background with no border. |
| this is not bcenter, 500px width, background with 10px border. |
| this is bcenter, 400px width, no background with 5px border. |
| this is bcenter, 400px width, no background, no border. x x x filler text to show the invisible box. x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x |
Last edited:
ห โบ ๐ฌ๐ข๐ฆ๐ฉ๐ฅ๐ ๐ญ๐๐๐ฅ๐๐ฌ
New
OP
OP
- Joined
- Aug 7, 2021
|
ห โบ simple tablesโ there are four ways to use the table for simplicity and to make your post look prettier than a standard non-table post. basically, this just puts your post / text in a box, either invisible, bordered, colored, or colored with a border. i'll show you how to do it.
you can use the table to create an invisible box for your post, like this:
you can even add a border around your text, like this:
or you can use a background color, like this: ( here i've used a table within a table to create the padding around the text ) please keep in mind that the width of the inner box has to be smaller than the outer box.
you can also add a border to this colored box, like this:
here you can see an example with pictures: you can format your content like normal inside the box, but you might have to go back into code-mode to correct a few things (line-jumps) before you publish.
|
[xtable=bcenter]{tr}{td=border:0|500pxx@}your content here.{/td}{/tr}[/xtable]code for invisible box with border:
[xtable=bcenter]{tr}{td=border:5|border-color:#d3aedd|500pxx@}your content here.{/td}{/tr}[/xtable]code for colored box (and padding):
[xtable=bcenter]{tr}{td=border:0|bcolor:#d3aedd|500pxx@}[xtable=bcenter]{tr}{td=border:0|450pxx@}your content here.{/td}{/tr}[/xtable]{/td}{/tr}[/xtable]code for colored box with border (and padding):
[xtable=bcenter]{tr}{td=border:7|border-color:#a376ca|bcolor:#d3aedd|500pxx@}[xtable=bcenter]{tr}{td=border:0|450pxx@}your content here.{/td}{/tr}[/xtable]{/td}{/tr}[/xtable]ps. if you don't want the box in the center of your post, just remove the bcenter code and make it
[xtable] instead.
Last edited:
ห โบ ๐ญ๐ฐ๐จ ๐๐จ๐ฅ๐ฎ๐ฆ๐ง๐ฌ ๐ญ๐๐๐ฅ๐๐ฌ
New
OP
OP
- Joined
- Aug 7, 2021
|
ห โบ two column tablesโ this is where it starts to look a little bit complicated, but it's actually very simple. so, this is how you can create tables that have two columns, aka two boxes next to each other or on top of each other. you can play around quite much with it, so let me show you a few options! but feel free to combine other options as well. first things first. let me just quickly explain how the two columns work and the difference between vertical and horizontal. it's easier to show it with colored boxes. and you can change the width of the boxes as you see fit! here you can see that we have one row { tr } and two columns { td } in that row :
to simplify it even more, we can look at the code like this : [ xtable = bcenter ] { tr } { td=border:0 | bcolor:#a376ca | 250pxx@ }{ /td }{ td=border:0 | bcolor:#d3aedd | 250pxx@ }{ /td } { /tr } [ /xtable ] here you can see that we have two rows { tr } and one column { td } in each row :
to simplify it even more, we can look at the code like this : [ xtable = bcenter ] { tr } { td=border:0 | bcolor:#a376ca | 500pxx@ }{ /td } { /tr } { tr } { td=border:0 | bcolor:#d3aedd | 500pxx@ }{ /td } { /tr } [ /xtable ] in this table i have placed two boxes next to each other like shown above, but i have also added a table within the second box so that i can get some padding around the text :
in this table i have stacked two boxes on top of each other like shown above, but i have also added a table within the second box so that i can get some padding around the text :
as you can see, you can play around quite a lot!
|
[xtable=bcenter]{tr}{td=border:0|bcolor:#a376ca|200pxx@}first box content{/td}{td=border:0|bcolor:#d3aedd|400pxx@}[xtable=bcenter]{tr}{td=border:0|350pxx@}second box content{/td}{/tr}[/xtable]{/td}{/tr}[/xtable]vertical code - two boxes stacked on top of each other (with padding at the bottom):
[xtable=bcenter]{tr}{td=border:0|bcolor:#a376ca|500pxx@}top box content{/td}{/tr}{tr}{td=border:0|bcolor:#d3aedd|500pxx@}[xtable=bcenter]{tr}{td=border:0|440pxx@}bottom box content{/td}{/tr}[/xtable]{/td}{/tr}[/xtable]
Last edited:
ห โบ ๐ฆ๐ฎ๐ฅ๐ญ๐ข๐ฉ๐ฅ๐ ๐๐จ๐ฅ๐ฎ๐ฆ๐ง๐ฌ ๐
New
OP
OP
- Joined
- Aug 7, 2021
|
ห โบ multiple columns 1โ this is to show you that you can create big tables with as many columns as you'd like. it's very simple, but it also has its limits. i'll explain them in a moment. but the main rule is that you must have the same number of columns in each row.
if you would like to have a different number of columns, you have to create a new table within a column ( in other words: a table within a table ). this is what happens if you try to create a different number of columns: this is the only way to work around it, but we'll get back to that in a future post ( tables within tables ) :
let's start with the basics again. you can add as many rows { tr } and columns { td } as you'd like. but keep in mind that the more you add, the more cluttered it will look (especially on phones). also, unless you make a table within table (i will make a proper post on that soon), you have to have the same number of columns in each row. it is also important to notice that if your widths don't add up, the table will automatically change them. if your first column is 200px, all columns under it will also be 200px. if you change this number to let's say 400px, all columns below ( or above ) this column will change to 400px, even tho the code for the other columns says it's 200px. in this last table, i have only changed the width of one column, but it automatically changes all columns above and below it, so keep this in mind when you change widths. in the example below, you can see that i have made one row { tr } with three columns { td }. however, the third column is just for aesthetics and basically just to add a line of color. |
|
|
|
in the example below, i've also added content to the third column.
|
|
|
|
|
here is an example with four columns in one row. if you wanna add more than this, you can't really add a lot of text as the columns will be very narrow. but you can definitely create more for aesthetic purposes, like i've done in the second example where i've added 3 more columns to separate the boxes (7 columns total).
|
|
|
|
|
|
|
|
|
|
here are some codes you can copy-paste! feel free to play around. i've added both with and without padding (table within table). change the widths as you see fit, but remember that the width within the column has to be smaller than the actual column if you want that padding around your text/content.
|
|
|
|
3 columns - no padding:
[xtable=bcenter]{tr}{td=border:0|bcolor:#a376ca|250pxx@}first box{/td}{td=border:0|bcolor:#d3aedd|400pxx@}second box{/td}{td=border:0|bcolor:#7037a1|250pxx@}third box{/td}{/tr}[/xtable]3 columns - with padding:
[xtable=bcenter]{tr}{td=border:0|bcolor:#a376ca|200pxx@}[xtable=bcenter]{tr}{td=border:0|160pxx@}first box{/td}{/tr}[/xtable]{/td}{td=border:0|bcolor:#d3aedd|200pxx@}[xtable=bcenter]{tr}{td=border:0|160pxx@}second box{/td}{/tr}[/xtable]{/td}{td=border:0|bcolor:#7037a1|200pxx@}[xtable=bcenter]{tr}{td=border:0|160pxx@}third box{/td}{/tr}[/xtable]{/td}{/tr}[/xtable]to add invisible space between boxes, you can paste this code in-between two columns, like this: { /td } paste it here { td }. the minimum width is 20px, but you can make it wider if you'd like.
{td=border:0|20pxx@}{/td}
|
|
|
|
4 columns - no padding:
[xtable=bcenter]{tr}{td=border:0|bcolor:#a376ca|200pxx@}first box{/td}{td=border:0|bcolor:#d3aedd|200pxx@}second box{/td}{td=border:0|bcolor:#7037a1|200pxx@}third box{/td}{td=border:0|bcolor:#a376ca|200pxx@}fourth box{/td}{/tr}[/xtable]4 columns - with padding:
[xtable=bcenter]{tr}{td=border:0|bcolor:#a376ca|200pxx@}[xtable=bcenter]{tr}{td=border:0|160pxx@}first box{/td}{/tr}[/xtable]{/td}{td=border:0|bcolor:#d3aedd|200pxx@}[xtable=bcenter]{tr}{td=border:0|160pxx@}second box{/td}{/tr}[/xtable]{/td}{td=border:0|bcolor:#7037a1|200pxx@}[xtable=bcenter]{tr}{td=border:0|160pxx@}third box{/td}{/tr}[/xtable]{/td}{td=border:0|bcolor:#a376ca|200pxx@}[xtable=bcenter]{tr}{td=border:0|160pxx@}fourth box{/td}{/tr}[/xtable]{/td}{/tr}[/xtable][ xtable=bcenter ] โโคโ the start of the table we're creating
{ tr } โโคโ we're creating the first row
{ td=border:0 | bcolor:#a376ca | 200pxx@ } โโคโ this is the first column
[ xtable=bcenter ]{ tr }{ td=border:0 | 160pxx@ } first box content { /td }{ /tr }[ /xtable ] โโคโ creating a table within the first column to create padding around the content
{ /td }โ โค โend of first column
{td=border:0|20pxx@}{/td} โโคโ if you want invisible space between the boxes, you put this column after column 1 end and before column 2 starts, and then the same between 2 and 3, 3 and 4
{ td=border:0 | bcolor:#d3aedd | 200pxx@ }โ โคโ start of second column
{td=border:0|20pxx@}{/td} โโคโ if you want invisible space between the boxes, you put this column after column 1 end and before column 2 starts, and then the same between 2 and 3, 3 and 4
{ td=border:0 | bcolor:#d3aedd | 200pxx@ }โ โคโ start of second column
[ xtable=bcenter ]{ tr }{ td=border:0 | 160pxx@ } second box content { /td }{ /tr }[ /xtable ] โโคโ the table within the second column to create the padding around the content of this column
{ /td } โโค โend of second column
{ td=border:0 | bcolor:#7037a1 | 200pxx@ } โโคโ start of third column
{ td=border:0 | bcolor:#7037a1 | 200pxx@ } โโคโ start of third column
[ xtable=bcenter ]{ tr }{ td=border:0 | 160pxx@ } third box content { /td }{ /tr }[ /xtable ] โโคโ table to create the padding around third column content
{ /td } โโคโ end of third column
{ td=border:0 | bcolor:#a376ca | 200pxx@ }โ โคโ start of fourth column
{ td=border:0 | bcolor:#a376ca | 200pxx@ }โ โคโ start of fourth column
[ xtable=bcenter ]{ tr }{ td=border:0 | 160pxx@ } fourth box content { /td }{ /tr }[ /xtable ]โโคโ table within fourth column for padding
{ /td } โโคโ end of fourth column
{ /tr }โ โค โend of the first row
[ /xtable ] โโค โend of table
ห โบ ๐ฆ๐ฎ๐ฅ๐ญ๐ข๐ฉ๐ฅ๐ ๐๐จ๐ฅ๐ฎ๐ฆ๐ง๐ฌ ๐
New
OP
OP
- Joined
- Aug 7, 2021
|
ห โบ multiple columns 2โ let's continue with multiple columns, but this time make them vertical. again, you'll have to add the same number of columns in each row.
if you would like to have a different number of columns, you have to create a new table within a column ( in other words: a table within a table ). see the examples above of what will happen if you do this wrong and how it would look if done right. let's repeat the basics again. you can add as many rows { tr } and columns { td } as you'd like. but keep in mind that the more you add, the more cluttered it will look (especially on phones). also, unless you make a table within a table (i will make a proper post on that soon), you have to have the same number of columns in each row. it is also important to notice that if your widths don't add up, the table will automatically change them. if your first column is 200px, all columns under it will also be 200px. if you change this number to let's say 400px, all columns below ( or above ) this column will change to 400px, even tho the code for the other columns says it's 200px. in this last table, i have only changed the width of one column, but it automatically changes all columns above and below it, so keep this in mind when you change widths. in the example below, you can see that i have made three rows { tr } with one column { td } in each row. however, the third row is just for aesthetics and basically just adds a line of color. |
|
|
|
|
|
in the example below, i've also added content to the third column.
|
|
|
|
|
|
Nunc pharetra mi nibh, non blandit diam faucibus in. |
|
here are some codes you can copy-paste! feel free to play around. i've added both with and without padding (table within table). change the widths as you see fit, but remember that the width within the column has to be smaller than the actual column if you want that padding around your text/content.
|
[xtable=bcenter]{tr}{td=border:0|bcolor:#a376ca|600pxx@}first box{/td}{/tr}{tr}{td=border:0|bcolor:#d3aedd|600pxx@}second box{/td}{/tr}[/xtable]|
|
|
|
|
[xtable=bcenter]{tr}{td=border:0|bcolor:#a376ca|600pxx@}
[xtable=bcenter]{tr}{td=border:0|bcolor:#ffffff|550pxx@}first box{/td}{/tr}[/xtable]{/td}{/tr}{tr}{td=border:0|bcolor:#d3aedd|600pxx@}
[xtable=bcenter]{tr}{td=border:0|bcolor:#ffffff|550pxx@}second box{/td}{/tr}[/xtable]{/td}{/tr}[/xtable][xtable=bcenter]{tr}{td=border:0|bcolor:#7037a1|600pxx@}first box{/td}{/tr}{tr}{td=border:0|bcolor:#d3aedd|600pxx@}second box{/td}{/tr}{tr}{td=border:0|bcolor:#a376ca|600pxx@}third box{/td}{/tr}[/xtable]|
|
|
|
|
|
|
|
[xtable=bcenter]{tr}{td=border:0|bcolor:#7037a1|600pxx@}
[xtable=bcenter]{tr}{td=border:0|bcolor:#ffffff|550pxx@}first box{/td}{/tr}[/xtable]{/td}{/tr}{tr}{td=border:0|bcolor:#d3aedd|600pxx@}
[xtable=bcenter]{tr}{td=border:0|bcolor:#ffffff|550pxx@}second box{/td}{/tr}[/xtable]{/td}{/tr}{tr}{td=border:0|bcolor:#a376ca|600pxx@}
[xtable=bcenter]{tr}{td=border:0|bcolor:#ffffff|550pxx@}third box{/td}{/tr}[/xtable]{/td}{/tr}[/xtable]