1. Home
  2. Articles & Guides

STRONG AND S[TABLE] – Advanced BBCode Hacks 2

Hidden 5 yrs ago → 5 yrs ago Post by Roach
Raw —
OP
Avatar of Roach

Roach retired

Member Seen 12 days ago
STRONG AND S[TABLE]
STRONG AND S[TABLE]

Advanced BBCode Hacks II
Advanced BBCode Hacks II
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅
DISCLAIMER –– now 50% more serious.

As with a lot of aesthetics that use tables, sups and subs to cause overlap, Unicode characters and hidden text, parts of this guide will fuck up the formatting on some mobile devices. There may also be differences between web browsers to do with how they display certain characters, lines, and spacing.

There is no getting around this elephant in the room, and it would be irresponsible to make this guide without touching on it. I have tried to not make it hateful to read through on a small screen, but cannot confirm that the tips will display properly.

▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅
[Table] of Contents
[Table] of Contents

1. The Basic Table

2. Powerhouse of the [Cell]
A. Setting the Width
B. Custom Vertical Dividers

3. Hiding the Lines
A. The Easy Way
B. The Hard Way

4. Things You Can Do
A. Custom Table Headers
B. Faking Text Wrap

5. Conclusion

3x Like Like 4x Thank Thank
Hidden 5 yrs ago Post by Roach
Raw —
OP
Avatar of Roach

Roach retired

Member Seen 12 days ago
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
1. The Basic [Table]
1. The Basic [Table]

This is going to be a tutorial with a lot of moving parts and at least one migraine (yours or mine) so we need to start from square one: how to use the[table]function.

There are two possible variants, which I'll provide examples for below with side-by-side comparisons, each with three rows. Tables also display as a single bold white line if they don't have any content in them, so I have added some placeholder text for your amusement.
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
Option 1 - Borderless
[table]
[row]
[cell]Header[/cell][cell]Header[/cell]
[/row]
[row]
[cell]Don't[/cell][cell]Open[/cell]
[/row]
[row]
[cell]Dead[/cell][cell]Inside[/cell]
[/row]
[/table]
...Option 2 - Bordered...
[table=bordered]
[row]
[cell]Header[/cell][cell]Header[/cell]
[/row]
[row]
[cell]Don't[/cell][cell]Open[/cell]
[/row]
[row]
[cell]Dead[/cell][cell]Inside[/cell]
[/row]
[/table]

▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
As we can see, the Borderless table only draws lines horizontally, between the rows, while the Bordered table outlines every single cell (and the table itself).

Note that while I have practiced good code hygiene here and spaced out most of the lines in the copy-and-paste code, this will affect your result in a very minor way (because uhhhhh BBCode). This is the reason for that inexplicable gap between the top of the hider and the top of the table. Just join the[row]tags end-to-end and compress them into just a few lines to remove this.

As in the last guide, here is a rundown on what all of these tags mean and why they are needed:

  • [table]or[table=bordered]–– Self-explanatory. You need two tags to tango with tables: one of these at the start and a closing tag at the end.

  • [row]–– Inside the[table]tags you must now have at least one of these[row]tags. A table without row tags does not work. The number of them you put in determines how many horizontal fields there are, ie. in a traditional spreadsheet, how many entries. The above tables each have 3 sets of[row][/row]tags, so they go down three lines.

    • The content of the first row is always bolded automatically. See Section 2 for workarounds.

  • [cell]–– These must be contained within a pair of[row]tags. They determine not just how many vertical columns there are, but the height of those columns, the width of the columns, where the content will be positioned relative to other entries within the table, in borderless tables the existence of a line, and a whole lot more. The content of your table can only* be placed in between[cell]and[cell]– for all intents and purposes, your roleplaying goodies don't exist if they're not between those cheeks.

Now, neither of the above look like the snazzy character sheets you may have seen on the guild. These are blocky, rectangular, ugly, and undeniably tables. But worry not, dear tablecrafter, we're now going to move onto the Hacks in Advanced BBCode Hacks.

Did you notice the hidden tables in this post?

4x Thank Thank
Hidden 5 yrs ago Post by Roach
Raw —
OP
Avatar of Roach

Roach retired

Member Seen 12 days ago
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅
2. Powerhouse of the [Cell]
2. Powerhouse of the [Cell]

