˖ ⁺ XTABLES — 𝐚 𝐪𝐮𝐢𝐜𝐤 𝐠𝐮𝐢𝐝𝐞.

[reverie.]

ps. this is not finished yet, but i am currently working on it!
please do not post in this thread, thank you<3​

˖ ⁺ a quick guide to xtables. hi lovelies! ♥ i'm sure you have stumbled upon some pretty roleplaying templates or some cool request threads or journal posts. a lot of you have been wondering how to make them and have messaged me about it, so here is my perfectly imperfect guide on how to use the xtables! please understand that you can only do so much with these tables, so the templates you create will look more or less the same as everyone else's. keep that in mind before you accuse someone of stealing your code. we can only inspire each other to create beautiful posts! also, using the xtable code can cause a lot of trouble when also using bbcodes/formatting, especially if you go back and forth between code-mode and the panel. so be very very very cautious when doing so. chances are you might need to fix minor things in code-mode before you hit publish. should you stumble upon problems, feel free to message me ~ i'm pretty sure i can tell you what is wrong, eheh. most often it's broken code because you have added bbcode/formatting (e.g. size, font, color, alignments) across columns or tables, so the xtable code is breaking it up. i hope this guide can help you! ♥ let me know if something is unclear pls. ​ ˖ ⁺ contents. ⁺ ˖ here are a few shortcuts. ​   𝐭𝐡𝐞 𝐛𝐚𝐬𝐢𝐜𝐬     𝐬𝐢𝐦𝐩𝐥𝐞 𝐭𝐚𝐛𝐥𝐞𝐬     𝐭𝐰𝐨 𝐜𝐨𝐥𝐮𝐦𝐧𝐬 𝐭𝐚𝐛𝐥𝐞𝐬     𝐦𝐮𝐥𝐭𝐢𝐩𝐥𝐞 𝐜𝐨𝐥𝐮𝐦𝐧𝐬 𝟏     𝐦𝐮𝐥𝐭𝐢𝐩𝐥𝐞 𝐜𝐨𝐥𝐮𝐦𝐧𝐬 𝟐     𝐟𝐥𝐨𝐚𝐭𝐢𝐧𝐠 𝐭𝐚𝐛𝐥𝐞𝐬 𝟏   ​

 

[reverie.]

