V5 || Anzie's Code Tutorial For Basic Tables

анзие (Anz)
Retired Staff

1,547 POSTS
last seen Jun 14, 2015 16:34:46 GMT -5

probably away

V5 || Anzie's Code Tutorial For Basic Tables Jan 1, 2014 11:39:40 GMT -5

Quote

Post by анзие (Anz) on Jan 1, 2014 11:39:40 GMT -5

Welcome to Anzie's code tutorial for basic tables! In this tutorial I aim to provide you the means to create your own tables, if you're willing to learn. I'm no expert, personally, but I like to think I know enough to help others.

C O N T E N T S

0: General overview on how tables are made.
1: Stretching your table
2: Padding vs Blockquote
3: Borders and Border-Radiuses
4: Borders II
5: Overflow/scroll
6: Opacity I/II
7: Tables within Tables
7a: Margins
8a: Simple Presto
8b: Complex Presto (Invisible Presto)
9: Table Placements

Part 0: A General Overview on v5

First things first. How are v5 codes different from v4? The answer is that in v4, coders would use a lot of table elements, whereas in v5 we deal mostly with div elements. What is a div element, you may ask? Well, div elements encapsulate "other page elements and divides the HTML document into sections" and create a container unit (think of a 2-dimension square!).

An example of a div element defining a code would be this:

[div align="centerORrightORjustify"]

So the text will look like this.

[div align="center"]So the text will look like this.[/div]
Keep in mind that if you would like to left-align your text, simply delete the code. It is not necessary to define left-align, as it is the default for the site and I believe Proboards as well.

Another example would be this code:

[div style="width:***px;height:***px;border:solid 1px #000;"]
The above container would not have a background but a border, which I added so you may see the results below:

[div style="width:200px;height:100px;border:solid 1px #000;"][/div]
>> you can use div style to create an entire table. More below.
>> You end all div codes with [/div][/i]

The codes above are simple; defining the height and width of the container is self-explanatory, really. The border code will be explained in part 3, so don't worry yourself too much.

As you by now can tell, div elements are very important in v5 - unless, of course, you'd quite like to use a font code instead.

[font face="georgia" size="2" color="#000000"][/font]

You no longer need to separate code elements. In V4, I believe you needed to separate the elements for each definition, like so:

[font="FONT FACE"][color="COLOR"][size="SIZE"]

That is not necessary in v5! Now, all three are defined by the same overarching element - that is, font.

Font face
Font size
Font color

(There are other ways to adjust your font as well, but those go under the div element; I won't confuse you unless you'd like me to.)

Note: if you want to align your text, that goes under div style. Also, if your code is for like, background color, remember to put a dash (-) between the words, so it becomes 'background-color'. In the same vein, 'text-align'.

There are two different ways to make tables now.

One will be this code:

[div align="center"][div style="width:350px;height:100px;background-color:#ffffff;border:2px inset;border-radius:10px;text-align:center;padding:10px;"]

[/div][/div]

which will look like this:

ayyyy

That in itself is a table. Albeit a one-celled table, but still.

This is also a table:

[div align="center"][table style="width:350px;height:100px;"][tbody][tr][td style="border:1px inset #ffffff;padding:0px;border-radius:10px;background-color:#000000;text-align:center;padding:10px;"]

ayyy

[/td][/tr][/tbody][/table][/div]

And that should give you:

ayyy

What's that? You want to design your table? No problem.

Because most of my own tables are using this code, I will be using the div style code over the table code, but I assure you that the basics are still the same - you just need to add in the extra code in the [*table] code

[div align="center"][div style="width:350px;height:100px;overflow:auto;background-color:#ffffff;border:2px inset;border-radius:10px;text-align:center;padding:10px;background-color:#ededed;"]

[font face="georgia" color="#000000"]ayyyy[/font]

[/div][/div]

ayyyy

Now, a quickie because it's getting super late here (I'll probably edit and explain some of the confusing ones tomorrow).

These are some codes to add into div style:

opacity:0.0-1.0 >> choose a number between 0 and 1
overflow:auto/scroll/visible >> this is for scrollbars, have a fixed height for this to work
background-image:url(URL HERE) >> pretty much self explanatory
padding:0px 0px 0px 0px >> for space between text and the side of the table
border-radius:10px >> this is for rounded corners - the higher the number, the larger the curve
margin-top/bottom/left/right: 0px >> to add space between the edge of the table/image and the text box

