Masterlist of Table Codes

I have compiled a list of all of the non-newclass table codes I know. In this guide, I won't be going much into depth on how to use the codes and make tables, as анзие (Anz) already made a wonderful guide for that, here. This guide focuses on all of the codes available for non-newclass tables. I thought this would be nice for members who are learning how to code tables as well as members who want to learn new ways to style their tables.

TABLE OF CONTENTS ;;

I. Basics
II. Backgrounds
III. Borders
IV. Padding
V. Text style
VI. Scrolls
VII. Opacity
VIII. Margins
IX. Presto

BASICS ;;

This is the very base of a table, what I start with every time I create a new one.

[div style="width:000px;height:000px;"][/div]

You can remove the height or width if you desire the table to not have a fixed height or width. Every time you add in a new piece of code, separate it with a semicolon, the way width and height are separated above.

BACKGOUNDS ;;

Solid color background:

background-color:#000000;

Preview:

Image background:

background-image:url(PASTE LINK TO IMAGE BETWEEN THESE PARENTHESIS);

Preview:

No background/transparent background:

For this, you could just leave out the code for background all together, or you could do this:

background-color:#transparent;

Background position:

background-position:center/left/right;

Preview:

I personally don't really use this code, but this is best used when you use an image for a background and you don't want to resize the background to fit the table. In this case, if you want a certain part of the background to show, you can reposition the image with this code. In this table, I used the same image I did for the "image background" section, but it looks different because the image has been repositioned to the center.

BORDERS ;;

Border styles:

border:solid/dotted/dashed/double/inset/groove 0px #ffffff;

Preview:

You may also choose to have borders on some sides but not others.

border-right/left/top/bottom:solid/dotted/dashed/double/inset/groove 1px #ffffff;

Preview:

Rounded borders:

border-radius:1px 1px 1px 1px;

Preview:

PADDING ;;

padding:10px 10px 10px 10px;

Preview:

text text text text text text text text text text text text text text text text text text text text

Without padding, a table with text would look like this:

text text text text text text text text text text text text text text text text text text text text

Because I think padding is easily confusing, I'm going to clarify on this.

Padding creates a margin, a space between the text and the table. It will also make the table wider or longer, depending on where you add the padding. To avoid making a table too large, you can decrease the height or width according to how much padding you add.

For example, if you have a 400px x 400px table, and you add 20px of padding to every side, you would subtract 20 from 400, so to keep the width and height the same, you would change it to 380px x 380px.

TEXT STYLE ;;

Alignment:

text-align:justify/center/left/right;



Letter spacing:

letter-spacing:0px;

Preview:

you're ripped at every edge but you're a masterpiece

Line height:

line-height:0px;

Preview:

you're ripped at every edge
but you're a masterpiece

Font family:

font-family:INSERT FONT NAME HERE;

Preview:

times new roman, arial, comic sans, courier new, arial narrow, georgia, impact, verdana, mistral, papyrus, simsun, century, tahoma, autumn, lucida console, helvetica

Font size:

font-size:0px;

Preview:

8px

9px

10px

11px

12px (and so on)

Font color:

color:#ffffff;

Preview:

covered in colors

Upper or lowercase:

text-transform:uppercase/lowercase/capitalize;

Preview:

but we don't feel like outsiders at all

we are the new americana

i'm a hurricane

Text decoration:

text-decoration:overline/line-through/underline;

Preview:

low on self-esteem, so you run on gasoline

but do you feel like a young god?

i'm such a fool for sacrifice, he's coming down

Font variant:

font-variant:small-caps/default;

Preview:

i'm begging you to keep on haunting

but for now, let's get away on a roman holiday

Italic font:

font-style:italic;

Preview:

we wrote a story in the fog on the windows that night

Bold font:

font-weight:bold;

Preview:

don't belong to no city

Shadowed text:

text-shadow:0px 0px 0px #000000;

Preview:

my heart is gold and my hands are cold

The higher each px is, the lower the shadow will be.

SCROLLS ;;

Normal:

overflow:scroll;

Preview:

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Auto:

overflow:auto;

Preview:

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

OPACITY ;;

opacity:.3

Preview:

No opacity:

art is not what i create

With opacity:

what i create is chaos

The lower the opacity, the more faded the table will be. You can choose numbers (including decimals) between 0 and 1.

MARGINS ;;

margin-top/bottom/right/left:1px;

To clarify: this can only be used if you have a table within another table. This code will create a space between the edge of the first table and the table inside of the first table.

Preview:

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

PRESTO ;;

Image to table:

[presto*][img src="http://" alt=" "][div style="width:200px;height:100px;background-color:#000000;"][/div][/presto*]

Remove the * before using.

Preview:

[presto]

i promised myself i wouldn't let you complete me

[/presto]

Image to another image:

[presto*][img src="http://" alt=" "][img src="http://" alt=" "][/presto*]

Remove the * before using.

Preview:

[presto][/presto]

Note: I have not added in tabbed tables in this list because they are very complicated. However, I will be making a guide on how to create tabbed tables, which I will link once it is complete.

Please shoot me a DM via slack or PM me on the site if I am missing any codes or if you are confused on anything listed in this guide!