Tables Revisited and Advanced Usage

[NightLux]

I've done a lot of playing around with tables recently and given that Flower has already done a great job putting the basics together I wanted to add a few more things which the tables can be used for that you might not commonly think of.  Most of the uses here are to make things look pretty/organized because, well, I'm OCD and I love to be able to do this stuff.


Before I begin, I wanted to add a clarification to Flower's posts.  The difference between a fixed table and a loose table is that a fixed table uses multiple defined cells on a row rather than the standard (hidden default, you'll see later) one.  For example, let's take a 2x2 table.  The code for a fixed table is:

Code Select Expand

[table]
[tr][td]Something 1[/td][td]Something 2[/td][/tr]
[tr][td]Something 3[/td][td]Something 4[/td][/tr]
[/table]

Results

Something 1	Something 2
Something 3	Something 4

Where the code for a loose table is:

Code Select Expand


[table]
[tr]Something 1     Something 2[/tr]
[tr]Something 3     Something 4[/tr]
[/table]

Results

Something 1     Something 2

Something 3     Something 4

Although technically my loose table coding is a short-cut.  If we were being as accurate as possible with the coding, it would really look like this and give the same results:

Code Select Expand


[table]
[tr][td]Something 1     Something 2[/td][/tr]
[tr][td]Something 3     Something 4[/td][/tr]
[/table]

Results

Something 1     Something 2

Something 3     Something 4

As you can see, a Loose table is actually a Fixed table with one column and several rows; in this case, 2x1, not 2x2.  This is important because that one-column trick is the key.  Oh, and I should note, a table actually re-colors the text to a grey-ish color.  You can fix this by using the color tags and setting it back to black.  For every cell.  Yeah, that kind of sucks.



Okay, now for some new stuff:

You know what might have been handy above?  If I could have laid those two code sections next to each other so you had a Fixed table on the left and a Loose Table's code on the right.  Unfortunately, that's not possible with the Code tag.  Here's the code that you'd think would work:

Code (Example) Select Expand

Test

Code (Example) Select Expand

Test


You'll have to trust me that these should appear next to each other (can't actually show the code since there's code tag inside of it) but because the display of the Code tab stretches across the screen.  You'd think it wouldn't work with quotes then, but it does.

Code Select Expand

[table]
[tr][td][Quote=Example]Test[/quote][/td][td][Quote=Example]Test[/quote][/td][/tr]
[/table]

Results

Test

Test

As well as working with Spoilers:

Code Select Expand

[table]
[tr][td][Spoiler=Example]Test[/spoiler][/td][td][Spoiler=Example]Test[/spoiler][/td][/tr]
[/table]

Results

Example Test

Example Test

This gets us to my first point about tables: Automatic Column Width

As you might know, a normal quote tag looks like this:

This is an example of how a quote box works and how ugly it looks because it stretches it out without regard for anything else that's going on there.

I think its ugly because it colors a whole lot of free space when it doesn't need it, especially when it is a short section and might make for one long line of text.  But we can prevent that and make the box act differently by including it in a table.

Code Select Expand

[table]
[tr][td][quote]This is an example of how a quote box works and how ugly it looks because it stretches it out without regard for anything else that's going on there.[/quote][/td][/tr]
[/table]

Results

This is an example of how a quote box works and how ugly it looks because it stretches it out without regard for anything else that's going on there.

Notice how it trimmed it to roughly half the width or so?  It looks a lot better for this short blurb because a table only expands the size of the column to what it needs to display it.  If you shortened the text even more, it'd get even smaller:

Code Select Expand

[table]
[tr][td][quote]See what I mean?
This is kind of cool.[/quote][/td][/tr]
[/table]

Results

See what I mean? This is kind of cool

Sure, making the quote smaller is nice and all, but its that table function that is important - remember, a column is going to be as wide as it takes to display the contents when using the Table tag, whatever row it is on.


So now to my second point with tables: Using Tables for lists

This might seem redundant with the list tags, but there are several major limitations of the list tag, but I'm going to highlight one alone: You are stuck with a nasty dot or number at the beginning.  I don't like that in some cases.  But if I still want to keep it organized, I can use a table.  For example, a simple table:

Code Select Expand

[table]
[tr]Item 1[/tr]
[tr]Item 2[/tr]
[tr]Item 3[/tr]
[/table]

Results

Item 1

Item 2

Item 3

So this is just like a list?  No big deal right?  Well, first, if I have a small enough image, I can "fake" a custom bullet point.

Code Select Expand