That last one kind of needs explaining so this is an example:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

without the 'margin-top' code that I added into this table, the textbox will end up like this

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Tada! That's it for now. I hope it helps~

Last Edit: Jan 4, 2015 16:58:20 GMT -5 by анзие (Anz)

✨ zozo. made this. she is my spirit animal.

basic table guide

анзие (Anz)
Retired Staff

1,547 POSTS
last seen Jun 14, 2015 16:34:46 GMT -5

probably away

V5 || Anzie's Code Tutorial For Basic Tables Jan 4, 2015 14:15:38 GMT -5

Quote

Post by анзие (Anz) on Jan 4, 2015 14:15:38 GMT -5

The following tutorials were written for Meghan by myself.

Alright, we'll start at the beginning. You already understand the basics of the table (how to give it a background and a size and et cetera), so I'll start you off with the issue you had (guessing the height of the table).

Part 1: Stretching your table

This is quite simple. If you want the table to stretch, you simply delete the height code from the div style section.

So your code from this

[div style="width:500px;height:900px;background-color:white;overflow:auto;"]
becomes

[div style="width:500px;background-color:white;overflow:auto;"]

(QUICK NOTE: if you don't want the scrollbar in your table, don't use overflow:auto; because that will give your table a scrollbar More on this in a bit.

Tada! Then you don't have to worry about guessing the height of your table.

What removing the height code does is allow the table attributes to exist, but ONLY if you type something between the [div*][/div*] code.

Let me show you.

With table height.

[div style="width:450px;height:200px;background-color:rgba(255,255,255,1);"]With table height.[/div]

Without table height.

Without table height.

and this

stretches

for
as
far

as

you

type.

[div style="width:450px;background-color:rgba(255,255,255,1);"]Without table height.[/div]

Part 2: Padding vs Blockquote

I notice that in your code you use the blockquote codes. I'm going to teach you a way where you don't have to use them multiple times to get them as indented as you like, if that makes sense at all.

Now, for the blockquote, there's a set space between the text and the edge of the table that one blockquote gives.

Without table height. Yadda yadda yadda. This is all a filler because I need text to show you what I'm trying to do. This table uses one blockquote code.

[div align="center"][div style="width:450px;background-color:rgba(255,255,255,1);text-align:justify;"][blockquote]Without table height. Yadda yadda yadda. This is all a filler because I need text to show you what I'm trying to do. This table uses one blockquote code.[/blockquote][/div][/div]

However, what if you only want the text a LITTLE bit away from the edge? And what if you want it away from the top and bottom, too?

You COULD just press enter...

Or you could use the padding code!

The following codes belong in the "div style" code.

padding: Apx Bpx Cpx Dpx;

NOTE AGAIN. I'm not sure if you've used this code before, but the pixels work clockwise. So A is 12 on the clock, B is 3, C is 6, D is 9. Directions wise, not the actual pixel size. xD

Let me know if you'd like me to talk about this with more depth.

So using the same code I had above...

Without table height. Yadda yadda yadda. This is all a filler because I need text to show you what I'm trying to do. This table uses padding: 20px 10px 20px 10px;

[div align="center"][div style="width:450px;background-color:rgba(255,255,255,1);text-align:justify;padding:20px 10px 20px 10px;"]Without table height. Yadda yadda yadda. This is all a filler because I need text to show you what I'm trying to do. This table uses padding: 20px 10px 20px 10px; [/div][/div]

Not only do you get space between the side of your table and your text, you get a space between the top of your table and your text! And it's adjustable, too!

One downside of the padding is that, if you have a set image width (say, 500px wide) and you add padding B and D, the table will stretch to add in that padding. So say you define the table width to be 500px as well, then add a padding: 0px 10px 0px 5px; the total width of the table will add up to 515px.

Same goes with height; if you have a fixed height and add padding: 2px 0px 10px 0px;, the table height will be a total of Ypx + 12px, Y being the original height of the table.

~~bad salesperson Anzie~~

Part 3: Borders and Border-Radiuses

Alright so. We'll start with borders on this one.

The following codes belong in the "style" code.

**MAY also be used in img style, span style and other style codes besides div style.

border:Apx solid #COLOR

And these are the other types of borders that proboards allow (replace with 'solid')

- groove

- inset

- solid

- double

- dashed

- dotted

I'm gonna guess you know how to use these xD But let me know if you're confused at any point.

Moving on to border-radius.

The following codes belong in the "style" code.

**MAY also be used in img style, span style and other style codes besides div style.

border-radius:Apx Bpx Cpx Dpx;

This code is defined just like the padding code, except it starts from the north-east corner and ends in north-west

Again, I'm going to assume you know how to use it!

That's it for now.
Would you be upset if I gave you an exercise?

If you don't mind, I want a table that is 300px wide exactly, has a padding of 20 on top, 7 on the left and right and 10 at the bottom and a grooved border of 10 pixels. You may pick the colors and font yourself. Write anything in it. xD

***Final note! I realize that when you wrote the font codes in your table, you split them to make them separate. in V4 this was necessary because the codes were simply color= size= font=. However, in V5 they start off with a single header: font.

[font face="georgia"][font size="1"][font color="#736850"][/font][/font][/font]
That was yours. Now you can simplify it to

[font face="georgia" size="1" color="#736850"][/font]
and it works exactly the same! (It defines the exact same part of text you need to define.)***

✨ zozo. made this. she is my spirit animal.

basic table guide

анзие (Anz)
Retired Staff

1,547 POSTS
last seen Jun 14, 2015 16:34:46 GMT -5

probably away

V5 || Anzie's Code Tutorial For Basic Tables Jan 4, 2015 14:16:29 GMT -5

Quote

Post by анзие (Anz) on Jan 4, 2015 14:16:29 GMT -5

Part 4: Borders II

So I promised really quickly to cover in more depth the border code.

You know what the borders can do, but if you want to adjust a different type of border on each side of your table, you can do that, too!

The following codes belong in the style code.

border-LEFT/RIGHT/TOP/BOTTOM:Apx TYPE #COLOR;

Basically the code only covers ONE side of the table. So, say you want to have a border on the left side of your shiny new table...

and there's only one border!
how did that happen oh my~~

[div align="center"][div style="width:300px;height:100px;background-color:lightpink;border-left:10px double #ffffff;"][font color="#410000"]and there's only one border!
how did that happen oh my~~[/font][/div][/div]

You can also do it on the top, right or bottom of your table, with any type or size of border.

and there's only one border!
how did that happen oh my~~

[div align="center"][div style="width:300px;height:100px;background-color:lightpink;border-top:10px double #ffffff;"][font color="#410000"]and there's only one border!
how did that happen oh my~~[/font][/div][/div]

However, if you'd like different types of borders, you can do this:

the borders look ugly but i'm just trying to give you an idea of what's going on

[div align="center"][div style="width:300px;height:100px;background-color:lightpink;border-top:10px double #ffffff;border-left:7px groove #68004b;border-right:20px dotted #8f0028;"][font color="#410000"]the borders look ugly but i'm just trying to give you an idea of what's going on :D[/font][/div][/div]

How did I do that? All I did was repeat the border-DIRECTION code, but changed the attributes of the borders every time.

That should be about it, really!

Part 5: Overflow/Scroll

This one is fairly simple. As you already know, the overflow code controls if the text spills out of the table or not.

The following codes belong in the style code.

overflow: DEFINITION;

The types of definitions are as follows:

>> overflow: auto

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

[div align="center"][div style="width:350px;height:100px;overflow:auto;background-color:#ffffff;border:2px inset;border-radius:10px;text-align:justify;padding:10px;"][font face="georgia" color="#000000"]Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum[/font][/div][/div]

And if the text is short enough to fit into the table without overflowing...

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

>> overflow: scroll

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

[div align="center"][div style="width:350px;height:100px;overflow:scroll;background-color:#ffffff;border:2px inset;border-radius:10px;text-align:justify;padding:10px;"][font face="georgia" color="#000000"]Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum[/font][/div][/div]

And shortened text...

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

As you can see, with 'auto', the scrollbar is not always there (if there is nothing exceeding the table, the scrollbar won't pop up), whereas with 'scroll', the scrollbar is constantly in your way (even if nothing exceeds the table height/width, the scrollbar will still be there).

***There are more definitions but they're quite useless. I think they're 'hidden', 'initial' and 'inherit', none of which I use in my tables. Hidden means there is no need for scroll whatsoever, initial means it sets it to the default value, and inherit means it'll inherit this property from its parent element.

>> so say I have two div style codes, one after another. The first one says 'overflow:auto'. If I use 'overflow:inherit' on the next div style, it'll also end up as 'overflow:auto'.

However, if you're confused by these codes, ignore them and go on to the next part.***

That about covers scroll, to be honest. If there's anything you need help with about scroll, let me know!

Part 6: Opacity I

Opacity is a simple code used to change the opacity of a table, surprisingly. This part is a bridge to part 7, but it'll be short, don't worry.

This is the code.

The following codes belong in the style code.

opacity:ANY VALUE BETWEEN 0 AND 1;

So let's say you want a table to be translucent so you can see a picture behind it. You simply add in this code, adjust the value and...

This is translucent even if you can't see it.

Aye this is great

[div align="center"][div style="width:300px;height:100px;opacity:0.8;overflow:auto;background-color:white;"][font color="#000000"]aye this is great[/font][/div]

And tada~~

Part 6: Opacity II

Besides that one opacity code, there is another way to simply adjust the opacity of the background and leave the opacity of the text to full.

The following codes belong in the style code.

background-color:rgba(255,255,255,0.6);

Now this code is pretty much the same as the usual background-color:#ffffff. The RGB is the number for red-green-blue, which you can find when you open the color wheel of any painting software - including paint, i believe. If you have no painting software, this site works totally fine for that

Since now you know what the rgb stands for, the a is for the opacity.

(R)255,(G)255,(B)255,(A)0.6

You simply put this ONE code in place of background-color:#ffffff;opacity:0.6;

and you get a great result!

aye this is great

[div align="center"][div style="width:300px;height:100px;overflow:auto;background-color:rgba(255,255,255,0.6);"][font color="#000000"]aye this is great[/font][/div][/div][/div]

Last Edit: Jan 4, 2015 14:53:03 GMT -5 by анзие (Anz)

✨ zozo. made this. she is my spirit animal.

basic table guide

анзие (Anz)
Retired Staff

1,547 POSTS
last seen Jun 14, 2015 16:34:46 GMT -5

probably away

V5 || Anzie's Code Tutorial For Basic Tables Jan 4, 2015 14:17:17 GMT -5

Quote

Post by анзие (Anz) on Jan 4, 2015 14:17:17 GMT -5

Part 7: Tables Within Tables

Also known as table-ception.

So right now you can make basic tables. With this part we'll take it to the next level and make tables much like this one, for example:

text goes here

[/div]

How do you get this?

We'll start with the basic table code.

and here we have a basic table in pink

[div align="center"][div style="width:500px;height:300px;background-color:#8f0028;"][font color="ffffff"]and here we have a basic table in pink[/font][/div][/div]

You take the style code, adjusting attributes...

[div style="width:300px;height:100px;background-color:#ffffff;"]

and put it back inside your first code.

and here we have a table within a table

[div align="center"][div style="width:500px;height:300px;background-color:#8f0028;"][div style="width:300px;height:100px;background-color:#ffffff;"][font color="#000000"]and here we have a table within a table[/font][/div][/div][/div]

You can of course substitute the background-color code for background-image:url(INSERT URL HERE); to use a picture as your background rather than colors.

So the table might end up looking something like this:

and here we have a table within a table

[div align="center"][div style="width:500px;height:300px;background-image:url(http://electrojams.com/wp-content/uploads/2012/03/nova-500x300.png);"][div style="width:300px;height:100px;background-color:#ffffff;"][font color="#000000"]and here we have a table within a table[/font][/div][/div][/div]

And using the opacity code from part 6-I:

and here we have a table within a table

[div align="center"][div style="width:500px;height:300px;background-image:url(http://electrojams.com/wp-content/uploads/2012/03/nova-500x300.png);"][div style="width:300px;height:100px;background-color:#ffffff;opacity:0.6;"][font color="#000000"]and here we have a table within a table[/font][/div][/div][/div]

Tada!

And now from 6-II:

and here we have a table within a table

[div align="center"][div style="width:500px;height:300px;background-image:url(http://electrojams.com/wp-content/uploads/2012/03/nova-500x300.png);"][div style="width:300px;height:100px;background-color:rgba(255,255,255,0.6);"][font color="#000000"]and here we have a table within a table[/font][/div][/div][/div]

Before I go on into presto or anything, I'll show you the codes to move the inner table wherever you like.

--

Part 7a: Margins

The following codes belong in the style code.

margin-TOP/RIGHT/LEFT/BOTTOM:Apx

Okay, so... say you have this table.

and here we have a table within a table

and you want to detach the white part of the table from the top. You could, of course, simply push the enter button... but what if you want it off-center?

That's where the margin code comes in.

NOTE: the direction of the code (ie: margin-right) shows from where the margin is being pushed. So if you type margin-right:200px; the inner table will be shoved 200px to the left.

Also, ALWAYS detach the inner table code from the outer table code. Otherwise the attribute applies to the whole table, not just the table you're trying to define, if this makes sense. I'll show you an example in a bit.

The code is applied on the table you're trying to move.

and here we have a table within a table

[div align="center"][div style="width:500px;height:300px;background-image:url(http://electrojams.com/wp-content/uploads/2012/03/nova-500x300.png);"]
[div style="width:300px;height:100px;background-color:#ffffff;opacity:0.6;margin-top:150px;***This is where the margin code is***"][font color="#000000"]and here we have a table within a table[/font][/div][/div][/div]

Okay, so if you don't detach the inner code from the outer, this happens.

and here we have a table within a table

[div align="center"][div style="width:500px;height:300px;background-image:url(http://electrojams.com/wp-content/uploads/2012/03/nova-500x300.png);"][div style="width:300px;height:100px;background-color:#ffffff;opacity:0.6;margin-top:150px;"][font color="#000000"]and here we have a table within a table[/font][/div][/div][/div]

The whole table gets shoved down 150 pixels.

To detach, just hit the enter button

Exercise time!

1) Create a 500x300 scroll table with varying borders of different types and sizes. You may choose the type and colors.

2) Create a table within a table. Use this image as your background. It is sized 500x400.

