[+ ebonite +]

Hey y'all, this is a thread explaining how to make a basic posting table for your characters!

Disclaimer: This is the way that I make my own tables - other people might make them differently.

basic format

Every table starts with a basic [div][/div] element. Without getting too technical, a div element is just a container that you can freely style. My tables typically have two div elements. The first one is the main outside container that has the background styling, centering, and any border styling. The second one is the inside container that contains the styling for the text - so font style, alignment, size, color etc.

outer container

For the outer container, you will be putting in the max-width, the background-color, and the centering margin. All these fancy styling words are a part of Cascading Style Sheets or CSS, which is the code used to make websites look pretty. CSS has syntax rules that you have to follow or the code will not work. This includes making sure you have dashes in between names that have more than one word (background-color), having a colon after the last word (background-color:) and having a semi-colon after the whole thing (background-color:#ffffff;). If your table is not working, make sure to check your syntax first! One missing semi-colon will mess everything up.

The max-width and the background-color will both depend on your table image, so you'll want to figure out what image you're going to use before making a table so you can pick a max-width and a background-color (unless you're making a table without an image). The max-width will be the size of your table image. The center margin code will never change!

To start out, you will put these elements into the div using style="" like so - [div style=""][/div]. The fancy words will be going inside the " ".

Here's an example:

[div style="margin:auto;max-width:500px;background-color:#ffffff;"]text here[/div]

A breakdown of what's happening here:

margin:auto; is making the table centered no matter what.

max-width:500px; is making it so that the table will never get bigger than 500 pixels (px), but it can shrink down. This is essential for responsive tables and will make them display properly on mobile (albeit at a smaller size of course)!

background-color:#ffffff; is setting the table background color to #ffffff or white. The # denotes hexidecimal notation, which is a method of getting web colors. You can also use certain keywords (like white) or use rgba which stands for red green blue alpha (aka opacity for making things transparent).

Here's a basic table example below using just the codes we used above:

text here

You can also use this container to make a border around your table:

[div style="margin:auto;max-width:500px;background-color:#ffffff;border:1px solid black;"]text here[/div]

border:1px solid black; there are three things going on here. The first is the size of the border, which is 1px. The second is the type of border, which is solid (other common types are dotted, dashed, and ridge. Play with them here!). The third is the color of the border, which again can be specified with hexidecimal, keywords, and rgba.

text here

And to make your borders rounded:

[div style="margin:auto;max-width:500px;background-color:#ffffff;border:1px solid black;border-radius:90px;"]text here[/div]

border-radius:90px; this specifies the size of the radius, which is 90px.

text here

You can also take away the border color and just leave the radius:

text here

I will stick with the plain table with no border or border radius for this tutorial.

inner container

The inner container will contain all the text styles that we want when we write in our table. To insert the inner container, you just put it right inside the other one:

[div style="margin:auto;max-width:500px;background-color:#ffffff;"][div]
text here

[/div][/div]

There can be quite a few properties in here. I will stick to the ones I typically use. Some of them will already be familiar to you from the outer container. These are margin:auto; and max-width.

For the max-width I usually set it in a range of 80-90%. It depends on how much space I want to put between my text and the edges of my table. In the original example, you will notice that my text bumps right up against the edge of the table. When we put the max-width in, it will shrink the inner container to only 80-90% of the width of the table, which in this case, will be 500px.

Let's experiment with this here:

[div style="margin:auto;max-width:500px;background-color:#ffffff;"][div style="margin:auto;"]
no max-width set

[/div][/div]

no max-width set

[div style="margin:auto;max-width:500px;background-color:#ffffff;"][div style="margin:auto;max-width:90%;"]
max-width at 90%

[/div][/div]

max-width at 90%

[div style="margin:auto;max-width:500px;background-color:#ffffff;"][div style="margin:auto;max-width:70%;"]
max-width at 70%

[/div][/div]

max-width at 70%

With this, you can see how adjusting the max-width will adjust the spacing around the text.

I'm going to go with 90%.

The next step will be stylizing my text. In addition to using max-width and margin:auto; I will be using this:

[div style="color:#888888;font-size:11px;font-family:helvetica;text-align:justify;line-height:1.4em;"]

A breakdown of what's happening here:

color:#888888; this is the color of the text. It again uses hexidecimal, keywords, or rgba.

font-size:11px; denotes the size of my font, which is 11px.

font-family:helvetica; denotes the font type or font family of my text.

text-align:justify; makes my text justify aligned. You can also specify left, right, or center.

line-height:1.4em; adjusts the line height of the text. Bigger will put more whitespace in between the lines and make it more readable. Here, I used 1.4em - em is just another measurement like px or %.

Now, we're going to put it all together in this table:

[div style="margin:auto;max-width:500px;background-color:#ffffff;"][div style="margin:auto;max-width:90%;color:#888888;font-size:11px;font-family:helvetica;text-align:justify;line-height:1.4em;"]
text here

[/div][/div]

text here

Looking pretty nice, right? Here's your first table!

some notes

Please note that the extra space at the bottom of the table examples is not just for show - it creates whitespace between the text and the bottom of your table. I personally don't mind having the extra space there, but if you would like to adjust this and not have to put an extra space at the bottom, you can add an additional property to your inner container called the padding property.

You will need to specify it as padding-bottom to pad the bottom of the table. Then you can put in an amount such as 20px.

[div style="margin:auto;max-width:500px;background-color:#ffffff;"][div style="margin:auto;max-width:90%;color:#888888;font-size:11px;font-family:helvetica;text-align:justify;line-height:1.4em;padding-bottom:20px;"]
text here
[/div][/div]

text here

If you would like to use border-radius with a table that has an image, you will also need to add border-radius to the image itself. If you do not, the image will still have square corners. Doing this is simple, however! All you need to do is add a style="" to the [img src=""] tag like so:

[img src="" style=""]

The caveat with this is that you will want only the top left border and the top right borders to have a radius, not the whole image. To do this, you will specify what border you want to have a radius using border-top-left-radius and border-top-right-radius.

An example using just the table we made:

[div style="margin:auto;max-width:500px;background-color:#ffffff;border-top-left-radius:90px;border-top-right-radius:90px;"][div style="margin:auto;max-width:90%;color:#888888;font-size:11px;font-family:helvetica;text-align:justify;line-height:1.4em;"]
text here

[/div][/div]

text here

the end

And that's the end of this tutorial! Hopefully it was easy enough to follow. If you have any questions or if you need help on a table, feel free to PM me or DM me on Discord.