[indent][indent][table][row][sup][h1][color=181818][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][right][b]▅▅▅▅▅[/b][/right][/color][center][color=black]2. Powerhouse of the [noparse][Cell][/noparse] [/color]
[color=7bcdc8]2. Powerhouse of the [noparse][Cell][/noparse][/color][/center][/h1][/sup][/row][row][cell]
 
Here, we're going to learn a few ways to manipulate what is the most complex part of the table: the[code][cell][/code]. 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:

[list][*]Setting the width of an image to display full-size;
[*]Making custom vertical dividers.[/list][/cell][/row][/table] 
[table][row][sup][h3][color=181818][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][right][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][/right]
[center][color=7bcdc8]A. Setting the Width[/color][/center][/color][/h3][/sup][/row][row][cell] 
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 [i]how[/i] it works).

If not, here is a demonstration for table virgins.

First, let's take a table: a [b]borderless[/b] table with [b]two rows[/b] and [b]two cells[/b] 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.[/cell][/row][/table][indent][hider=Step One: Code (Excuse the Ugliness)]
[color=7bcdc8][noparse][table][row][cell]Header 1[/cell][cell]Header 2[/cell][/row]
[row]
[cell][img][/noparse][color=7bcdc8][noparse]https:////via.placeholder.com/400[/noparse][/color][noparse][/img][/cell]
[cell]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis urna vel risus rhoncus, et aliquam leo sagittis. Sed at odio sapien. Curabitur sed mi id risus consequat aliquam. Nam porttitor orci eget quam sollicitudin auctor. Quisque et quam sed justo interdum efficitur nec non magna. Donec tristique mi nisi, commodo pulvinar elit sollicitudin et.[/cell]
[/row][/table]
[/noparse][/color][/hider]
[hider=Step One: Results][table][row][cell]Header 1[/cell][cell]Header 2[/cell][/row]
[row]
[cell][img]https://via.placeholder.com/400[/img][/cell]
[cell]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis urna vel risus rhoncus, et aliquam leo sagittis. Sed at odio sapien. Curabitur sed mi id risus consequat aliquam. Nam porttitor orci eget quam sollicitudin auctor. Quisque et quam sed justo interdum efficitur nec non magna. Donec tristique mi nisi, commodo pulvinar elit sollicitudin et.[/cell]
[/row][/table][/hider][/indent][table][row][sup][h3][color=2e2c2c][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][right][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][/right][/color][/h3][/sup][/row][row][cell]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[code].........[/code]in the background colour of the guild[code]2e2c2c[/code]then we can force it to display image at full size.

Any characters can work.[/cell][/row][/table][indent][hider=Step Two: Code (Changes in Red)]
[color=7bcdc8][noparse][table][row][cell]Header 1[/cell][cell]Header 2[/cell][/row]
[row][cell][img][/noparse][color=7bcdc8][noparse]https:////via.placeholder.com/400[/noparse][/color][noparse][/img][/noparse]
[b][color=red][noparse][color=2e2c2c]......................................................................................................[/color][/noparse][/color][/b][noparse][/cell][cell]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis urna vel risus rhoncus, et aliquam leo sagittis. Sed at odio sapien. Curabitur sed mi id risus consequat aliquam. Nam porttitor orci eget quam sollicitudin auctor. Quisque et quam sed justo interdum efficitur nec non magna. Donec tristique mi nisi, commodo pulvinar elit sollicitudin et.[/cell][/row][/table]
[/noparse][/color]
[/hider]
[hider=Step Two: Results][table][row][cell]Header 1[/cell][cell]Header 2[/cell][/row]
[row][cell][img]https://via.placeholder.com/400[/img]
[color=2e2c2c]......................................................................................................[/color][/cell][cell]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis urna vel risus rhoncus, et aliquam leo sagittis. Sed at odio sapien. Curabitur sed mi id risus consequat aliquam. Nam porttitor orci eget quam sollicitudin auctor. Quisque et quam sed justo interdum efficitur nec non magna. Donec tristique mi nisi, commodo pulvinar elit sollicitudin et.[/cell][/row][/table][/hider]
[/indent]
[table][row][sup][h3][color=181818][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][right][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][/right]
[center][color=7bcdc8]B. Custom Vertical Dividers[/color][/center][/color][/h3][/sup][/row][cell] 
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 [i]useful[/i] 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:

[center][color=7bcdc8]█
█
█
█
█
█
█[/color][/center]
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:

[center][color=7bcdc8][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][/center]

Inside a table, and given a darker coat of paint, it will look a little something like this:[/cell]
[/table][hider=Example Divider (Thicc)]
[table][row][/row][row][cell][center][img]https://via.placeholder.com/250x250[/img]

Ebony Dark'ness Dementia Raven Way[/center]

[color=2e2c2c].................................................................[/color][/cell][cell][center][color=181818][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][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][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][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][/center][/cell][cell]Hi my name is Ebony Dark’ness Dementia Raven Way and I have long ebony black hair (that’s how I got my name) with purple streaks and red tips that reaches my mid-back and icy blue eyes like limpid tears and a lot of people tell me I look like Amy Lee (AN: if u don’t know who she is get da hell out of here!). I’m not related to Gerard Way but I wish I was because he’s a major fucking hottie. I’m a vampire but my teeth are straight and white. I have pale white skin. I’m also a witch, and I go to a magic school called Hogwarts in England where I’m in the seventh year (I’m seventeen). I’m a goth (in case you couldn’t tell) and I wear mostly black. I love Hot Topic and I buy all my clothes from there. For example today I was wearing a black corset with matching lace around it and a black leather miniskirt, pink fishnets and black combat boots. I was wearing black lipstick, white foundation, black eyeliner and red eye shadow. I was walking outside Hogwarts. It was snowing and raining so there was no sun, which I was very happy about. A lot of preps stared at me. I put up my middle finger at them.

“Hey Ebony!” shouted a voice. I looked up. It was…. Draco Malfoy!

“What’s up Draco?” I asked.

“Nothing.” he said shyly.

But then, I heard my friends call me and I had to go away.
[/cell][/row][/table][/hider][table][row][sup][h3][color=2e2c2c][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][right][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][/right][/color][/h3][/sup][/row][row][cell]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, [url=https://www.roleplayerguild.com/topics/182102-sup-erstars-advanced-bbcode-hacks-1/ooc]Advanced BBCode Hacks 1[/url] (wink wink) because it introduces the overlapping text technique used in the following bit of code in more detail:

[pre][sup][h3][sup]█[/sup]
[sub]█[/sub][/h3][/sup][/pre]
The outer[code][sup][h3][/code]tags force all text inside it to overlap. One of the blocks is pushed up by a further[code][sup][/code]and the second is pushed down by a[code][sub][/code]– 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[code][h2][/code]or an[code][h1][/code]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[code][/sup][/code]tag is directly connected to the opening[code][sup][/code]of the next section. No line breaks or spaces!

[pre][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][/pre]
Voila. Ready to be inserted into a[code][cell][/cell][/code]in the middle of a table.[/cell][/row][/table]
[/indent][/indent]