The inner table must be translucent and scroll, with a 2px solid border all around. There must be a margin from the top of at least 100px, and from the left of at least 200px.

Choose whichever colors you prefer.

If you have questions please ask

Next time, we'll start on presto and the table placements.

Last Edit: Jan 4, 2015 14:55:12 GMT -5 by анзие (Anz)

✨ zozo. made this. she is my spirit animal.

basic table guide

анзие (Anz)
Retired Staff

1,547 POSTS
last seen Jun 14, 2015 16:34:46 GMT -5

probably away

V5 || Anzie's Code Tutorial For Basic Tables Jan 4, 2015 14:19:17 GMT -5

Quote

Post by анзие (Anz) on Jan 4, 2015 14:19:17 GMT -5

Part 8a: Simple Presto

Moving onto the presto!

The code for presto is, shockingly...

This code wraps around the div or image codes.

[presto*][*/presto]

*** without the asterisks
The presto is quite simple. Think of it working in layers, like cake!

[presto]

I'll state my case of which I'm certain
I've lived a life that's full
I've traveled each and every highway
And more, much more than this
I did it my way

[/presto]

[*presto][img alt=" " src="http://i42.tinypic.com/m7cbo5.png" style="max-width:100%;"][div style="height:80px;width:280px;overflow:auto;text-align:center;opacity:0.6;padding:10px 10px 10px 10px;background-color:#ffffff;"][font face="georgia" color="#000000" size="1"][i]I'll state my case of which I'm certain
I've lived a life that's full
I've traveled each and every highway
And more, much more than this
I did it my way[/i][/font][/div][*/presto]