Here, we're going to learn a few ways to manipulate what is the most complex part of the table: the[cell]. Both of these techniques are fairly straight-forward, and the first is probably known to those who use tables for character sheets on the regular. They are:

  • Setting the width of an image to display full-size;
  • Making custom vertical dividers.

▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅

A. Setting the Width

So, I'm going to assume that you have tried to put an image inside a table before, with a paragraph text in an adjacent cell, and it has completely ruined your life. If you already know how to fix it, you can probably skip this section of the guide (unless you want to know how it works).

If not, here is a demonstration for table virgins.

First, let's take a table: a borderless table with two rows and two cells in each row. This is the standard format for tabled character sheets. Unlike in Section 1, we can also shove a placeholder image and some placeholder text down its throat.

▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
Oof. What is this, an image for ants? The dimensions of the cell have shrunk the image so it is not displaying at its full width or height. Worry not, there is an easy way to fix this.

The maximum width of a cell is determined by the longest string of characters (with no spaces between them) that exists within that cell. If we added in a bunch of junk characters, like.........in the background colour of the guild2e2c2cthen we can force it to display image at full size.

Any characters can work.


▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅

B. Custom Vertical Dividers

Hey kids, wanna buy some dividers?

Jokes aside, everything in this section can take place outside of the confines of a table, but it's most useful inside a table – specifically a borderless table, which do not come with vertical dividing lines. Now, everyone knows that you can make a line of unicode symbols that looks like this just by using the enter key:

█
█
█
█
█
█
█

However, those gaps at the top and bottom of the block are really a buzzkill for those who want a proper beefy, solid line to separate the men from the boys, or whatever you have on the left side of the table from the right side. Consider this, using the same unicode character:

█
█
█
█
█
█
█
█
█
█
█
█


Inside a table, and given a darker coat of paint, it will look a little something like this:
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
But how do you make one of these for yourself?

First of all, you should find a unicode symbol that you happen to like, and that you think might make a continuous line once squished together. Ideally, it should be one that works on all browsers and mobile devices, otherwise it will look a bit silly for a small number of users. For example: █, |, │, etc.

Secondly, you should read the precursor to this guide, Advanced BBCode Hacks 1 (wink wink) because it introduces the overlapping text technique used in the following bit of code in more detail:

[sup][h3][sup]█[/sup]
[sub]█[/sub][/h3][/sup]

The outer[sup][h3]tags force all text inside it to overlap. One of the blocks is pushed up by a further[sup]and the second is pushed down by a[sub]– and that's it. That's the code, or the simplest unit of it, at least.

This is the stage that you should edit it at. If you want to change the Unicode character or perhaps experiment with the size of the header to an[h2]or an[h1]then now is the time, because next we will be copying this unit a bunch of times to make it longer.

When you are pasting it, make sure that the ending[/sup]tag is directly connected to the opening[sup]of the next section. No line breaks or spaces!

[color=black]
[sup][h3][sup]█[/sup]
[sub]█[/sub][/h3][/sup][sup][h3][sup]█[/sup]
[sub]█[/sub][/h3][/sup][sup][h3][sup]█[/sup]
[sub]█[/sub][/h3][/sup][sup][h3][sup]█[/sup]
[sub]█[/sub][/h3][/sup][sup][h3][sup]█[/sup]
[sub]█[/sub][/h3][/sup][sup][h3][sup]█[/sup]
[sub]█[/sub][/h3][/sup]
[/color]

Voila. Ready to be inserted into a[cell][/cell]in the middle of a table.

3x Laugh Laugh 3x Thank Thank
Hidden 5 yrs ago Post by Roach
Raw —
OP
Avatar of Roach

Roach retired

Member Seen 12 days ago
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅
3. Hiding the Lines
3. Hiding the Lines

One of the main pitfalls of using a[table]in a character sheet is that you will end up with an unavoidable white line forming a header, even if you use the unbordered table tag. Sometimes, it just cramps your style!

There are two ways I have found to deal with this: one is easy, but does not work on all browsers; the other is more difficult but hides it in a wider variety of contexts, at the expense of possibly breaking on mobile.

Once the code update comes out, the Easy Way will be obsolete, but the Hard Way will still have additional functionality. When this happens, the guide will be revised.

▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅

A. The Easy Way

Just compress the individual elements of the table –[table],[row]and[cell]– together, end-to-end. As in, leave no line-breaks or spaces between a closing tag and the next opening one, even if it would otherwise make your code prettier or more usable.

