[indent][indent][table][row][sup][h1][color=181818][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][right][b]▅▅▅▅▅[/b][/right][/color][center][color=black]3. Hiding the Lines [/color]
[color=7bcdc8]3. Hiding the Lines[/color][/center][/h1][/sup][/row][row][cell] 
One of the main pitfalls of using a[code][table][/code]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 [i]possibly[/i] 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.[/cell][/row][/table] 
[table][row][sup][h3][color=181818][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][right][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][/right]
[center][color=7bcdc8]A. The Easy Way[/color][/center][/color][/h3][/sup][/row][row][cell] 
Just compress the individual elements of the table –[code][table][/code],[code][row][/code]and[code][cell][/code]– 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 [i]did[/i], but it does more than that.

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

[pre][table]
[row]
[/row]
[row]
[cell]Don't[/cell][cell]Open[/cell]
[/row]
[/table][/pre][/cell][/row][/table][center][hider=Example: Table With Spacing][table]
[row]
[/row]
[row]
[cell]Don't[/cell][cell]Open[/cell]
[/row]
[/table][/hider][/center][table][row][sup][h3][color=2e2c2c][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][right][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][/right][/color][/h3][/sup][/row][row][cell]Behold, a line appears. Now to try to remove it, let's join these tags end-to-end and make it ugly.

[pre][table][row][/row][row][cell]Don't[/cell][cell]Open[/cell][/row][/table]
[/pre][/cell][/row][/table][center][hider=Example: Table Without Spacing] 
 
[table][row][/row][row][cell]Don't[/cell][cell]Open[/cell][/row][/table]
[/hider][/center][table][row][sup][h3][color=2e2c2c][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][right][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][/right][/color][/h3][/sup][/row][row][cell]The above example should have no enforced line at the top! Hooray! Unless you are using [abbr=Sometimes. It seems arbitrary who gets it and who doesn't.]Google Chrome[/abbr] 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.[/cell][/row][/table] 
[table][row][sup][h3][color=181818][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][right][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][/right]
[center][color=7bcdc8]B. The Hard Way[/color][/center][/color][/h3][/sup][/row][row][cell] 
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[code][cell][/code]and[code][/cell][/code]but I did not elaborate on that asterisk. The truth is that you can also put content between[code][row][/row][/code]tags without wrapping them in a[code][cell][/code].

When using plain text, this is standard text which is [i]not[/i] 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:[/cell][/row][/table][center][hider=Example: Plain Text in the Row][table][row]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consequat vestibulum leo, a fringilla felis tincidunt non.[/row][row]
[cell]Don't[/cell]
[cell]Open[/cell][/row][/table][/hider][/center][table][row][sup][h3][color=2e2c2c][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][right][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][/right][/color][/h3][/sup][/row][row][cell]To begin, we will be using some interesting interactions with the[code][sup][h3][/code]overlapping (as detailed in my previous guide [url=https://www.roleplayerguild.com/topics/182102-sup-erstars-advanced-bbcode-hacks-1/ooc#post-5117272]here[/url]) 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[code]▅[/code]that has been put inside a sup tag[code][sup][/code]and a header[code][h3][/code]and bolded[code][b][/code]to see where it lands:
[right][sub][h1][sub][sub][color=7bcdc8]Step One  [/color][/sub][/sub][/h1][/sub][/right][pre][table]
[row]
[sup][h3][b]▅[/b][/h3][/sup]
[/row][row]
[cell]Don't[/cell][cell]Open[/cell]
[/row]
[/table][/pre]
[/cell][/row][/table][indent][hider=Step One: Results][table][row][sup][h3][b]▅[/b][/h3][/sup][/row][row][cell]Don't[/cell][cell]Open[/cell][/row][/table][/hider][/indent][table][row][sup][h3][color=2e2c2c][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][right][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][/right][/color][/h3][/sup][/row][row][cell]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[code][sup][h3][/code]it will instead overlap onto the start of same line.

[right][sub][h1][sub][sub][color=7bcdc8]Step Two  [/color][/sub][/sub][/h1][/sub][/right][pre][table]
[row]
[sup][h3][b]
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
[/b][/h3][/sup]
[/row][row]
[cell]Don't[/cell][cell]Open[/cell]
[/row]
[/table][/pre]
[/cell][/row][/table][indent][hider=Step Two: Results][table]
[row]
[sup][h3][b]
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
[/b][/h3][/sup]
[/row][row]
[cell]Don't[/cell][cell]Open[/cell]
[/row]
[/table][/hider][/indent][table][row][sup][h3][color=2e2c2c][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][right][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][/right][/color][/h3][/sup][/row][row][cell]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:

[right][sub][h1][sub][sub][color=7bcdc8]Step Three  [/color][/sub][/sub][/h1][/sub][/right][pre][table]
[row]
[sup][h3][b]
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
[right]▅▅▅▅▅▅[/right]
[/b][/h3][/sup]
[/row][row]
[cell]Don't[/cell][cell]Open[/cell]
[/row]
[/table][/pre]
This works because adding[code][right]▅▅▅▅▅▅[/right][/code]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 [i]also[/i] 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.[/cell][/row][/table][indent][hider=Step Three: Results][table]
[row]
[sup][h3][b]
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
[right]▅▅▅▅▅▅[/right]
[/b][/h3][/sup]
[/row][row]
[cell]Don't[/cell][cell]Open[/cell]
[/row]
[/table][/hider][/indent][table][row][sup][h3][color=2e2c2c][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][right][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][/right][/color][/h3][/sup][/row][row][cell]Lastly, and I do swear this is the last step, we can change the colour to match the background colour of the Guild with[code][color=2e2c2c][/code]– 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![/cell][/row][/table][indent][hider=Finished][table]
[row]
[color=2e2c2c][sup][h3][b]
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
[right]▅▅▅▅▅▅[/right]
[/b][/h3][/sup][/color]
[/row][row]
[cell]Don't[/cell][cell]Open[/cell]
[/row]
[/table][/hider][/indent][/indent][/indent]