You open with the presto code. The code wraps around everything that you want involved in the vanishing process.

Then you put the bottom layer, which is usually the image.

This is immediately followed by the second image, or in the case of the code above, the part of the presto where you put in text. (So, basically, a basic table).

You close ALL the codes before you close the presto code.

And that's it!

So, presto - image - image/table - close

Note that the presto code is very likely to break the first time you post it, and it also doesn't show up in preview. So don't worry about all that

Exercise!
1) Make me an image presto with any two images of the same size.
2) Make me a table presto with this image. Give the image a 5px solid border in any color.

If you have questions don't hesitate to ask. (PM me, please avoid posting here).

✨ zozo. made this. she is my spirit animal.

basic table guide

анзие (Anz)
Retired Staff

1,547 POSTS
last seen Jun 14, 2015 16:34:46 GMT -5

probably away

V5 || Anzie's Code Tutorial For Basic Tables Jan 4, 2015 14:23:02 GMT -5

Quote

Post by анзие (Anz) on Jan 4, 2015 14:23:02 GMT -5

Part 9: Complex Presto (Invisible Presto)

So what if you don't want the text area, when it appears, to cover the entire picture? What if you want it contained in a little box off to the side? Or just partially over the picture?

first last
district | age | gender | fc

[presto]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean auctor ipsum diam. Maecenas fringilla tortor non elementum ultricies. Curabitur aliquam leo sed erat lacinia venenatis. Proin ante tortor, volutpat eleifend nisl ac, suscipit tempus ante. Aenean a volutpat risus, quis rhoncus sapien. In consequat feugiat enim, sit amet fringilla ante aliquam a. Nullam ac urna sed mauris bibendum rhoncus nec in metus. Aliquam euismod, leo eget pretium faucibus, ipsum mi fermentum mauris, auctor consequat risus est sed enim. Pellentesque sollicitudin arcu in malesuada volutpat. Pellentesque vel metus iaculis, sodales tellus ut, aliquam est.

