A Small Table/Style Coding Tutorial
Jul 16, 2012 13:48:38 GMT -5
Post by Cole "Grifter" Cash on Jul 16, 2012 13:48:38 GMT -5
Hello There! Welcome to Table Coding with Bry. I've noticed that so many people around the internet don't know how to make an attractive table. It's a skill that is useful in today's society, so I decided to venture forth and teach the disenlightened.
I'm not a master coder, so I'm not an expert about all this. This is for basic help. If you want help on advanced tables, go to Caution 2.0 and pick up some tips and things there.
Also, if you feel uncomfortable doing this for yourself, just get me a shoutout in my coding thread (go back a page and click on the thread, 'Bry's Spot ~ Now a Shop, Too!') I would be glad to make something or help you :)
Anyway, without further ado.
Basically, what coding is can be broken down into several different parts. There's the advanced table tags end, which is a bit more complicated, and then there's the 'style' end of it. This latter is the method I use and one that's simple. You can do almost everything with style tags, and its easy to remember.
I find that it helps me a lot when I quote someone else's table and look at the coding. So, let's do that.
Thisis was one of Hawkeye's tables, one of my old customs that I made myself:
[/size][style=width:430; height:490; background-color:333333; padding:5; text-align:justify; font-family:verdana; font-size:11px; color:white; overflow:auto] ~~~~Sample~~~~I'm not a master coder, so I'm not an expert about all this. This is for basic help. If you want help on advanced tables, go to Caution 2.0 and pick up some tips and things there.
Also, if you feel uncomfortable doing this for yourself, just get me a shoutout in my coding thread (go back a page and click on the thread, 'Bry's Spot ~ Now a Shop, Too!') I would be glad to make something or help you :)
Anyway, without further ado.
Basically, what coding is can be broken down into several different parts. There's the advanced table tags end, which is a bit more complicated, and then there's the 'style' end of it. This latter is the method I use and one that's simple. You can do almost everything with style tags, and its easy to remember.
I find that it helps me a lot when I quote someone else's table and look at the coding. So, let's do that.
This
}--Hawkeye-->
Usually you would write something here, your roleplaying text ninety nine percent of the time. Coding is usually not used for out-of-character posts.[/div][/style]
Tags: Table/Style coding tutorial :: general board :: Won't Back Down
Word Count: This is a Sample, therefore it needs no word count.
Muse: N/A~
Notes:This table is in the tutorial thread.
Word Count: This is a Sample, therefore it needs no word count.
Muse: N/A~
Notes:This table is in the tutorial thread.
Aaand here's the code:
[div style="width:440; padding:0px 25px 25px 25px; border-left:5px solid; border-right:5px solid; border-top:5px solid; border-color:600080"][left][size=5][color=BF00FF]}--[font=zapfino]Hawkeye[/font]-->[/color][/left][/size][style=width:430; height:490; background-color:333333; padding:5; text-align:justify; font-family:verdana; font-size:11px; color:white; overflow:auto] ~~~~Sample~~~~[/div][/style][div style="width:460; height:100; background-color:8600B3; padding:15; border-right:5px solid; border-left:5px solid; border-bottom:5px solid; border-color:600080; text-align:center; text-transform:uppercase; font-family:verdana; font-style:italic; font-size:12px; color:white"][b]Tags:[/b] Table/Style coding tutorial :: general board :: Won't Back Down
[b]Word Count:[/b] This is a Sample, therefore it needs no word count.
[b]Muse:[/b] N/A~
[b]Notes:[/b]This table is in the tutorial thread.[/div][/center]Alright, let's break it down. The first thing you will notice, starting from the top, is a set of brackets, [] with a word, [*style=], (disregard the star, that's so the code doesn't go all official on me), and then perhaps if you're looking at it for the first time, mumbo jumbo.
At first when I looked at all that I was so confused. You're probably feeling the same way right about now. How to sort through this mess?
I think it may help to go through this slowly. Look at the first set of brackets in the code for the Hawkeye table, as follows: [*style=width:440; padding:0px 25px 25px 25px; border-left:5px solid; border-right:5px solid; border-top:5px solid; border-color:600080]
This is for the border that goes around the text.
WIDTH: Let's start with the width. The value you input will be equal to the width of your block of text. This first number represents a pixel value. A pixel, for those who don't know, is a little square of color on a computer or TV screen. Have you ever played on a old Nintendo NES and marvelled at how square-looking everything was? Back then they didn't have fancy 3D effects like we have now. Everything with color and form had to be done in pixels.
Alright, back to the code. You can see that it clearly says width:440, so that's the total width of the table, right? Actually, no. That's a bit decieving. The actual width of the table is 500 pixels. Why?
PADDING: Do you notice the next tag? Padding, with four pixel values after it. Padding is a fancy term for how much room is between your text (What you write between the [*style] and [*/style]) and the edge of the box. This additional space is not part of your width, but added on in addition. So, if you want to have a 500-pixel width table with 50 padding, you would have to shorten your width to 400. My padding is set to 25 pixels, and is only on the top, left, and right. This is to allow the Hawkeye header to sit where I want it to- close to the top of the table. Applying padding to only certain sides can be done in two ways: adding 'padding-bottom/top/left/right' tags, or just using the method I used. The first number on that tag will be the top, the second right, third bottom, and fourth left.
But say I wanted everything equally spaced. I could create a little more hassle and add a 'padding-top:25' tag, change the 0px in the number string, or just do a simple 'padding:25' tag.
Oh, yes, as an extra note, to make the padding a different color add a padding-color tag, a '#hexadigithere' after the last px value on the string, or a '#hexadigithere' after every padding tag. Otherwise, your padding will be the same color as your background.
BORDER: As soon as that all registers in your head, look at our next few things: [*...border-left:5px solid; border-right:5px solid; border-top:5px solid; border-color:600080]. Again on this one I have my border only set to certain sides. This helps to gain a feel that the border continues to surround the style box on the bottom. To have a complete border again you can remove the top, right, and left and simply put 'border:5px solid'.
What does the 5px solid mean anyway? Obviously, the 5px means five pixels. Solid means that the border is a solid color. This needs to be there in order for the tag to work. If it isnt, there will just be blackness where you want your border.
Other options (instead of solid) are dotted and dashed.
Now, to set the border color, use the next tag: 'border-color:600080'. 600080 is a hexadigit value that the computer recognizes as a dark purple color. Almost all colors are possible using this system. (For a really great resource in dealing with these hexidigit numbers, here's a good place: Colorschemer.com. If it doesn't work with you, then google search "Hexadigit converter" or "RGB to Hexadigit".)
Yaay! We made it through the first code. That wasn't so hard, was it? It doesn't get much harder than that. However I still have a lot to explain.
Next is the style code for the text box.
[*style=width:430; height:490; background-color:333333; padding:5; text-align:justify; font-family:verdana; font-size:11px; color:white; overflow:auto]
Width is as explained above, taking into account the padding.
HEIGHT: Height is basically like width: you set it to where you want it (Again considering your padding and border if applicable.) and there it is. What if you write waaay too much though, for the height? Now you have two options. Simply delete the the tag to allow your table to expand down to cover all the text, or if you want to keep your height, use the 'overflow:auto' tag right before the brackets. This may be an opportune time to explain that in detail.
OVERFLOW: 'overflow:auto' makes the extra text that goes over the bottom of your box become hidden and accessible by a sliding bar. There is also a 'overflow:hide' tag, which hides it.
BACKGROUND: Most of the time I use 'background-color:hexadigithere'. But it is possible to use a photo for your background. In that case one uses: 'background:url(urlforbackgroundhere)'. I used to reccommend putting a hexidigit value right after the colon but have found that doing so skews your background picture, so I don't support that notion anymore.
Now I will try to get everything to do with your text knocked off in one shot.
TEXT TAGS: Not to be confused with Font tags, the only text tags I know of are as follows:
•text-transform:uppercase/lowercase; (When you use this one, it makes all your text uppercase or lowercase despite where you've put capitals.)
•text-shadow:##px ##px #000 (This puts a shadow on your text. You can change the color but that's a standard black. It does not affect the height of your line or width of your letter spaces, but it only seems to work that way o.O)[/ul]
FONT TAGS: Font tags are different from text tags. Don't ask me why, 'cause I don't know, That's just the way it is.
•Font-size:allnumbersrangeunknownpx (Your size of font can be changed with this code. I think that standard numbers work too, not just a px thing; a simple zero is different than a 0px. I think that zeropx is non-existant actually. A standard font size is 12-14px or 1-3 in simple numbers.)
•Font-style:bold/italic/underline; (makes all your text bold, italicized, etc.)[/ul]
LETTER TAGS: There is only one letter tag I know of, and that's letter-spacing:numberherepx. This one is one of the rare ones you can go into the negatives. A -1px or even -2px value here looks really cool with chunky fonts. :3
LINE TAGS: Again, there is only one line tag that I know of, and that's line-height. It is: line-height:numberherepx;. You canake it a percent by just inputting a number from 1-100 without the px, or use a px value. I tend to set my line height one or two pixels smaller than my font size.
TEXT COLOR: I don't know if you can use font-color or text-color on this, that was my automatic first thought when I started coding; after all you have to do things like border-color and padding-color and background-color.
Well it turns out that it's a lot simpler than that. You can just do: color:hexadigithere;. And it defaults the text to that color. I suppose this goes back to the fact that on proboards sites, the standard font color tag is [*color=xxxxxx].
There is a third style code, but I think that you've got the jist of it now, and I've explained everything :) As a few last notes, nothing needs to be in any particular order, you can just sorta randomly add tags in there as you think of them. I am a neat freak so I like them in my little order.
Codes inside codes are allowed.
Also, not all sites offer this style coding. If a site does not have style coding and you want it, PM the admin or a moderator.
Feel free to ask me or any other coding-wise person on this site a question about tables, as well as tags! :D I'm sure that we'd be glad to help.
•••••••••••••••••••••••••••••••••••••••••••••••••••
OTHER AWESOME STYLE TAGS:
OTHER AWESOME STYLE TAGS:
There are a few other awesome tags that I didn't go over with you above, so I will touch on them quick.
FLOAT TAGS: Even I don't know the full purpose of these tags, but I suspect that they are a text-wrapping thing. When you tag a box to 'float', It allows other text and style boxes to move around it according to your specifications.
Here is an example from another site I am on. This was one of my first float tags:
[style=width:170; height:30; background-color:E0E000; padding:15; text-align:center; font-family:baskerville; font-size:10px; font-style:bold; line-height:9px; color:202020; float:right; overflow:auto]TAGS:
WORD COUNT:
OOC NOTES:
OUTFIT:
Table by BRY, Making Memories, July 2012. No stealing please![/style]
Only right or left directions can be used. If you want two boxes to float next to each other, you have to tag one as float:left and the other as float:right.
ROUNDED EDGES: Yes, you can do rounded edges with style coding. It's as simple as this tag: border-radius:numberherepx. Increasing and decreasing this number changed your circle radius on the corners. For example, here is a sample table with 35px radiuses:
[/style]
And one with 50px radiuses:
[style=width:500; height:100; background-color:00FF00; border-radius:50px]
[/div][/center]Notice the difference? It's pretty cool.
BOX SHADOW: There are a certain few tags that are special in the fact that they are webkit tags. Most webkit tags are now standard, but one remains in popular use, and that is the '-webkit-box-shadow-:xpx xpx xpx #FFFFFF'. of course, the FFFFFF stands for white, and can be changed to any color, but on Won't Back Down, we have a black background, so, white is the easiest to see.
I will attempt to demonstrate this tag for you, but I'm not sure if this will work on the first try.
[/style]
*Crosses fingers*
USING STYLE TAGS FOR ONLY TEXT: You can use style tags for only text, no background or anything needed. I've found it interesting to experiment with over the few months I've had experience with it. Simply delete background-color/img at bare minimum and you've got a text-only box.
•••••••••••••••••••••••••••••••••••••••••••••••••••
ADVANCED TABLE TAGS
ADVANCED TABLE TAGS
Some sites have things that people like to use, called advanced table tags. One can use them on Won't Back Down, along with style tags.
From what I can gather these let you move out of the realm of pure style tags, whose capabilities are limited, and do some things that you can't do with style tags.
I'm only experienced in the basic table tag, which is handy to group two or more tables together with.
For example:
| [style=width:250; height:100; background-color:white; float:left] |
[/style]
[/td][/tr][/table][/center] [table][tr][td][style=width:250; height:100; background-color:white; float:left][/div][div style="width:250; height:100; background-color:black; float:right"][/style][/td][/tr][/table]I believe, that these tags are more like HTML tags that one will find on JCINK and Invisonfree sites. You add things to these codes by adding 'atrb' tags in place of style ones. So. Say that I want to remove the natural border from the above table. All I have to do is add [*atrb=border,0,true]in between the [*tr][*td] and [*style=...].
| [atrb=border,0,true][style=width:250; height:100; background-color:white; float:left] |
[/style]
[/td][/tr][/table][/center][table][tr][td][atrb=border,0,true][style=width:250; height:100; background-color:white; float:left][/div][style=width:250; height:100; background-color:black; float:right][/style][/td][/tr][/table]Voila! There's lots about this that I don't understand, so if someone would care to enlighten me, I would be grateful!
•••••••••••••••••••••••••••••••••••••••••••••••••••
Thank You For Reading!
Thank You For Reading!
I hope I helped a little. If none of this makes sense to you yell at me. XD
Other member input is so welcome! I would love you forever and ever.
Bry, Won't Back Down, 2012
