Post by ~CrAzY~™ on Jan 10, 2007 0:17:21 GMT -5
Alright, I'm gonna show you some ropes of how to make tables, mostly tables for Proboards.
During this tutorial, I recommend using a test proboard, or your own so you can practice as we go. Go to admin --> Headers & Footers --> Global --> And do the coding in the Global header.
Ok, well.. Let's start off, shall we?
That declares that we are making a table. Let's add on to that tag.
Width="500" means that the table will be 500 pixels wide. You only have to declare a width, you don't need a height in the table tag.
class="bordercolor" is the class of the table. It means that it will basically be the color you put in the Admin area for the color of the borders.
Cellspacing="1" means that there will be 1 pixel of space between the edge of the table and the stuff inside. Having it at 1px gives the table a border.
Now, we wanna put stuff inside it, right? Well, to do this, we need to add a row.
tr means that you are now going horizontal in one row. Now we need a column, defining where on the row the content will be, so we will add a <td> tag.
With me so far? Thought so.
Let's add some meat to this td tag, to further help us with it.
Nothing new there. It makes it half the width of the table. Let's add a title.
That will put in a title and align it to the center. Note how I added </center> after the title. This closes the center tag. You need to close all tags that are coded, or you will get problems. So, with that said, let's close off this little box...
Now, add another <td> code portion, since you have only filled up half that row. You can change the text to Title 2 this time.
Alright, let's close off this row and move to the next...
Add a td code, just like the ones we've done already, but change it a little. Put width="100%" class="Windowbg" & Change the text to TEXT.
If we were to use that, we would run into a problem. The new td we put in would not be 100% and would mess up the top row. Why? Because it needs a new tag added, colspan.
colspan="2" Means that the column would go (span) across 2 other columns. This is helpful when you have a table with all sorts of different boxes in it and they aren't all lined up perfect. You could also use rowspan="2" if you were doing the same thing, but vertical.
Let's close off this table now.
And there you have it! You have just made a pretty good table. You can mix and match using the colspan and rowspan tags, as well as take the <center> tags out to have it align to the left again.
However, if you want a couple more pieces of coding to help you make it look good...
That's how you put in an image.
That would put in a link. Link Text would show and would be click-able.
That would put an image that is click-able.
If you find anything wrong with this tutorial, please post.
~CrAzy~
During this tutorial, I recommend using a test proboard, or your own so you can practice as we go. Go to admin --> Headers & Footers --> Global --> And do the coding in the Global header.
Ok, well.. Let's start off, shall we?
<table>
That declares that we are making a table. Let's add on to that tag.
<table width="500" class="bordercolor" cellspacing="1" align="center" >
Width="500" means that the table will be 500 pixels wide. You only have to declare a width, you don't need a height in the table tag.
class="bordercolor" is the class of the table. It means that it will basically be the color you put in the Admin area for the color of the borders.
Cellspacing="1" means that there will be 1 pixel of space between the edge of the table and the stuff inside. Having it at 1px gives the table a border.
Now, we wanna put stuff inside it, right? Well, to do this, we need to add a row.
<table width="500" class="bordercolor" cellspacing="1" align="center" >
<tr>
tr means that you are now going horizontal in one row. Now we need a column, defining where on the row the content will be, so we will add a <td> tag.
<table width="500" class="bordercolor" cellspacing="1" align="center" >
<tr>
<td>
With me so far? Thought so.
Let's add some meat to this td tag, to further help us with it.
<table width="500" class="bordercolor" cellspacing="1" align="center" >
<tr>
<td width="50%" class="titlebg" cell spacing="0" >
Nothing new there. It makes it half the width of the table. Let's add a title.
<table width="500" class="bordercolor" cellspacing="1" align="center" >
<tr>
<td width="50%" class="titlebg" cell spacing="0" >
<center>Title 1</center>
That will put in a title and align it to the center. Note how I added </center> after the title. This closes the center tag. You need to close all tags that are coded, or you will get problems. So, with that said, let's close off this little box...
<table width="500" class="bordercolor" cellspacing="1" align="center" >
<tr>
<td width="50%" class="titlebg" cell spacing="0" >
<center>Title 1</center>
</td>
Now, add another <td> code portion, since you have only filled up half that row. You can change the text to Title 2 this time.
<table width="500" class="bordercolor" cellspacing="1" align="center" >
<tr>
<td width="50%" class="titlebg" cell spacing="0" >
<center>Title 1</center>
</td>
<td width="50%" class="titlebg" cell spacing="0" >
<center>Title 1</center>
</td>
Alright, let's close off this row and move to the next...
<table width="500" class="bordercolor" cellspacing="1" align="center" >
<tr>
<td width="50%" class="titlebg" cell spacing="0" >
<center>Title 1</center>
</td>
<td width="50%" class="titlebg" cell spacing="0" >
<center>Title 1</center>
</td>
</tr>
<tr>
Add a td code, just like the ones we've done already, but change it a little. Put width="100%" class="Windowbg" & Change the text to TEXT.
<table width="500" class="bordercolor" cellspacing="1" align="center" >
<tr>
<td width="50%" class="titlebg" cell spacing="0" >
<center>Title 1</center>
</td>
<td width="50%" class="titlebg" cell spacing="0" >
<center>Title 1</center>
</td>
</tr>
<tr>
<td width="100%" class="windowbg" cell spacing="0" >
<center>TEXT</center>
</td>
If we were to use that, we would run into a problem. The new td we put in would not be 100% and would mess up the top row. Why? Because it needs a new tag added, colspan.
<table width="500" class="bordercolor" cellspacing="1" align="center" >
<tr>
<td width="50%" class="titlebg" cell spacing="0" >
<center>Title 1</center>
</td>
<td width="50%" class="titlebg" cell spacing="0" >
<center>Title 1</center>
</td>
</tr>
<tr>
<td width="100%" class="windowbg" cell spacing="0" colspan="2">
<center>TEXT</center>
</td>
colspan="2" Means that the column would go (span) across 2 other columns. This is helpful when you have a table with all sorts of different boxes in it and they aren't all lined up perfect. You could also use rowspan="2" if you were doing the same thing, but vertical.
Let's close off this table now.
<table width="500" class="bordercolor" cellspacing="1" align="center" >
<tr>
<td width="50%" class="titlebg" cell spacing="0" >
<center>Title 1</center>
</td>
<td width="50%" class="titlebg" cell spacing="0" >
<center>Title 1</center>
</td>
</tr>
<tr>
<td width="100%" class="windowbg" cell spacing="0" colspan="2">
<center>TEXT</center>
</td>
</tr>
</table>
And there you have it! You have just made a pretty good table. You can mix and match using the colspan and rowspan tags, as well as take the <center> tags out to have it align to the left again.
However, if you want a couple more pieces of coding to help you make it look good...
<img src="http://www.imageurl.com" border="0"/>
That's how you put in an image.
<a href="http://www.website.com" >Link Text</a>
That would put in a link. Link Text would show and would be click-able.
<a href="http://www.website.com" ><img src="http://www.imageurl.com" border="0" /></a>
That would put an image that is click-able.
If you find anything wrong with this tutorial, please post.
~CrAzy~