Make Your Own ProBoards TableAlright, I've gotten tired of table requests at different sites, so I've decided to write up a simple tutorial on how to make your own table that matches the ProBoards style.
First thing first, a knowledge of basic HTML helps. Though, if you are able to create a table using UBBC on ProBoards, you should be able to do this just fine.
Alright, we want to create a basic table. The first row's only cell should span the length of three columns, and the second row should have three cells taking up 33% of the total width each. Let's get to work.
We need to create a table tag to match the default PB styling.
<table
class="bordercolor" width="92%" cellpadding="4" cellspacing="1" align="center">
I'll give you a quick break down of this using the colorcoded chart below
Red = This adds the border color of the table element.
Blue = This is the width of the table. Default PB width is 92%, however you can set it to something else.
Green = This is the padding in the cell between the border and the content. PB uses 4 by default.
Orange = This is the spacing between the cells. Its used for the border in this case. PB uses 1.
Purple = This centers the table on the page.
Now that we have the base structure of the table, we want to add our rows and cells. The start tag for a row is "<tr>" and the end tag is "</tr>". So let's add those.
<table class="bordercolor" width="92%" cellpadding="4" cellspacing="1" align="center">
<tr></tr>
</table>Now, remember when we said we were gonna make a cell with a span of three columns? This uses the "colspan" attribute (stands for Column Span.) So let's add this cell, but first, what class should we use? There's two predefined PB classes that suit what we need. "titlebg" and "catbg". We're going to go with "titlebg" for now, but you can choose either later. We're also gonna add in a font element that has a class of "titletext" to keep steady with the PB styling.
<table class="bordercolor" width="92%" cellpadding="4" cellspacing="1" align="center">
<tr><td class="titlebg" colspan="3"><font class="titletext">Title Text</font></td></tr>
</table>Now, I'm gonna add another row. Except, this time there's three cells. Each cell will have a width of 33% (well, the middle actually has 34%). After that, the cells classes will alternate between "windowbg" and "windowbg2", which are the default PB classes for the cells.
<table class="bordercolor" width="92%" cellpadding="4" cellspacing="1" align="center">
<tr>
<td class="titlebg" colspan="3">
<font class="titletext">Title Text</font>
</td>
</tr>
<tr>
<td class="windowbg" width="33%">Cell 1</td>
<td class="windowbg2" width="34%">Cell 2</td>
<td class="windowbg" width="33%">Cell 3</td>
</tr>
</table>Now that we have those three cells, we should notice that the font is bigger then it would be elsewhere in a PB table. So let's shrink it using a font tag with a size of "1".
<table class="bordercolor" width="92%" cellpadding="4" cellspacing="1" align="center">
<tr>
<td class="titlebg" colspan="3">
<font class="titletext">Title Text</font>
</td>
</tr>
<tr>
<td class="windowbg" width="33%">
<font size="1">Cell 1</font>
</td>
<td class="windowbg2" width="34%">
<font size="1">Cell 2</font>
</td>
<td class="windowbg" width="33%">
<font size="1">Cell 3</font>
</td>
</tr>
</table>Now we have our base table done. Let's see if you can create a similar table from what you've seen here.
Let's create a table with a first row's only cell spanning the width of 2 columns, and then having two cells in the next row. One 25% and windowbg, while the other is 75% and windowbg2. Chop chop.
When you're done, it should look something like this:
<table class="bordercolor" width="92%" cellpadding="4" cellspacing="1" align="center">
<tr>
<td class="titlebg" colspan="2">
<font class="titletext">Title Text</font>
</td>
</tr>
<tr>
<td class="windowbg" width="25%">
<font size="1">Cell 1</font>
</td>
<td class="windowbg2" width="75%">
<font size="1">Cell 2</font>
</td>
</tr>
</table>Hopefully some people will find this tutorial helpful.
If you have any questions, post away.
Last Edit: Jul 14, 2006 22:52:13 GMT by Chris
∞