I mentioned all the way back in Section 1 that good code hygiene resulted in a gap between the top of the hider and the table. Well, it did, but it does more than that.

Let's take a borderless table with two rows again, leaving the first row empty.

[table]
[row]
[/row]
[row]
[cell]Don't[/cell][cell]Open[/cell]
[/row]
[/table]
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
Behold, a line appears. Now to try to remove it, let's join these tags end-to-end and make it ugly.

[table][row][/row][row][cell]Don't[/cell][cell]Open[/cell][/row][/table]
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
The above example should have no enforced line at the top! Hooray! Unless you are using Google Chrome or you are on a mobile. Just be aware that this does not work for everyone, and it may look a bit goofy if the reader is one of these exceptions.

From here, you can fill this out at your leisure with as much meaty content as you want, as long as every table tag ends up back to back. My recommendation would be to write it all out separately and then afterwards go back and join them all up.

▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅

B. The Hard Way

Step into the dojo, my friends. This is where we find out that the first B in BBCode stands for Broken.

First things first: breaking the rules. I mentioned in Section 1 that the content of your table can only* be placed in between[cell]and[/cell]but I did not elaborate on that asterisk. The truth is that you can also put content between[row][/row]tags without wrapping them in a[cell].

When using plain text, this is standard text which is not forcibly bolded by existing in the first row (because it technically doesn't) or forcibly indented by existing in the table (because it technically doesn't). What it looks like, for future reference:
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
To begin, we will be using some interesting interactions with the[sup][h3]overlapping (as detailed in my previous guide here) to allow us to overlap text onto the first white line. The end goal is to cover up the white line for Google Chrome and mobile users for whom the simplest fix doesn't work, so the end result from the Easy Fix will be our starting point.

Let's add into this a block character▅that has been put inside a sup tag[sup]and a header[h3]and bolded[b]to see where it lands:
Step One 
[table]
[row]
[sup][h3][b]▅[/b][/h3][/sup]
[/row][row]
[cell]Don't[/cell][cell]Open[/cell]
[/row]
[/table]
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
I think you can see where I'm going with this.

Now since we know that this one character covers the line in this configuration, let's try to add a lot more of them until we reach the end of the table.

Because this text is in the row, and therefore technically not in the table, we don't need to worry about it extending the width of a cell or causing a scroll bar if we put too many. If it expands far enough, it should simply loop over into the next line, but because of the[sup][h3]it will instead overlap onto the start of same line.

Step Two 
[table]
[row]
[sup][h3][b]
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
[/b][/h3][/sup]
[/row][row]
[cell]Don't[/cell][cell]Open[/cell]
[/row]
[/table]
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
Finally, it's covered – except for that tiny frustrating sliver of line on the right-hand side that won't disappear no matter how many blocks we try to add. Fortunately, there is a fix for that, and it's dumb:

Step Three 
[table]
[row]
[sup][h3][b]
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
[right]▅▅▅▅▅▅[/right]
[/b][/h3][/sup]
[/row][row]
[cell]Don't[/cell][cell]Open[/cell]
[/row]
[/table]

This works because adding[right]▅▅▅▅▅▅[/right]will produce a few right-aligned blocks. So long as this bit of code is inside the same sup and header as the rest of the blocks, these will also overlap into the same line, while keeping their alignment.

Note that there is no limit to the number of blocks that you can put in these lines, as they will always 'overflow' into the same space. If you see tiny 'pixels' of the wrong colour then just double up on them. Go ham.
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
Lastly, and I do swear this is the last step, we can change the colour to match the background colour of the Guild with[color=2e2c2c]– a hex code that has been burnt into my brain from writing this guide – or any other colour that suits your fancy.

Look, ma, no lines!

1x Like Like 3x Thank Thank
Hidden 5 yrs ago Post by Roach
Raw —
OP
Avatar of Roach

Roach retired

Member Seen 12 days ago
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅
4. Things You Can Do
4. Things You Can Do

Assuming that you have now read the previous sections of this guide (or at least the 3rd part on hiding lines), I can now showcase two more advanced techniques: how to use[row]tags to make headers with images, and how to make the closest thing to text wrap that you can on the Guild.