[table]
[tr][img height=4 width=4]https://elliquiy.com/elluiki/images/d/dc/Button_wants-and-desires.png[/img] Item 1[/tr]
[tr][img height=8 width=8]https://elliquiy.com/elluiki/images/d/dc/Button_wants-and-desires.png[/img] Item 2[/tr]
[tr][img height=10 width=10]https://elliquiy.com/elluiki/images/d/dc/Button_wants-and-desires.png[/img] Item 3[/tr]
[/table]

Results

Item 1

Item 2

Item 3

(As an aside, I need to do some more research into how it scales down images - I just found this old image I had uploaded made a pretty cool red square that works at 10 pixels.  If you really wanted to let your OCD fly, you could also just upload a 10 pixel-tall png with transparent "top" and "bottom" enough that the real image within sits in the middle of a 10 point font sentence rather than justified to the button.)

So this itself doesn't set the world on fire, but if we use this concept, we can use this one-column table for lists where each "bullet" is a different image.  I have an example if this here with the gods of my sandbox campaign world. 

But its also useful in other places too - making sure floating images stay where you want them!



So now to my third point with tables: You float where I want image!

One of the biggest drawbacks of floating images is that they can float to where you don't want them based on the width of the browser used to view it.  If you've every used the "Preview" fuction of a post, the width it uses to display the post is actually different from what it looks like when actually posted (the Preview does not include the "side" frame with your name, avatar, etc).  So you finally get something to look good with your text and all, only for it to end up looking weird once it actually posts.  For example, let me take the first two ideas of my Cravings thread and strip out some of the text and table features I have built there.  (You might have to change the width of your browser to notice)

Code Select Expand

[float=right][img height=300 padding=10]https://elliquiy.com/elluiki/images/b/b0/NLTempest.jpg[/img][/float]
[right][color=blue][i][b]Andromeda - Second Wave[/b][/i][/color]
[b]Inspiration:[/b] [color=grey]Mass Effect, General Sci-Fi[/color]
[b]Rating:[/b] [color=grey]Light, higher if kinks make sense[/color]
[b]Pairing:[/b] [color=grey]Male x Female, Male x Asari, Asari x Female (Wave 2 and Heleus-born)[/color]
[b]Looking for:[/b] [color=grey]Someone to play the female role[/color]
[b]Themes:[/b] [color=grey]Exploration. Struggle. Regret. Love.[/color][/right]

[i]As the galaxy rebuilt in the aftermath of the Reapers, scattered references to the Andromeda Initiative started to grow in popular culture as "those who escaped the horrors of the Reaper Invasion".  In peaceful slumber as the galaxy behind them burned.  A few got the idea to follow.  For years the Second Initiative, as they called themselves, gathered funds and recruited hopefuls to reach this goal but ultimately they could only find the funding for a ship of barely five thousand brave souls.  There was no Nexus going with this round.  If the first wave had failed, they were doomed to death as well.  In 2214, the [/i]Elysian Fields[i] reached bearing a mix of all races and its ship, the [/i]Avalon[i], striking out into the dark between galaxies for the Heleus Cluster.[/i]
[hr]
[float=left][img height=300 padding=10]https://elliquiy.com/elluiki/images/f/f9/NLMagicalUniversity.jpg[/img][/float]
[color=green][i][b]Aflutter at the Floating University[/b][/i][/color]
[b]Inspiration:[/b] [color=grey]Fantasy, Magical Modern, University tropes[/color]
[b]Rating:[/b] [color=grey]Light, maybe light BDSM, Exotic possible[/color]
[b]Pairing:[/b] [color=grey]Male x Female (Student x Student)[/color]
[b]Looking for:[/b] [color=grey]Someone to play the female role[/color]
[b]Themes:[/b] [color=grey]Those Days of Freedom at College. Relationships. First Loves. Magic[/color]

[i]The world was once a much darker place.  Tribes of humans waged war on elven cities, orcish hordes beat at the doors of dwarven citadels.  Fey fought the encroachment of the dragons.  But then the Accords were founded and a lasting, if somewhat shaky at times, peace was found.  At its heart was the University, a single, all-encompassing college that every race and persuasion could attend.  Its goal was remarkably straight forward and subtle - by blending the knowledge of the races together and sharing it among the youth of their races, that lasting peace would be renewed constantly.  It is its noble intent, but such freedom for young members of the races means that they're learning much more than academics...[/i]

Spoiler: Click to Show/Hide

Andromeda - Second Wave
Inspiration: Mass Effect, General Sci-Fi
Rating: Light, higher if kinks make sense
Pairing: Male x Female, Male x Asari, Asari x Female (Wave 2 and Heleus-born)
Looking for: Someone to play the female role
Themes: Exploration. Struggle. Regret. Love.

