[Code] A Quick Guide to Tables - Printable Version +- HELOVIA || The Way to the Sun (http://helovia.com) +-- Forum: Out of Character (http://helovia.com/forumdisplay.php?fid=1) +--- Forum: Player Resources (http://helovia.com/forumdisplay.php?fid=99) +---- Forum: Growth Center (http://helovia.com/forumdisplay.php?fid=82) +---- Thread: [Code] A Quick Guide to Tables (/showthread.php?tid=7228) |
||||||||||||
A Quick Guide to Tables - Psyche - 04-23-2013 Basic Table Creation Basics So the first thing you need to understand in order to create a table is a brief overview of how HTML works. You begin with something called "tags' that basically define an HTML element. For example: Code: <p>This is a paragraph.</p> In this example, the <*p> and <*/p> are the tags, and they define a paragraph. Basic Table Information Let’s take a look at a basic table’s tags, shall we? Code: <table> To break this down: the <*table> tags define the entire table, the <*tr> tags designate rows, and the <*td> tags designate columns. Column tags will ALWAYS go inside row tags, otherwise your table will not work. This means that a table with one row and three columns will look like this:
Code: <table> A table with three rows and one column will look like this:
Code: <table> Styling Okay, good. Now that you understand how tables are built, you can start thinking about styling them. Now, there are a LOT of different ways to style a table, and in order to learn every single thing you can do, I recommend w3schools. This is a fantastic resource for anyone learning HTML or any other kind of coding, and it’s also a great place to look in case you forget how to do something. Oh, and did I mention it's free? Anyway, I'll list some of the main HTML styling things that you're likely to use below. Note: I recommend using "px" after any given number, as it makes it much easier to scale and it defines for your browser that you are using pixels. Width :: defines the width of an element :: looks like Code: <table width="600px"></table> Cell Padding :: defines the amount of space between the content and the border of any given cell :: looks like Code: <table cellpadding="10px"></table> Align :: defines where the table is on the page :: looks like Code: <table align="center"></table> *For use on Helovia, I recommend center. Border :: defines the border of the table :: looks like Code: <table border="1"></table> *I recommend CSS styling for borders, but that is another story altogether. Background :: defines the background of the table :: looks like Code: <table bgcolor="#000000"></table> So how do these different things coincide? Why, I'm so glad you asked! Below, I have a table that is 500px wide, has a border, is center aligned, has 10px padding, and has a grey background.
Code: <table align="center" width="500px" border="1" cellpadding="10px"> Applications So you're probably wondering how this translates to use on Helovia, or any other RP, for that matter. Well, I'm glad you asked! Most of the time, basic tables on RPs feature one column and multiple rows. Of course, there are all kinds of other complex tables, but I suggest looking at other codes for that. You can learn a lot from looking at what someone else had done! Anyway, your basic table around here is going to be composed of an image in either the top or bottom row and text in another row. It might look something like this:
Code: <table align="center" width="500px" border="0" cellpadding="10px" bgcolor="#000000"> You can change font colors with the basic font color editor in our reply areas, or with CSS. So I think that concludes my basic table tutorial, so I hope this has helped someone. If you have any questions, feel free to ask! RE: A Quick Guide to Tables - Africa - 04-23-2013 Thank you :) RE: A Quick Guide to Tables - Archibald - 04-23-2013 STEALS ANOTHER ARCHI TABLE HAHAHAH RE: A Quick Guide to Tables - Onni - 04-23-2013 Thanks, Rayo! I'm going to sticky this. ^^ RE: A Quick Guide to Tables - Psyche - 04-23-2013 You're welcome, Riven! xD Time. <3333333 Thanks, Boom! Hopefully someone will find it useful. :3 RE: A Quick Guide to Tables - Peppermint - 05-23-2013 Question:how do you change the color of your font or background? RE: A Quick Guide to Tables - Psyche - 05-23-2013 If you notice in the first line of the table code, here: Code: <table align="center" width="500px" border="0" cellpadding="10px" bgcolor="#000000"> there is a 'bgcolor' option. The 6 digit hex code for the color you want needs to be put there, so in the quotes it should be "#xxxxxx". As for font color, I recommend using the color editor that is built into this forum, but if you want to get into actual HTML/CSS font coloring and whatnot, the simplest way is to do this: Code: <table> If you notice, it's the same basic concept - just input your color's hex code into the quotes! Hope this helps. :) RE: A Quick Guide to Tables - Ghost - 05-30-2013 Thanks a lot! :) this is really helpful |