?

Log in

 
 
18 November 2006 @ 02:15 am
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.
<table border="0" cellpadding="0" cellspacing="0" width="300px" bgcolor="#CCCCCC"> <tr> <td> <font size="1" color="#000000"> STUFF IN HERE~ yay. </font> </td> </tr> </table>
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:

<center> <img src="/USERINFOIMAGE.jpg" width="300px" border="0"> <table border="0" cellpadding="0" cellspacing="0" width="300px" bgcolor="#CCCCCC"> <tr> <td> <font size="1" color="#000000"> STUFF IN HERE~ yay. </font> </td> </tr> </table> </center>
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.
<table border="0" cellpadding="0" cellspacing="0" width="300px" bgcolor="#CCCCCC"> <tr bgcolor="#999999"> <td> <font size="1" color="#000000"> BLAHBLAHBLAH </font> </td> </tr> <tr> <td> <font size="1" color="#000000"> STUFF IN HERE~ yay. </font> </td> </tr> </table>
BLAHBLAHBLAH
STUFF IN HERE~ yay.


Basically, adding a "bgcolor" to the <tr> 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:
<table border="0" cellpadding="0" cellspacing="0" width="300px" bgcolor="#CCCCCC"> <tr bgcolor="#999999"> <td> <font size="1" color="#000000"> ABOUT THIS TUTORIAL </font> </td> </tr> <tr> <td> <font size="1" color="#000000"> I'm totally awesome, dudes. I'm making a user info tutorial based on tables. :D YOU SHOULD READ IT. </font> </td> </tr> </table>
<table border="0" cellpadding="0" cellspacing="0" width="300px" bgcolor="#CCCCCC"> <tr bgcolor="#999999"> <td> <font size="1" color="#000000"> WOAH DUDE A TITLE </font> </td> </tr> <tr> <td> <font size="1" color="#000000"> I'd make up something smart or witty to say but I'm just not in the mood. :( </font> </tr> </td> </table>
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.
<table border="0" cellpadding="8" cellspacing="0" width="300px" bgcolor="#CCCCCC"> <tr bgcolor="#999999"> <td colspan="2"> <font size="1" color="#000000"> BLAHBLAHBLAH </font> </td> </tr> <tr> <td> <font size="1" color="#000000"> STUFF IN HERE~ yay. Oh wait I have to talk more so you can see these are two columns. Lol, double yay! </font> </td> <td> <font size="1" color="#000000"> HEY MA, LOOK AT ME! Its kind of like I'm seeing in doubles! Isn't this so cool? </font> </td> </tr> </table>
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~.
<table width="450" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <img src="TABLETOP.gif"> </td> </tr> <tr> <td align="center" background="MIDDLE.gif"> <div align="center"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="7%"> </td> <td width="87%"> <font face="times new roman" color="#000000" size="1"> </font> </td> <td width="6%"> TEXT TEXT TEXT TEXT TEXT </td> </tr> </table> </div> </td> </tr> <tr> <td align="center"> <img src="BOTTOMTABLE.gif"> </td> </tr> </table>
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.)
 
 
Current Mood: bouncybouncy
 
 
 
viride on May 27th, 2007 01:56 am (UTC)
Thanks for the tutorial! You can't imagine how useful this is to me. I have some knowledge of tables, but I can't get the codes right - too much tags and the such.
The "bonus step" looks quite nice - I'll try it later! Ok, now I'll follow your advice and go get busy. Thanks again!
(Deleted comment)