As the galaxy rebuilt in the aftermath of the Reapers, scattered references to the Andromeda Initiative started to grow in popular culture as "those who escaped the horrors of the Reaper Invasion".  In peaceful slumber as the galaxy behind them burned.  A few got the idea to follow.  For years the Second Initiative, as they called themselves, gathered funds and recruited hopefuls to reach this goal but ultimately they could only find the funding for a ship of barely five thousand brave souls.  There was no Nexus going with this round.  If the first wave had failed, they were doomed to death as well.  In 2214, the Elysian Fields reached bearing a mix of all races and its ship, the Avalon, striking out into the dark between galaxies for the Heleus Cluster.

Aflutter at the Floating University
Inspiration: Fantasy, Magical Modern, University tropes
Rating: Light, maybe light BDSM, Exotic possible
Pairing: Male x Female (Student x Student)
Looking for: Someone to play the female role
Themes: Those Days of Freedom at College. Relationships. First Loves. Magic

The world was once a much darker place.  Tribes of humans waged war on elven cities, orcish hordes beat at the doors of dwarven citadels.  Fey fought the encroachment of the dragons.  But then the Accords were founded and a lasting, if somewhat shaky at times, peace was found.  At its heart was the University, a single, all-encompassing college that every race and persuasion could attend.  Its goal was remarkably straight forward and subtle - by blending the knowledge of the races together and sharing it among the youth of their races, that lasting peace would be renewed constantly.  It is its noble intent, but such freedom for young members of the races means that they're learning much more than academics...

Since I don't have enough "filler" for the size of the image, the horizontal row isn't below the first image, the float on the other side "floats up" into the other image's "horizontal space" and otherwise looks to be a mess.  Add enough of these moving back and forth and it becomes a chaotic mess.  But if I add each as a row in a single-column table, we get this:

Code Select Expand

[table]
[tr][td]
[hr]
[float=right][img height=300 padding=10]https://elliquiy.com/elluiki/images/b/b0/NLTempest.jpg[/img][/float]
[right][color=blue][i][b]Andromeda - Second Wave[/b][/i][/color]
[b]Inspiration:[/b] [color=grey]Mass Effect, General Sci-Fi[/color]
[b]Rating:[/b] [color=grey]Light, higher if kinks make sense[/color]
[b]Pairing:[/b] [color=grey]Male x Female, Male x Asari, Asari x Female (Wave 2 and Heleus-born)[/color]
[b]Looking for:[/b] [color=grey]Someone to play the female role[/color]
[b]Themes:[/b] [color=grey]Exploration. Struggle. Regret. Love.[/color][/right]

[i]As the galaxy rebuilt in the aftermath of the Reapers, scattered references to the Andromeda Initiative started to grow in popular culture as "those who escaped the horrors of the Reaper Invasion".  In peaceful slumber as the galaxy behind them burned.  A few got the idea to follow.  For years the Second Initiative, as they called themselves, gathered funds and recruited hopefuls to reach this goal but ultimately they could only find the funding for a ship of barely five thousand brave souls.  There was no Nexus going with this round.  If the first wave had failed, they were doomed to death as well.  In 2214, the [/i]Elysian Fields[i] reached bearing a mix of all races and its ship, the [/i]Avalon[i], striking out into the dark between galaxies for the Heleus Cluster.[/i]

First and foremost, I've left the actual "what happens" in Heleus open for us to brainstorm.  My thoughts are that the Ryder twins and their team were successful and defeated the Kett on Meridian and that this string of colonists are adding to that.  With a lag of roughly 30-40 years between the two groups, a lot could have happened.  My baseline is that the [i]Fields[/i] and [i]Avalon[/i] are both very mobile and, unlike the arks, heavily armed - think a Dreadnought and the Normandy, respectfully.  Their arrival would change the balance in the Cluster and might raise some difficult questions.  They're also different, having experienced a nearly terminal event, survived, rebuilt and then came.  I do want to keep away from interacting with the major canon characters.  My ideal pairing would be for my character to be part of this new wave and yours to have been born in the Cluster so we could explore those differences.
[/td][/tr][tr][td]
[hr]
[float=left][img height=300 padding=10]https://elliquiy.com/elluiki/images/f/f9/NLMagicalUniversity.jpg[/img][/float]
[color=green][i][b]Aflutter at the Floating University[/b][/i][/color]
[b]Inspiration:[/b] [color=grey]Fantasy, Magical Modern, University tropes[/color]
[b]Rating:[/b] [color=grey]Light, maybe light BDSM, Exotic possible[/color]
[b]Pairing:[/b] [color=grey]Male x Female (Student x Student)[/color]
[b]Looking for:[/b] [color=grey]Someone to play the female role[/color]
[b]Themes:[/b] [color=grey]Those Days of Freedom at College. Relationships. First Loves. Magic[/color]