˖ ⁺ 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! here is the breakdown of how the xtable works; the very basics of how to create one. e x a m p l e : [ xtable = bcenter ] { tr } { td = border:0 | border-color:#f4f4f4 | bcolor:#de89dd | 600pxx@ } xtable = the entire "table" ~ like the entire workplace you want to work in ( you can create tables within tables or "line them up" next to each other by using floatleft-code ) tr = a new row td = a new box / column and then you must end the code: { /td } { /tr } [ /xtable ] 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 (font, size, color, alignments, etc) separately within each column / box / { td } !!​

now, let's take a look at all the options you have when you're creating a table. or really, these are options for the column / box, because you have to make edits within the { td } - code. e x a m p l e : [ xtable = bcenter ] { tr } { td = border:0 | border-color:#f4f4f4 | bcolor:#de89dd | 600pxx@ } 600pxx@ = the width of the box / column​ bcenter = centering the box / column ( the table ) in your post ( ps. this does not affect the content inside the box ). if you remove this it will appear to the left. bcolor = the background color of the box / column. use the hex ( # + 6 digits ) of the color you want. you can click here to pick a color. this code is not necessary if you want a clear background (if so, you delete the entire phrase) border = pick a number between 1 - 10 to create a border around the box / column or stick to 0 if you don't want a border. border-color = color of the border around the box / column. if you create a border but don't add a color, your border will automatically be black. if you don't want a border, you can delete this part of the code, but you must leave the border:0 code. ​

˖ ⁺ examples ​

this is bcenter, 600px width, background with no border.

[xtable=bcenter]{tr}{td=border:0|bcolor:#d3aedd|600pxx@} e x a m p l e {/td}{/tr}[/xtable]​

  

this is bcenter, 900px width, background with no border.

[xtable=bcenter]{tr}{td=border:0|bcolor:#d3aedd|900pxx@} e x a m p l e {/td}{/tr}[/xtable]​

  

this is not bcenter, 500px width, background with 10px border.

[xtable]{tr}{td=border:10|border-color:#a376ca|bcolor:#d3aedd|500pxx@} e x a m p l e {/td}{/tr}[/xtable]
  

this is bcenter, 400px width, no background with 5px border.

[xtable=bcenter]{tr}{td=border:5|border-color:#a376ca|400pxx@} e x a m p l e {/td}{/tr}[/xtable]​

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

[xtable=bcenter]{tr}{td=border:0|400pxx@} e x a m p l e {/td}{/tr}[/xtable]​

 

[reverie.]

˖ ⁺ 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. feel free to copy the codes and tweak them to your liking!

you can use the table to create an invisible box for your post, like this:

Curabitur iaculis sapien id pulvinar dictum. In rhoncus, enim nec dictum tincidunt, nisl est consectetur magna, vel pretium neque velit sed arcu. Vivamus vulputate ipsum nec nulla semper sagittis. Nunc sit amet dignissim sapien. Suspendisse vel dolor lacinia, feugiat purus a, porta augue. Nulla pharetra diam quis elementum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat lorem et massa dapibus, sit amet ultrices massa ullamcorper.​

[xtable=border:0|bcenter]{tr}{td=border:0|600pxx@} e x a m p l e {/td}{/tr}[/xtable]​

you can even add a border around your text, like this:

Curabitur iaculis sapien id pulvinar dictum. In rhoncus, enim nec dictum tincidunt, nisl est consectetur magna, vel pretium neque velit sed arcu. Vivamus vulputate ipsum nec nulla semper sagittis. Nunc sit amet dignissim sapien. Suspendisse vel dolor lacinia, feugiat purus a, porta augue. Nulla pharetra diam quis elementum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat lorem et massa dapibus, sit amet ultrices massa ullamcorper.​

[xtable=bcenter]{tr}{td=border:5|border-color:#d3aedd|600pxx@} e x a m p l e {/td}{/tr}[/xtable]​

or you can use a background color, like this: ➤ ps. 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 table has to be smaller than the outer table

Curabitur iaculis sapien id pulvinar dictum. In rhoncus, enim nec dictum tincidunt, nisl est consectetur magna, vel pretium neque velit sed arcu. Vivamus vulputate ipsum nec nulla semper sagittis. Nunc sit amet dignissim sapien. Suspendisse vel dolor lacinia, feugiat purus a, porta augue. Nulla pharetra diam quis elementum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat lorem et massa dapibus, sit amet ultrices massa ullamcorper.​

[xtable=bcenter]{tr}{td=border:0|bcolor:#d3aedd|600pxx@}[xtable=bcenter]{tr}{td=border:0|550pxx@} e x a m p l e {/td}{/tr}[/xtable]{/td}{/tr}[/xtable]

 [ xtable=bcenter ]{ tr }{ td=border:0|bcolor:#d3aedd|600pxx@ }   [ xtable=bcenter ]{ tr }{ td=border:0|550pxx@ }   e x a m p l e   { /td }{ /tr }[ /xtable ]   { /td }{ /tr }[ /xtable ] 
here you can see that the  outer table is 600px  wide and the  inner table is 550px wide.​

click to understand the padding

Outer table Inner table ​

you can also add a border to this colored box, like this:

Curabitur iaculis sapien id pulvinar dictum. In rhoncus, enim nec dictum tincidunt, nisl est consectetur magna, vel pretium neque velit sed arcu. Vivamus vulputate ipsum nec nulla semper sagittis. Nunc sit amet dignissim sapien. Suspendisse vel dolor lacinia, feugiat purus a, porta augue. Nulla pharetra diam quis elementum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat lorem et massa dapibus, sit amet ultrices massa ullamcorper.​

[xtable=bcenter]{tr}{td=border:7|border-color:#7950c3|bcolor:#d3aedd|600pxx@}[xtable=bcenter]{tr}{td=border:0|550pxx@} e x a m p l e {/td}{/tr}[/xtable]{/td}{/tr}[/xtable]​

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 (like unwanted line-jumps before text) before you hit publish.

believe in your dreams.​ Curabitur iaculis sapien id pulvinar dictum. In rhoncus, enim nec dictum tincidunt, nisl est consectetur magna, vel pretium neque velit sed arcu. Vivamus vulputate ipsum nec nulla semper sagittis. Nunc sit amet dignissim sapien. Suspendisse vel dolor lacinia, feugiat purus a, porta augue. Nulla pharetra diam quis elementum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat lorem et massa dapibus, sit amet ultrices massa ullamcorper.​

click to understand the padding

believe in your dreams.​ Curabitur iaculis sapien id pulvinar dictum. In rhoncus, enim nec dictum tincidunt, nisl est consectetur magna, vel pretium neque velit sed arcu. Vivamus vulputate ipsum nec nulla semper sagittis. Nunc sit amet dignissim sapien. Suspendisse vel dolor lacinia, feugiat purus a, porta augue. Nulla pharetra diam quis elementum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat lorem et massa dapibus, sit amet ultrices massa ullamcorper.​

ps. if you don't want the table / box to be centered in your post, just remove the bcenter code and let it say [ xtable ] instead.

 

[reverie.]

˖ ⁺ 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 a lot with it, so let me show you a few options! but feel free to combine different 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! ps. if you want to add content to more than two (2) columns in one row, you have to use the [ floatleft ] code to make it readable on phone. i will explain how this works in a future post.​ feel free to copy the codes at the bottom of this post and tweak them to your liking! here you can see that we have one row {  tr  } and two columns {  td  } in that row :    column 1 ​    column 2 ​

[ xtable = bcenter ] {  tr  } {  td =border:0 | bcolor:#a376ca | 300pxx@ } column 1 {  /td  } {  td =border:0 | bcolor:#d3aedd | 300pxx@ } column 2 {  /td  } {  /tr  } [ /xtable ]​

to simplify it even more, we can look at the code like this : [ xtable = bcenter ] {  tr  } {  td =border:0 | bcolor:#a376ca | 300pxx@ } column 1 {  /td  } {  td =border:0 | bcolor:#d3aedd | 300pxx@ } column 2 {  /td  } {  /tr  } [ /xtable ]

here you can see that we have two rows {  tr  } and one column {  td  } in each row :    column 1 ​      column 2 ​

[ xtable = bcenter ] {  tr  } {  td =border:0 | bcolor:#a376ca | 300pxx@ } column 1 {  /td  } {  /tr  } {  tr  } {  td =border:0 | bcolor:#d3aedd | 300pxx@ } column 2 {  /td  } {  /tr  } [ /xtable ]​

to simplify it even more, we can look at the code like this : [ xtable = bcenter ] {  tr  } {  td =border:0 | bcolor:#a376ca | 300pxx@ } column 1 {  /td  } {  /tr  } {  tr  } {  td =border:0 | bcolor:#d3aedd | 300pxx@ } column 2 {  /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 :    dream big.​    Curabitur iaculis sapien id pulvinar dictum. In rhoncus, enim nec dictum tincidunt, nisl est consectetur magna, vel pretium neque velit sed arcu. Vivamus vulputate ipsum nec nulla semper sagittis. Nunc sit amet dignissim sapien. Suspendisse vel dolor lacinia, feugiat purus a, porta augue. Nulla pharetra diam quis elementum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat lorem et massa dapibus, sit amet ultrices massa ullamcorper.​

click here to understand the padding

dream big.​

Curabitur iaculis sapien id pulvinar dictum. In rhoncus, enim nec dictum tincidunt, nisl est consectetur magna, vel pretium neque velit sed arcu. Vivamus vulputate ipsum nec nulla semper sagittis. Nunc sit amet dignissim sapien. Suspendisse vel dolor lacinia, feugiat purus a, porta augue. Nulla pharetra diam quis elementum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat lorem et massa dapibus, sit amet ultrices massa ullamcorper.​

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 :    dream big.​    Curabitur iaculis sapien id pulvinar dictum. In rhoncus, enim nec dictum tincidunt, nisl est consectetur magna, vel pretium neque velit sed arcu. Vivamus vulputate ipsum nec nulla semper sagittis. Nunc sit amet dignissim sapien. Suspendisse vel dolor lacinia, feugiat purus a, porta augue. Nulla pharetra diam quis elementum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat lorem et massa dapibus, sit amet ultrices massa ullamcorper.​

click here to understand the padding

dream big.​

Curabitur iaculis sapien id pulvinar dictum. In rhoncus, enim nec dictum tincidunt, nisl est consectetur magna, vel pretium neque velit sed arcu. Vivamus vulputate ipsum nec nulla semper sagittis. Nunc sit amet dignissim sapien. Suspendisse vel dolor lacinia, feugiat purus a, porta augue. Nulla pharetra diam quis elementum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat lorem et massa dapibus, sit amet ultrices massa ullamcorper.​

as you can see, you can play around quite a lot!    dream big.​    Curabitur iaculis sapien id pulvinar dictum. In rhoncus, enim nec dictum tincidunt, nisl est consectetur magna, vel pretium neque velit sed arcu. Vivamus vulputate ipsum nec nulla semper sagittis. Nunc sit amet dignissim sapien. Suspendisse vel dolor lacinia, feugiat purus a, porta augue. Nulla pharetra diam quis elementum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat lorem et massa dapibus, sit amet ultrices massa ullamcorper.​    dream big.​    Curabitur iaculis sapien id pulvinar dictum. In rhoncus, enim nec dictum tincidunt, nisl est consectetur magna, vel pretium neque velit sed arcu. Vivamus vulputate ipsum nec nulla semper sagittis. Nunc sit amet dignissim sapien. Suspendisse vel dolor lacinia, feugiat purus a, porta augue. Nulla pharetra diam quis elementum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat lorem et massa dapibus, sit amet ultrices massa ullamcorper.​

horizontal code - two boxes placed next to each other (with padding to the right):
[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]

 

[reverie.]

˖ ⁺ multiple columns 1 ​ this is to show you that you can create big tables with as many columns as you'd like. it's actually 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. unless we work around this; i will show you how further down. so, if you would like to have a different number of columns, you have to create a new table within a column / box ( 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 ) : click here or this, which is even better 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) ~~ unless you work around this by using [ floatleft ], but we'll get back to that later. also, unless you make a table within table (i will make a proper post on that soon), you must 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 wide, all columns under it will also be 200px wide. 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 200px. take a look here to understand what i'm talking about here you can see that all widths are 200px: [ xtable=bcenter ]{ tr }{ td=border:0 | bcolor:#a376ca | 200pxx@ }{ /td }{ td=border:0 | bcolor:#d3aedd | 200pxx@ }{ /td }{ /tr }{ tr }{ td=border:0 | bcolor:#d3aedd | 200pxx@ }{ /td }{ td=border:0 | bcolor:#7037a1 | 200pxx@ }{ /td }{ /tr }[ /xtable ] in the table below, 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. [ xtable=bcenter ]{ tr }{ td=border:0 | bcolor:#a376ca | 200pxx@ }{ /td }{ td=border:0 | bcolor:#d3aedd | 200pxx@ }{ /td }{ /tr }{ tr }{ td=border:0 | bcolor:#d3aedd | 400pxx@ }{ /td }{ td=border:0 | bcolor:#7037a1 | 200pxx@ }{ /td }{ /tr }{ tr }{ td=border:0 | bcolor:#d3aedd | 200pxx@ }{ /td }{ td=border:0 | bcolor:#7037a1 | 200pxx@ }{ /td }{ /tr }[ /xtable ] 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.​

click to see the columns

1

2

3

dream big. Mauris a id velit faucibus sollicitudin. Sed congue libero sed nisi lobortis sodales. Quisque id neque mollis, varius nisl vitae, fermentum dui. Fusce fermentum mattis turpis eget lacinia. Nunc pharetra mi nibh, non blandit diam faucibus in. Phasellus eget sapien vitae sapien bibendum commodo ut vel metus. ​

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ligula vulputate, gravida massa sed, hendrerit massa. Proin cursus bibendum efficitur. Morbi id urna vitae turpis ullamcorper pretium. Quisque vitae augue a orci euismod faucibus quis eget ex. Vivamus sed eleifend dui. Ut nunc quam, aliquet non venenatis nec, feugiat scelerisque augue. Suspendisse posuere eget odio dignissim ultricies. Sed quis facilisis eros. Aliquam erat volutpat. Aenean finibus aliquet eros id tincidunt. In tincidunt, eros vitae ultrices bibendum, lectus neque molestie diam, non gravida purus nisi eget sapien. Vestibulum vehicula pharetra ipsum nec efficitur. Etiam nec mollis urna. Cras fringilla ex ac luctus sodales. Mauris ut lorem sit amet odio imperdiet volutpat at quis quam. Sed fringilla nisi nec turpis imperdiet dapibus. Quisque augue urna, luctus nec urna at, semper mattis mi. Nulla maximus hendrerit nulla. Mauris in erat at felis hendrerit consequat iaculis et metus. Etiam porttitor dolor ac dui consectetur tincidunt. Cras lectus enim, luctus sed sagittis venenatis, consectetur in nisl. Praesent ligula lorem, dapibus vel imperdiet placerat, consectetur vel odio. Nullam mattis vel tellus sit amet blandit.​

in the code below you can see that the first and second box have padding, so a table within a table to create some space around the content / text. i have highlighted the code that belongs to each column / box.

[ xtable=bcenter ] { tr }  { td = border:0 | bcolor:#a376ca | 250pxx@ } [ xtable=bcenter ] { tr } { td = border:0 | bcolor:#a376ca | 200pxx@ } 1 { /td } { /tr } [ /xtable ] { /td }   { td = border:0 | bcolor:#d3aedd | 400pxx@ } [ xtable=bcenter ] { tr } { td = border:0 | bcolor:#d3aedd | 350pxx@ } 2 { /td } { /tr } [ /xtable ] { /td }   { td = border:0 | bcolor:#7037a1 | 20pxx@ } 3 { /td }  { /tr } [ /xtable ]

this is how it will look like on your phone

as you can see, it fits the screen, but the columns are pretty narrow ~ but you're still able to read it.
if you add content to more than two columns, it will look pretty awful on your phone ~ unless you use [ floatleft ] which i will teach you later.

if you wanna play around with the code, feel free to copy this:

[xtable=bcenter]{tr}{td=border:0|bcolor:#a376ca|250pxx@}[xtable=bcenter]{tr}{td=border:0|bcolor:#a376ca|200pxx@} o n e {/td}{/tr}[/xtable]{/td}{td=border:0|bcolor:#d3aedd|400pxx@}[xtable=bcenter]{tr}{td=border:0|bcolor:#d3aedd|350pxx@} t w o {/td}{/tr}[/xtable]{/td}{td=border:0|bcolor:#7037a1|20pxx@} t h r e e {/td}{/tr}[/xtable]

if you want to create columns that don't have any content, you just delete the text in it, so it looks like this: . . . . { td = .... } { /td } . . . .

 

[reverie.]

˖ ⁺ 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 in each row, you have to create a new table within a column ( in other words: a table within a table ). i will get back to this in a future post. see the examples in the previous post of what will happen if you do this wrong and how it would look if done right. codes are at the bottom of this post. 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.​

click to see the rows

o n e​

t w o​

t h r e e​

dream big.  Mauris a id velit faucibus sollicitudin. ​

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ligula vulputate, gravida massa sed, hendrerit massa. Proin cursus bibendum efficitur. Morbi id urna vitae turpis ullamcorper pretium. Quisque vitae augue a orci euismod faucibus quis eget ex. Vivamus sed eleifend dui. Ut nunc quam, aliquet non venenatis nec, feugiat scelerisque augue. Suspendisse posuere eget odio dignissim ultricies. Sed quis facilisis eros. Aliquam erat volutpat. Aenean finibus aliquet eros id tincidunt. In tincidunt, eros vitae ultrices bibendum, lectus neque molestie diam, non gravida purus nisi eget sapien. Vestibulum vehicula pharetra ipsum nec efficitur. Etiam nec mollis urna. Cras fringilla ex ac luctus sodales. Mauris ut lorem sit amet odio imperdiet volutpat at quis quam. Sed fringilla nisi nec turpis imperdiet dapibus. Quisque augue urna, luctus nec urna at, semper mattis mi. Nulla maximus hendrerit nulla. Mauris in erat at felis hendrerit consequat iaculis et metus. Etiam porttitor dolor ac dui consectetur tincidunt. Cras lectus enim, luctus sed sagittis venenatis, consectetur in nisl. Praesent ligula lorem, dapibus vel imperdiet placerat, consectetur vel odio. Nullam mattis vel tellus sit amet blandit.​

in the code below you can see that the first and second box have padding, so a table within a table to create some space around the content / text. i have highlighted the code that belongs to each column / box.

[ xtable=bcenter ]  { tr }{ td = border:0 | bcolor:#a376ca | 600pxx@ }[ xtable=bcenter ]{ tr }{ td = border:0 | bcolor:#a376ca | 250pxx@ } o n e { /td }{ /tr }[ /xtable ]{ /td }{ /tr }   { tr }{ td = border:0 | bcolor:#d3aedd | 600pxx@ }[ xtable=bcenter ]{ tr }{ td = border:0 | bcolor:#d3aedd | 550pxx@ } t w o { /td }{ /tr }[ /xtable ]{ /td }{ /tr }   { tr }{ td = border:0 | bcolor:#7037a1 |20pxx@ } t h r e e { /td }{ /tr }  [ /xtable ]

this is how it will look like on your phone

when you're only working with one column per row, it will always look pretty nice on phones.

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 of the table within the column has to be smaller than the actual column if you want that nice padding around your text / content.​

2 rows, 1 column per row - without padding:
[xtable=bcenter]{tr}{td=border:0|bcolor:#a376ca|600pxx@} o n e {/td}{/tr}{tr}{td=border:0|bcolor:#d3aedd|600pxx@} t w o {/td}{/tr}[/xtable]

click to see how it looks

2 rows, 1 column per row - with padding:
[xtable=bcenter]{tr}{td=border:0|bcolor:#a376ca|600pxx@} [xtable=bcenter]{tr}{td=border:0|bcolor:#ffffff|550pxx@} o n e {/td}{/tr}[/xtable]{/td}{/tr}{tr}{td=border:0|bcolor:#d3aedd|600pxx@} [xtable=bcenter]{tr}{td=border:0|bcolor:#ffffff|550pxx@} t w o {/td}{/tr}[/xtable]{/td}{/tr}[/xtable]

click to see how it looks

3 rows, 1 column per row - without padding:
[xtable=bcenter]{tr}{td=border:0|bcolor:#7037a1|600pxx@} o n e {/td}{/tr}{tr}{td=border:0|bcolor:#d3aedd|600pxx@} t w o {/td}{/tr}{tr}{td=border:0|bcolor:#a376ca|600pxx@} t h r e e {/td}{/tr}[/xtable]

click to see how it looks

3 rows, 1 column per row - with padding:
[xtable=bcenter]{tr}{td=border:0|bcolor:#7037a1|600pxx@} [xtable=bcenter]{tr}{td=border:0|bcolor:#ffffff|550pxx@} o n e {/td}{/tr}[/xtable]{/td}{/tr}{tr}{td=border:0|bcolor:#d3aedd|600pxx@} [xtable=bcenter]{tr}{td=border:0|bcolor:#ffffff|550pxx@} t w o {/td}{/tr}[/xtable]{/td}{/tr}{tr}{td=border:0|bcolor:#a376ca|600pxx@} [xtable=bcenter]{tr}{td=border:0|bcolor:#ffffff|550pxx@} t h r e e {/td}{/tr}[/xtable]{/td}{/tr}[/xtable]

click to see how it looks

 

[reverie.]

˖ ⁺ floating tables 1 ​ before we jump into tables within tables, i just want to go over floating tables as this will come in handy when you play around with it. this is when we use the [ floatleft ] code to "stack" the tables (columns rly) next to each other. now, this might sound a bit counter-productive after what i've taught you above, but i promise that this is the best way to do it if you want your post to be readable on phones and tablets ( let's be honest, a lot of us read stuff on our phones ). i will show you examples further down. because this is not necessary for all tables. you should only use [ floatleft ] when you're creating an "equal amount" of content in two or more horizontal columns/boxes. to clarify, you don't have to use floating tables if you create tables similar to the ones in the previous posts, because these are very much readable on your phone. it's only when you put a lot of information / text in several horizontal columns that it gets difficult to read / view on phones. codes will be in the next post. this is for understanding. let me show you some examples first, so you know what we're working with. it can be a real pain in the ass. because this looks pretty on your pc, right?​

dream big. Mauris a id velit faucibus sollicitudin. Sed congue libero sed nisi lobortis sodales. Quisque id neque mollis, varius nisl vitae, fermentum dui. Fusce fermentum mattis turpis eget lacinia. Nunc pharetra mi nibh, non blandit diam faucibus in. Phasellus eget sapien vitae sapien bibendum commodo ut vel metus. ​

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ligula vulputate, gravida massa sed, hendrerit massa. Proin cursus bibendum efficitur. Morbi id urna vitae turpis ullamcorper pretium. Quisque vitae augue a orci euismod faucibus quis eget ex. Vivamus sed eleifend dui. Ut nunc quam, aliquet non venenatis nec, feugiat scelerisque augue. Suspendisse posuere eget odio dignissim ultricies. Sed quis facilisis eros. Aliquam erat volutpat. Aenean finibus aliquet eros id tincidunt. In tincidunt, eros vitae ultrices bibendum, lectus neque molestie diam, non gravida purus nisi eget sapien. Vestibulum vehicula pharetra ipsum nec efficitur. Etiam nec mollis urna. Cras fringilla ex ac luctus sodales. Mauris ut lorem sit amet odio imperdiet volutpat at quis quam. Sed fringilla nisi nec turpis imperdiet dapibus. Quisque augue urna, luctus nec urna at, semper mattis mi. Nulla maximus hendrerit nulla. Mauris in erat at felis hendrerit consequat iaculis et metus. Etiam porttitor dolor ac dui consectetur tincidunt. Cras lectus enim, luctus sed sagittis venenatis, consectetur in nisl. Praesent ligula lorem, dapibus vel imperdiet placerat, consectetur vel odio. Nullam mattis vel tellus sit amet blandit.​

favorite. Sed congue libero sed nisi lobortis sodales. Quisque id neque mollis, varius nisl vitae, fermentum dui. Fusce fermentum mattis turpis eget lacinia. Nunc pharetra mi nibh, non blandit diam faucibus in. Phasellus eget sapien vitae sapien bibendum commodo ut vel metus. ​ yes pls. Mauris a id velit faucibus sollicitudin. Sed congue libero sed nisi lobortis sodales. Quisque id neque mollis, varius nisl vitae, fermentum dui. Fusce fermentum mattis turpis eget lacinia. Nunc pharetra mi nibh, non blandit diam faucibus in. Phasellus eget sapien vitae sapien bibendum commodo ut vel metus. ​ maybe. Quisque id neque mollis, varius nisl vitae, fermentum dui. Fusce fermentum mattis turpis eget lacinia. Nunc pharetra mi nibh, non blandit diam faucibus in. Phasellus eget sapien vitae sapien bibendum commodo ut vel metus. ​ no thx. Sed congue libero sed nisi lobortis sodales. Quisque id neque mollis, varius nisl vitae, fermentum dui. Fusce fermentum mattis turpis eget lacinia. Nunc pharetra mi nibh, non blandit diam faucibus in. Phasellus eget sapien vitae sapien bibendum commodo ut vel metus. ​

this is what it will look like on phones

it is still somewhat readable, but it's not easy on the eyes and it doesn't really look good.
imagine what it will look like with one more column. . . or with a table within a table.

let me show you an example where i've added a table within a table to create two columns within the center column ~ it looks extremely messy on phones and it is a pain in the ass to read as the columns stretch out. this is the example underneath without using floating tables.​

click to see how more columns will look like on phones

it is still somewhat readable, but imagine trying to read that main text from top to bottom. . . you'd have to scroll all the way down, only to scroll all the way up again.
reading word for word. . . soo, it's a lot easier to read stuff if it looks more similar to the original code on your pc.

now let me show you how the floating tables actually work. this looks pretty cool on your pc too, right? click the spoiler underneath to see how much easier it is to read this on your phone than the previous examples.​

dream big. Mauris a id velit faucibus sollicitudin. Sed congue libero sed nisi lobortis sodales. Quisque id neque mollis, varius nisl vitae, fermentum dui. Fusce fermentum mattis turpis eget lacinia. Nunc pharetra mi nibh, non blandit diam faucibus in. Phasellus eget sapien vitae sapien bibendum commodo ut vel metus. ​   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ligula vulputate, gravida massa sed, hendrerit massa. Proin cursus bibendum efficitur. Morbi id urna vitae turpis ullamcorper pretium. Quisque vitae augue a orci euismod faucibus quis eget ex. Vivamus sed eleifend dui. Ut nunc quam, aliquet non venenatis nec, feugiat scelerisque augue. Suspendisse posuere eget odio dignissim ultricies. Sed quis facilisis eros. Aliquam erat volutpat. Aenean finibus aliquet eros id tincidunt. In tincidunt, eros vitae ultrices bibendum, lectus neque molestie diam, non gravida purus nisi eget sapien. Vestibulum vehicula pharetra ipsum nec efficitur. Etiam nec mollis urna. Cras fringilla ex ac luctus sodales. Mauris ut lorem sit amet odio imperdiet volutpat at quis quam. Sed fringilla nisi nec turpis imperdiet dapibus. Quisque augue urna, luctus nec urna at, semper mattis mi. Nulla maximus hendrerit nulla. Mauris in erat at felis hendrerit consequat iaculis et metus. Etiam porttitor dolor ac dui consectetur tincidunt.​ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ligula vulputate, gravida massa sed, hendrerit massa. Proin cursus bibendum efficitur. Morbi id urna vitae turpis ullamcorper pretium. Quisque vitae augue a orci euismod faucibus quis eget ex. Vivamus sed eleifend dui. Ut nunc quam, aliquet non venenatis nec, feugiat scelerisque augue. Suspendisse posuere eget odio dignissim ultricies. Sed quis facilisis eros. Aliquam erat volutpat. Aenean finibus aliquet eros id tincidunt. In tincidunt, eros vitae ultrices bibendum, lectus neque molestie diam, non gravida purus nisi eget sapien. Vestibulum vehicula pharetra ipsum nec efficitur. Etiam nec mollis urna. Cras fringilla ex ac luctus sodales. Mauris ut lorem sit amet odio imperdiet volutpat at quis quam. Sed fringilla nisi nec turpis imperdiet dapibus. Quisque augue urna, luctus nec urna at, semper mattis mi. Nulla maximus hendrerit nulla. Mauris in erat at felis hendrerit consequat iaculis et metus. Etiam porttitor dolor ac dui consectetur tincidunt. ​ favorite. Sed congue libero sed nisi lobortis sodales. Quisque id neque mollis, varius nisl vitae, fermentum dui. Fusce fermentum mattis turpis eget lacinia. Nunc pharetra mi nibh, non blandit diam faucibus in. Phasellus eget sapien vitae sapien bibendum commodo ut vel metus. ​ yes pls. Mauris a id velit faucibus sollicitudin. Sed congue libero sed nisi lobortis sodales. Quisque id neque mollis, varius nisl vitae, fermentum dui. Fusce fermentum mattis turpis eget lacinia. Nunc pharetra mi nibh, non blandit diam faucibus in. Phasellus eget sapien vitae sapien bibendum commodo ut vel metus. ​ maybe. Quisque id neque mollis, varius nisl vitae, fermentum dui. Fusce fermentum mattis turpis eget lacinia. Nunc pharetra mi nibh, non blandit diam faucibus in. Phasellus eget sapien vitae sapien bibendum commodo ut vel metus. ​ no thx. Sed congue libero sed nisi lobortis sodales. Quisque id neque mollis, varius nisl vitae, fermentum dui. Fusce fermentum mattis turpis eget lacinia. Nunc pharetra mi nibh, non blandit diam faucibus in. Phasellus eget sapien vitae sapien bibendum commodo ut vel metus. ​

this is how floating tables will appear on phones

as you can see, now the tables are stacked under each other and you're able to read each column separately as you would on your pc.