The main thing to know when working with tables is that there are rows and columns. You first create the row and then insert cells/columns into each row. Also note that for every tag that you open you also need a closing tag. This tells the browser (the program which is reading your HTML) that it has finished reading the contents of that tag.
Now for creating a table, you first need the table tags which tell the browser that you are creating a table.
<table>
</table>Then this says that we are creating a row (tr = table row).
<tr>
</tr>And then this says that we are creating a cell/column (td = table data), and this is where you put your actual content.
<td>
Content here.
</td>So putting it all together...
<table border="1">
<tr>
<td>
One row and one column = one cell.
</td>
</tr>
</table>Which looks like....
| One row and one column = one cell. |
If we wanted two columns in that row, we would just add another <td></td>.
<table border="1">
<tr>
<td>
Row 1 Col 1
</td>
<td>
Row 1 Col 2
</td>
</tr>
</table>If you want another row, then just add another <tr></tr> and add some <td></td>.
<table border="1">
<tr>
<td>
Row 1 Col 1
</td>
<td>
Row 1 Col 2
</td>
</tr>
<tr>
<td>
Row2 Col 1
</td>
<td>
Row 2 Col 2
</td>
</tr>
</table>| Row 1 Col 1 | Row 1 Col 2 |
| Row 2 Col 1 | Row 2 Col 2 |
The next step is understanding the colspan (column spans) and rowspan (row spans) attributes. Column spans are attributes for the <td></td> tag which allow one cell to
span over multiple columns if another row has several columns. For example, take the previous table above. If you wanted the first row to be a header/title for the table, it would look nicer if the cell spanned over the 2 columns below. Notice that there is now only one cell in the first row.
<table border="1">
<tr>
<td colspan="2">
This cell will have the same width as the two cells below.
</td>
</tr>
<tr>
<td>
Row 2 Col 1
</td>
<td>
Row 2 Col 2
</td>
</tr>
</table>Proboards UBBC doesn't support these tags, but it would look something like:
---------------------
| Title |
---------------------
| R2 C1 | R2 C2 |
---------------------
Conversely, rowspan which is also an attribute for the <td></td> tag allow a cell to span over several rows. Notice how there is only one cell in the second row.
<table border="1">
<tr>
<td rowspan="2">Row 1 Col 1</td>
<td>Row 1 Col 2</td>
</tr>
<tr>
<td>Row 2 Col 2</td>
</tr>
</table>
Which would look something like.
---------------------
| R1 C1 | R1 C2 |
| ---------
| | R2 C2 |
---------------------
The next step is just adding attributes such as width, cellspacing, cellpadding etc. Cellspacing is the spacing between the cells and cellpadding is the spacing inside the cells. Cellspacing is used on this forum to give everything a border. The table's background is set to black (if viewing the default skin), and then the cells are given their own color through a CSS class, and then the cellspacing is set to 1 so you can see 1 pixel of the background which appears to be a border. Cellpadding is used on here as well and it's the reason why there is space between the text and the border of the cell.
A typical Proboards table will look something like this.
<table width="92%" align="center" cellspacing="1" cellpadding="4" class="bordercolor">
<tr>
<td class="titlebg" colspan="2">Title</td>
</tr>
<tr>
<td class="windowbg">Table content</td>
</tr>
</table>This table will have a width of 92% of its parent (which is the HTML element it resides in), will be centered, have 1 pixel of space between each cell so the background can be seen, have 4 pixels of padding in each cell so the content isn't right next to the borders, and then inherit all CSS styles associated with the bordercolor class (which just has a background color of black).
