yogurt
in
iconsanity
User info tutorial/TABLES
O hay! For some reason, I feel like doing something completely out of the norm. I want to make a userinfo tutorial.
This tutorial is made by using tables. I want you guys to be aware that I will not go into the step-by-steps of making tables. Either you can go look up great websites that teach you how to make them but I will have to stress to you that YOU MUST HAVE KNOWLEDGE OF THE TABLE TO UNDERSTAND THIS TUTORIAL! Sorry guys.
However, you can ask questions in comments and I'll help you~.
STEP01.EASY
This first design will be quite simple, dealing with only one table. You can do anything to this type of design. The best thing to snaz it up would be to pair it with an awesome image right ontop of it.. which surprisingly doesn't even need a table of its own! It just needs to be conveniantly placed right on top.
STUFF IN HERE~ yay.
STUFF IN HERE~ yay.
The above code is the simplest one you can manipulate into a user info. Usually it looks boring if you have a block floating there without any color or header images. So I'll help show you how to make one with a header image ontop of it:
width="300px" border="0"> width="300px" bgcolor="#CCCCCC"> STUFF IN HERE~ yay.
STUFF IN HERE~ yay.
I'm highlighting the center tags only to tell you that they're optional when you're adding an image to a simple table.
Pay attention to the width when you're adding an image. You want to keep it the same amount of pixels.
Also, pay attention to the background color. Generally, it looks best if you keep it the same color with the background color of your image.
STEP02.MEDIUM
This next design is only building off the first one, turning it into two tables. The fun thing about this idea is you can basically do whatever you want with two tables, but make sure you use them to their full potential! Making them different background colors and whatnot will make them stand out.
BLAHBLAHBLAH STUFF IN HERE~ yay.
BLAHBLAHBLAH STUFF IN HERE~ yay.
Basically, adding a "bgcolor" to the tag will over ride the table's background color.
You can play this up with an image, like I showed you in the easy part of this tutorial, or you can leave it as it is. The funnest way to play this up is multiplying your tables; using the top one as a header.. like so:
ABOUT THIS TUTORIAL I'm totally awesome, dudes. I'm making a user info tutorial based on tables. :D YOU SHOULD READ IT.
WOAH DUDE A TITLE I'd make up something smart or witty to say but I'm just not in the mood. :(
ABOUT THIS TUTORIAL I'm totally awesome, dudes. I'm making a user info tutorial based on tables. :D YOU SHOULD READ IT.
WOAH DUDE A TITLE I'd make up something smart or witty to say but I'm just not in the mood. :(
...and so on. See, it looks uber boring in shades of gray.. so like I said; use lots of colors! They're fun and don't bite, I promise~.
STEP03.HARD
Again, building off the previous two user info ideas you can go further into creating a tri-tabled layout. This would be the hardest of all three only because of the attention you'd have to pay to your coding. You can make a stylized profile with a header or something cool.
cellpadding="8" cellspacing="0" width="300px" bgcolor="#CCCCCC"> BLAHBLAHBLAH STUFF IN HERE~ yay. Oh wait I have to talk more so you can see these are two columns. Lol, double yay! HEY MA, LOOK AT ME! Its kind of like I'm seeing in doubles! Isn't this so cool?
BLAHBLAHBLAH STUFF IN HERE~ yay. Oh wait I have to talk more so you can see these are two columns. Lol, double yay! HEY MA, LOOK AT ME! Its kind of like I'm seeing in doubles! Isn't this so cool?
Pay attention to the cellpadding while working with columns. If you have too little of a number, you wont be able to tell the text apart because they'd be too squished together.
Also, take note of the colspan tag. It stretches the first table over the other two, so make sure if you add more columns.. that you need to make that number higher.
You can make this into two columns, or even three! Or four! If you'd like to learn how to add more, just comment here and I'll explain it for you in a little bit more detail.
THE BONUS
This is how to make the rounded corner user info without the use of random CCS coding with tables~.
TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT
Save the following images and upload them to your own image host:
tabletop.gif
middle.gif
tablebottom.gif
If you want other colors, or sizes, please leave a comment!
Now that you get the idea, go play around with tables! Make your profile snazzy! Most of all, have fun~. Its great being creative. You just need a little shove in the right direction sometimes. Thanks for reading this tutorial, now go get busy. ♥
(This tutorial was originally 213457192835 times longer but I had to cut it down, sorry if its confusing in any way. I'm not very good when it comes to teaching people how to do stuff. Haha.)
This tutorial is made by using tables. I want you guys to be aware that I will not go into the step-by-steps of making tables. Either you can go look up great websites that teach you how to make them but I will have to stress to you that YOU MUST HAVE KNOWLEDGE OF THE TABLE TO UNDERSTAND THIS TUTORIAL! Sorry guys.
However, you can ask questions in comments and I'll help you~.
STEP01.EASY
This first design will be quite simple, dealing with only one table. You can do anything to this type of design. The best thing to snaz it up would be to pair it with an awesome image right ontop of it.. which surprisingly doesn't even need a table of its own! It just needs to be conveniantly placed right on top.
STUFF IN HERE~ yay.
STUFF IN HERE~ yay.
The above code is the simplest one you can manipulate into a user info. Usually it looks boring if you have a block floating there without any color or header images. So I'll help show you how to make one with a header image ontop of it:
width="300px" border="0"> width="300px" bgcolor="#CCCCCC"> STUFF IN HERE~ yay.
STUFF IN HERE~ yay.
I'm highlighting the center tags only to tell you that they're optional when you're adding an image to a simple table.
Pay attention to the width when you're adding an image. You want to keep it the same amount of pixels.
Also, pay attention to the background color. Generally, it looks best if you keep it the same color with the background color of your image.
STEP02.MEDIUM
This next design is only building off the first one, turning it into two tables. The fun thing about this idea is you can basically do whatever you want with two tables, but make sure you use them to their full potential! Making them different background colors and whatnot will make them stand out.
BLAHBLAHBLAH STUFF IN HERE~ yay.
BLAHBLAHBLAH STUFF IN HERE~ yay.
Basically, adding a "bgcolor" to the tag will over ride the table's background color.
You can play this up with an image, like I showed you in the easy part of this tutorial, or you can leave it as it is. The funnest way to play this up is multiplying your tables; using the top one as a header.. like so:
ABOUT THIS TUTORIAL I'm totally awesome, dudes. I'm making a user info tutorial based on tables. :D YOU SHOULD READ IT.
WOAH DUDE A TITLE I'd make up something smart or witty to say but I'm just not in the mood. :(
ABOUT THIS TUTORIAL I'm totally awesome, dudes. I'm making a user info tutorial based on tables. :D YOU SHOULD READ IT.
WOAH DUDE A TITLE I'd make up something smart or witty to say but I'm just not in the mood. :(
...and so on. See, it looks uber boring in shades of gray.. so like I said; use lots of colors! They're fun and don't bite, I promise~.
STEP03.HARD
Again, building off the previous two user info ideas you can go further into creating a tri-tabled layout. This would be the hardest of all three only because of the attention you'd have to pay to your coding. You can make a stylized profile with a header or something cool.
cellpadding="8" cellspacing="0" width="300px" bgcolor="#CCCCCC"> BLAHBLAHBLAH STUFF IN HERE~ yay. Oh wait I have to talk more so you can see these are two columns. Lol, double yay! HEY MA, LOOK AT ME! Its kind of like I'm seeing in doubles! Isn't this so cool?
BLAHBLAHBLAH STUFF IN HERE~ yay. Oh wait I have to talk more so you can see these are two columns. Lol, double yay! HEY MA, LOOK AT ME! Its kind of like I'm seeing in doubles! Isn't this so cool?
Pay attention to the cellpadding while working with columns. If you have too little of a number, you wont be able to tell the text apart because they'd be too squished together.
Also, take note of the colspan tag. It stretches the first table over the other two, so make sure if you add more columns.. that you need to make that number higher.
You can make this into two columns, or even three! Or four! If you'd like to learn how to add more, just comment here and I'll explain it for you in a little bit more detail.
THE BONUS
This is how to make the rounded corner user info without the use of random CCS coding with tables~.
TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT
Save the following images and upload them to your own image host:
tabletop.gif
middle.gif
tablebottom.gif
If you want other colors, or sizes, please leave a comment!
Now that you get the idea, go play around with tables! Make your profile snazzy! Most of all, have fun~. Its great being creative. You just need a little shove in the right direction sometimes. Thanks for reading this tutorial, now go get busy. ♥
(This tutorial was originally 213457192835 times longer but I had to cut it down, sorry if its confusing in any way. I'm not very good when it comes to teaching people how to do stuff. Haha.)