"Curabitur sodales feugiat iaculis. Vivamus a consectetur metus, sed pretium odio. Pellentesque rhoncus leo lectus, eu eleifend lectus dapibus at. Aliquam rutrum nisi ut neque pharetra dictum. Proin lacus ligula, imperdiet vitae arcu ac, placerat pellentesque odio. Integer lorem nibh, luctus ut convallis eget, dictum id dui. Ut pellentesque facilisis magna, vitae bibendum ipsum bibendum sit amet. Quisque facilisis purus vel est gravida, id tincidunt dolor blandit. Phasellus turpis nunc, ullamcorper non erat in, facilisis pretium erat. Quisque nec metus vehicula, commodo nibh nec, pretium libero. Phasellus ut tristique est. Mauris ornare nunc elit, vel auctor mauris consectetur condimentum. Pellentesque eu gravida nisi. Suspendisse odio dolor, tincidunt eget nisl quis, posuere porta justo. Ut vitae laoreet ante, id cursus enim.

[/presto]

Today, I will be teaching you how to make something like this.

It's the same concept, don't worry. All it involves is an empty picture and presto :D

***it's very useful if you have photoshop or GIMP as they allow blank images to be rendered.

There's an image above this line.

Basically, it's the same as using any picture and making it presto. Except you render a smaller blank image instead of cropping out... say... your FC's picture to use.