[i]The world was once a much darker place.  Tribes of humans waged war on elven cities, orcish hordes beat at the doors of dwarven citadels.  Fey fought the encroachment of the dragons.  But then the Accords were founded and a lasting, if somewhat shaky at times, peace was found.  At its heart was the University, a single, all-encompassing college that every race and persuasion could attend.  Its goal was remarkably straight forward and subtle - by blending the knowledge of the races together and sharing it among the youth of their races, that lasting peace would be renewed constantly.  It is its noble intent, but such freedom for young members of the races means that they're learning much more than academics...[/i]

I don't see too many lighthearted stories here and that's what this is at its heart.  This started as an idea for a group game and might eventually evolve into it, but in this case, I envision this more of a love story, two college students meeting and falling for each other and all the hijinks, drama and crazy twists and turns that come with it.  My vision is that it is set in a modern world, like ours, but infused with magic, but if my partner prefers a more high fantasy setting, I'm happy with that as well.  I don't think this story necessarily needs some dark plot or something to progress it as the development of their relationship should be enough on its own.  Could also go exotic if my partner would like.
[/td][/tr][tr][td]

Spoiler: Click to Show/Hide

Andromeda - Second Wave Inspiration: Mass Effect, General Sci-Fi Rating: Light, higher if kinks make sense Pairing: Male x Female, Male x Asari, Asari x Female (Wave 2 and Heleus-born) Looking for: Someone to play the female role Themes: Exploration. Struggle. Regret. Love. As the galaxy rebuilt in the aftermath of the Reapers, scattered references to the Andromeda Initiative started to grow in popular culture as "those who escaped the horrors of the Reaper Invasion".  In peaceful slumber as the galaxy behind them burned.  A few got the idea to follow.  For years the Second Initiative, as they called themselves, gathered funds and recruited hopefuls to reach this goal but ultimately they could only find the funding for a ship of barely five thousand brave souls.  There was no Nexus going with this round.  If the first wave had failed, they were doomed to death as well.  In 2214, the Elysian Fields reached bearing a mix of all races and its ship, the Avalon, striking out into the dark between galaxies for the Heleus Cluster.

Aflutter at the Floating University Inspiration: Fantasy, Magical Modern, University tropes Rating: Light, maybe light BDSM, Exotic possible Pairing: Male x Female (Student x Student) Looking for: Someone to play the female role Themes: Those Days of Freedom at College. Relationships. First Loves. Magic The world was once a much darker place.  Tribes of humans waged war on elven cities, orcish hordes beat at the doors of dwarven citadels.  Fey fought the encroachment of the dragons.  But then the Accords were founded and a lasting, if somewhat shaky at times, peace was found.  At its heart was the University, a single, all-encompassing college that every race and persuasion could attend.  Its goal was remarkably straight forward and subtle - by blending the knowledge of the races together and sharing it among the youth of their races, that lasting peace would be renewed constantly.  It is its noble intent, but such freedom for young members of the races means that they're learning much more than academics...

And now no madder the width of the view, each "story" takes up a space equal to the height of the image OR the actual text, whichever is greater.  But this hints at a concept about tables that, with a few exceptions (like the Code tag), is very important - each cell in a table is basically its own post within the post.  That is, the final example above (for my ideas) is essentially mimicking what it would be like if I had each one in its own reply to my Cravings thread.  Without having to manage a punch of individual posts.  Stripping out all the images, you could do some really cool text work using tables and keep the spacing regardless of view size...

Hello!  What's your name?
	My name is NightLux
Should I have someone come and give you your medicine?
	Nah, my OCD is under control after this post
I don't believe you.  I'm sending someone.
	Fine, I'll stop here!

Anyway, I hope this helps people who want to try and do a bit more for their posts through the magic of tables.  Let me know if you have any questions or want me to explain something a bit more!

[GothicFires]

Thanks for writing up these ideas. I like having my information organized and use tables in and there. But For your last idea you can format the floatleft and floatright functions with 'clearleft' and 'clearright' at the end of the section of words to be grouped with the corresponding picture. It would give you the same look without using a table.

[NightLux]

Thanks for writing up these ideas. I like having my information organized and use tables in and there. But For your last idea you can format the floatleft and floatright functions with 'clearleft' and 'clearright' at the end of the section of words to be grouped with the corresponding picture. It would give you the same look without using a table.

Today I learned something.    That actually simplifies things.

[GothicFires]

glad I could help.