There is not much need to demonstrate these in the step-by-step manner used previously. I will give brief descriptions and explanations of a template, but they are more to show you that you can do this thing. If you have any further problems, feel free to message me.
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅

A. Custom Table Headers

Three things that should be noted when you put plain text in the[row]tags outside of a[cell]are as follows:

  • It will always be aligned with regular text (rather than slightly indented);
  • It will never be split up according to the cells in the table;
  • It will be closer to the content of the table than text outside of the[table]tags.

This means that you can have a header (image and text) that is perfectly centred above a table while covering the line. See the following example:

▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
The code for both of these is pretty much identical. They both derive from the end point of hiding the lines, but have had an image and text inserted inside the[sup][h3]tags that cause overlap to hide the dividing line.

Note that any size of image is fine but a width of 870 will match the entire width of the table when it is not being narrowed by[indent]tags.

[row][color=181818][sup][h1]
[center][img]YOUR IMAGE HERE[/img][/center]
[b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
[right]▅▅▅▅▅▅[/right]
[center][color=white]YOUR TEXT HERE[/color][/center][/b]
[/h1][/sup][/color][/row]

This code is ready to replace the first[row][/row]of a table. Here are a couple of ways to customize it to your liking:

  • Changing the colour181818will change the colour of the line.

  • Changing the[h1]to[h2]or[h3]will work fine to change the size of the line and text.

  • Changing the colourwhitewill change the colour of the text. Delete the following line of code if you do not want text: 
    [center][color=white]YOUR TEXT HERE[/color][/center]

  • Insert an image link where it saysYOUR IMAGE HERE or delete the following line of code if you do not want an image:
    [center][img]YOUR IMAGE HERE[/img][/center]

Obviously you can use these principles in a multitude of different ways. This is just one of the most basic – I wholeheartedly encourage experimentation (for masochists).

▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅

B. Faking Text Wrap

If you have been on the Guild for any length of time, you may know that text wrap for images is one of the most-desired features. Unfortunately, it has been a great many years and we don't have it yet, but once we get[justify]I swear I will begin my campaign.

Until then, we can 'make do' with this fake and barely functional method of text wrap using tables.

A few caveats: this will basically only work with the image on the left-hand side; you may also need to play around with image sizes to get ones that matches your intended paragraph length; and finally, there are small-ish gaps that are not garish but may bug you all the same. But text wrap, guys!
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
The code provided for the above example is going to be devoid of lorem ipsum placeholder text, and therefore will require a bit of jiggery-pokery on the user's end:
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
An explanation of the red parts of the code, which you can customize easily:

  • Text 1
    Here you should put in the text that comes before the image.

  • [color=2e2c2c]..................................................[/color]
    Add or remove dots according to the width of your image to get it to display full-size.

  • [img]Your Image Here[/img]
    Self-explanatory. Put in your image. You may have to play with the size of the image to get it to sit right with the text beside it.

  • Text 2
    Here you should put in the text that rests to the side of the image. It is highly recommended to limit this to the rough height of the image.

  • Text 3
    Here you should put in the text that comes after the image.

Note that this is a lot of work for an imperfect text wrap, however if you're choking for it (as I am) then hopefully it will provide a useful stop-gap until the day we get it.
3x Thank Thank
Hidden 5 yrs ago → 5 yrs ago Post by Roach
Raw —
OP
Avatar of Roach

Roach retired

Member Seen 12 days ago
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅
5. Conclusion
5. Conclusion

And thus, we come to an end. Experimenting with tables has been one of my main hobbies in the past month (sad, I know) and although I was once a sceptic about using them for character sheets or OOCs, I have now seen the light.

Mostly because of sunk cost fallacy, but still.

There are things I have elected not to include in this guide for brevity's sake. How cells affect dividing lines. Tables within tables. Tasteful aesthetics. The broken-ass glitch that allows you to have a selection of bright colours as a cell background. Thanks for telling me about them, @LegendBegins – I can't sleep at night knowing these are out here:
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
Nevertheless, I hope something from the above list of tips and tricks masquerading as a guide will be useful to someone. Please PM any questions you have as I am more than happy to impart forbidden knowledge as those who have seen the site-breaker table will know.

In the words of every YouTuber ever, remember to like and subscribe, and hit that notification bell if you want to see more, and I'll catch you in the next one.
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅

6x Like Like 9x Thank Thank
↑ Top
© 2007-2024
BBCode Cheatsheet