[presto]

words

There is simply nothing worse
Than knowing how it ends
And I meant everything I said that night
I will come back to life
But only for you

[/presto]

Hover over the above.

[**presto][img alt=" " src="http://i43.tinypic.com/2eov0qb.png" style="max-width:100%"][div style="float:center;height:200px;width:350px;border:0px solid #ffffff;border-radius:20px;margin-bottom:15px;background-color:#ffffff;"][div align="center"][div style="height:180px;width:340px;overflow:auto;padding:10px 90px 10px 10px;border:0px solid #ffffff;border-radius:20px;margin-bottom:15px;text-align:justify;background-color:transparent;line-height:1em;"][font face="candara" color="#506067"]words
[div align="center"][font color="B5F4CF"][i]There is simply nothing worse
[font color="93C3AC"]Than knowing how it ends
[font color="72928A"]And I meant everything I said that night
[font color="506067"]I will come back to life
[font color="2E2F44"]But only for you[/font][/font][/font][/font][/i][/font][/div][/font][/div][/div][/presto]

If you need further explanation, hit me up.

Part 9: Table placements

I told you earlier that this involves a whole different set of codes and I'm not lying.

Row 1 column 1	Row 1 column 2
Row 2 column 1	Row 2 column 2

[table][tbody]
[tr]
[td style="border: 1px solid #000;"]Row 1 column 1[/td]
[td style="border: 1px solid #000;"]Row 1 column 2[/td]
[/tr]
[tr]
[td style="border: 1px solid #000;"]Row 2 column 1[/td]
[td style="border: 1px solid #000;"]Row 2 column 2[/td]
[/tr]
[/tbody][/table]

Yeah, I cheated. I used this little button:

that brings up this menu:

And adjusted the elements from there.

So anyway! One of your specific requests was how the Aetherians made their pastel table. In this part I'll show you how it's done.

-------------------------

How many columns does the table have? How many rows?

The table they made had two columns (text - image), and three rows (name / text / ooc notes).

Let me show you.

