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:


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?


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:

This is Column 1.

This is Column 2.

This is Column 3.

A table with three rows and one column will look like this:

This is Row 1.

This is Row 2.

This is Row 3.

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
where "number" = the width in pixels.

Cell Padding :: defines the amount of space between the content and the border of any given cell :: looks like
where "number" = the amount in pixels.

Align :: defines where the table is on the page :: looks like
where "alignment" = left, center, right, or justify.
*For use on Helovia, I recommend center.

Border :: defines the border of the table :: looks like
where "number" = the width of the border (0 will show no border).
*I recommend CSS styling for borders, but that is another story altogether.

Background :: defines the background of the table :: looks like

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.

I am a table.	I have two columns.
Look at me!	I also have two rows!

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:

Text goes here!

And don't forget your Credits!


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!

Thank you :)

STEALS ANOTHER ARCHI TABLE HAHAHAH

Thanks, Rayo! I'm going to sticky this. ^^

You're welcome, Riven!

xD Time. <3333333

Thanks, Boom! Hopefully someone will find it useful. :3

Question:how do you change the color of your font or background?

If you notice in the first line of the table code, here:


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:


If you notice, it's the same basic concept - just input your color's hex code into the quotes!

Hope this helps. :)

Thanks a lot! :) this is really helpful