Tables

<*div style="width:100px;height:100px;overflow:auto;border:2px solid; background:#HEXCODE;"*>TEXT<*/div>


<*table style="width:400px;border:2px solid;"*><*tr*><*th*>Header Text<*/*th><*/*tr><*tr*><*td*>Content Text<*/*td><*/*tr><*/*table>

Header Text
Content Text

You can change the size by changing the width and height px. The overflow:auto means that if you write larger than the table that the scroll bar will automatically show up. The border:1px is the standard border size. You can make the border thicker by increasing that. The background color can also be changed with the hex codes. If you want a transparent background, just take that out.

Scroll Boxes

<*div style="border:2px solid black;width:150px;height:100px;overflow-y:hidden;overflow-x:scroll;"*><*/div>

The one above creates a scrolling horizontal table. If you want a vertical one, simply change the overflow-y: to scroll instead of hidden and change the overflow-x to hidden instead of scroll.

Columned

<*table border="NUMBER HERE" cellpadding="NUMBER HERE" cellspacing="NUMBER HERE" width="NUMBER HERE"><*tr>
<*td>Column 1<*/td>
<*td>Column 2<*/td>
<*td>Column 3<*/td>
<*/tr><*/table>

Floating Boxes/Tables

<*div style="position:fixed;left:0px;bottom:0px;width:165px;height:200px;border:5px solid;overflow:auto;">TEXT<*/div>

Like the others you can resize this. These can only be used in dens. You can fix it anywhere in your den.

You have liked this post!

DIV Boxes

Scrolling Div Box with Background color
<*div style="width:300px;height:200px;background:#FFFF00;border:2px solid;"* class="scrollBox"*>Text<*/*div>


Regular Div Box
<*div style="width:300px;height:200px;"* class="scrollBox"*>Text<*/*div>

Side by Side Div Boxes
<*div style="width:800px;"*>
<*div style="width:#px;height:#px;float:left;background:#HEXCODE;border:#px solid;"* class="scrollBox"*>Text1<*/*div><*div style="width:#px;height:#px;float:right;background:#HEXCODE;border:#px solid;"* class="scrollBox"*>Text2<*/*div>
<*/*div>

It is vital that you do not add any spaces inbetween the two div boxes you type inside of or else they'll not be lined up correctly.

You have liked this post!

Image Overlay

You will need a image resizer to use this.
Photos from imgur are to large.
Yes, you can use Click-Able Links in the code
You may need to change the size of the box to fit your image better.

CURRENTLY DOES NOT WORK ON APPLE DEVICES.
I am working on trying to change that.

The code for: Lion Facing Left (1st Image) - 50% smaller
<*table style="width: 100%; height: 400px; border: 1px solid #000; background: url(URL here) width=400 center left no-repeat; padding: 10px; padding: none; font-size: 12px; border-radius: 5px;"> Text goes here.<*/*td><*/*tr><*/*table>

The code for: Lion Facing Right (2nd Image) - 50% Smaller
<*table style="width: 100%; height: 400px; border: 1px solid #000; background: url('URL here') center right no-repeat; padding: 10px; padding: none; font-size: 12px; border-radius: 5px;">Text goes here.<*/*td><*td><*/*td><*/*tr><*/*table>

What the code does: Lion Facing Left

Text goes here.

What the code does: Lion Facing Right

My kings link Slot 1: Brimstone Undersides Slot 2: Sunset Siamese Slot 3: Stratosphere Vitiligo Slot 4: Red Lace Slot 5: Noctis Soft Rosette Slot 6: Mottled Rosette Slot 7: Neutron Flare Slot 8: Brimstone Agouti Slot 9: Lycaon Scarce Noctis Slot 10: Noctis Heavy Rosette

Credit goes to: Punny Side Up
- Original poster stated that no credit is needed
- HOWEVER, If asked where to get this code please send them here or to Punny Side Up forum.

Additional Code:
<*table style="width: 450px;height: 350px;; border: 3px double aqua; background: url('https://i.imgur.com/N1g3c7K.jpg?4') center no-repeat;padding: 5px;padding: none;font color: aqua;font-size: 15px;border-radius: 5px;"*><*tr><*td valign="center" style="background: rgba(255, 255, 255,0.6);float:left;width: 50%;height: 100%;padding: 5px;font color: aqua;text-align: right;"*>

You have liked this post!