(For this table you want to get rid of cellpadding because it'll make spaces between your tables and that is incredibly uncool.)

Row 1 column 1	Row 1 column 2
Row 2 column 1	Row 2 column 2
Row 3 column 1	Row 3 column 2

[table][tbody][tr][td]Row 1 column 1[/td][td]Row 1 column 2[/td][/tr][tr][td]Row 2 column 1[/td][td]Row 2 column 2[/td][/tr][tr][td]Row 3 column 1[/td][td]Row 3 column 2[/td][/tr][/tbody][/table]

Now, you want to adjust the attributes of the table. You can either do this in the [td*] code, like so:

td style="ATTRIBUTES"

or you can just put in a div style around your text like so:

td - div style="ATTRIBUTES" - text here - /div - /td

Sometimes you might have to use both, you feel me?

Row 1 column 1	Row 1 column 2
Row 2 column 1	Row 2 column 2
Row 3 column 1	Row 3 column 2

[table][tbody][tr][td style="text-align:center;height:100px;width:250px;background-color:rgb(233, 152, 171);"][font color="#00234b"]Row 1 column 1[/font][/td]
[td]Row 1 column 2[/td][/tr][tr]
[td style="text-align:center;height:300px;width:250px;background-color:rgb(221, 38, 81);"][font color="#ffffff"]Row 2 column 1[/font][/td]
[td]Row 2 column 2[/td][/tr][tr]
[td style="text-align:center;height:100px;width:250px;background-color:rgb(233, 152, 171);"][font color="#ffffff"]Row 3 column 1[/font][/td]
[td]Row 3 column 2[/td][/tr][/tbody][/table]

****don't worry about the rgb thing, i went to preview for a second but i swear they were hex codes before.

And now you need your image in that right column there~

Row 1 column 1
Row 2 column 1	Row 2 column 2
Row 3 column 1	Row 3 column 2

And... oh dear, it looks like it doesn't span across all three rows. What do we do now?

td rowspan="NUMBER OF ROWS"

This is a very important code that allows a single table cell to span across however many rows you like. Its partner in crime is td colspan="NUMBER OF COLUMNS".

So you add this to the first row's second column - which is row 1 column 2.

Row 1 column 1
Row 2 column 1		Row 2 column 2
Row 3 column 1		Row 3 column 2

[table][tbody][tr][td style="text-align:center;height:100px;width:250px;background-color:rgb(233, 152, 171);"][font color="#00234b"]Row 1 column 1[/font][/td][td rowspan="3" style="width:100px;height:500px;][img src="http://placehold.it/100x500"][/td][/tr][tr][td style="text-align:center;height:300px;width:250px;background-color:rgb(221, 38, 81);"][font color="#ffffff"]Row 2 column 1[/font][/td][td]Row 2 column 2[/td][/tr][tr][td style="text-align:center;height:100px;width:250px;background-color:rgb(233, 152, 171);"][font color="#ffffff"]Row 3 column 1[/font][/td][td]Row 3 column 2[/td][/tr][/tbody][/table]

And then you just get rid of the other two 'column 2' cells.

*** do not touch the [tr*] cells!

Row 1 column 1
Row 2 column 1
Row 3 column 1

[table][tbody][tr][td style="text-align:center;height:100px;width:250px;background-color:rgb(233, 152, 171);"][font color="#00234b"]Row 1 column 1[/font][/td][td rowspan="3" style="width:100px;height:500px;"][img src="http://placehold.it/100x500" style="max-width:100%;"][/td][/tr][tr][td style="text-align:center;height:300px;width:250px;background-color:rgb(221, 38, 81);"][font color="#ffffff"]Row 2 column 1[/font][/td][/tr][tr][td style="text-align:center;height:100px;width:250px;background-color:rgb(233, 152, 171);"][font color="#ffffff"]Row 3 column 1[/font][/td][/tr][/tbody][/table]

And voila! That is roughly how their tables look like :D

Last Edit: Jan 7, 2015 13:59:32 GMT -5 by анзие (Anz)

✨ zozo. made this. she is my spirit animal.

basic table guide

анзие (Anz) Retired Staff 1,547 POSTS last seen Jun 14, 2015 16:34:46 GMT -5 probably away	V5 \|\| Anzie's Code Tutorial For Basic Tables Jan 4, 2015 14:26:36 GMT -5 Quote Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by анзие (Anz) on Jan 4, 2015 14:26:36 GMT -5 Please refrain from practicing on this thread. Go ahead and practice on the v5 formatting thread under templates and tables on the site itself If you have questions, don't hesitate to PM me.
	✨ zozo. made this. she is my spirit animal. basic table guide