HTML Tables

[Trublu]

The Beginner's Guide to HTML Tables

Part 1- Copyright & Usage

Please don't repost this anywhere without my express permission. I wrote this tutorial 08.20.08. If needed, I can be contacted via AIM at SapphicSlayer, or e-mail at [e-mail], or:

PM Me

(c) Trublu 2008

Part 2- The Tags

Part 3- The Setup

Part 4- Tables With Sections

Part 5- Popular Add Ins

[Trublu]

The Beginner's Guide to HTML Tables

Part 2- The Tags

One of the most frequently asked questions on Proboard's Support is how to make an HTML table to display information. We'll here's the guide from someone who, at one point, couldn't tell an HTML tag from a clothing tag at Macy's.

Tags are used in HTML, traditionally an opening tag and a closing tag. The opening tag is a bracket <info> , the closing tag </info>. Additional information coud be added to the opening tag, a closing tag will always be used as is. Some tags both open and close at the same time, like this: <br />

The primary tag is of course the <table> </table> tags. They are the tags that begin and end the table; they always go first and last. The <table> tag is usually modified with the following values:

width="a % or a #px"

class="bordercolor"

vAlign="top"

align="center"

1. Width sets the width, using a percentage or a pixel number. 728px is the size of the Proboards ads.

2. The class is the Proboard's skin identification that you want (pretty much always bordercolor).

3. vAlign is vertical alignment, either "top", "middle" or "bottom".

4. Align is left to right, so "left", "right" or "center".

Next comes the <tr></tr> tags. They create new rows (a row is left to right). These will not be edited.

Last is the <td> </td> tags. They create columns (up and down). As with the table tags, the first one is often edited, with the following values:

width=" a % or #px"

height="#px"

class="windowbg or windowbg2"

vAlign="top"

align="center"

1. Width here is usually always a %, it sets how wide the column should be. A percentage is useful here because it is automatically calculated from whatever the table width was.

2. Height often comes into play, and is always a pixel number. Can be excluded, in which case the height of the content becomes the height.

3. Color of the background of the column, as pulled from the windowbg and windowbg2 values from your skin.

4. vAlign and align are the same, except they deal with the content within the column.

[Trublu]

The Beginner's Guide to HTML Tables

Part 3- The Setup


So, now that we've done all that, what does a one celled table look like?

<table width="728px" class="bordercolor" vAlign="top" align="center">
<tr>
<td width="100%" height="200px" class="windowbg" vAlign="top" align="center">

Content

</td>
</tr>
</table>

Notice that I close the tags in the order that I open them, and that I have to make a table, a row, and a column, in that order.

Here's an example with a title bar:

<table width="728px" class="bordercolor" vAlign="top" align="center">
<tr>
<td width="100%" height="30px" class="titlebg" vAlign="top" align="center">

Title

</td>

</tr>

<tr>

<td width="100%" height="200px" class="windowbg" vAlign="top" align="center">

Content

</td>
</tr>
</table>

Notice that I had to start a new row this time, and that I used "titlebg" instead of "windowbg", to get the title color instead of the window color.

[Trublu]

The Beginner's Guide to HTML Tables

Part 4- Divided Tables

If you'd like a different configuration; three cells with one on the left and two on the right stacked on top of each other, the rule to remember is to create every cell that happens in a row before moving on to the next row.

So, in the first row you'd create two columns, and in the second row you'd create only one.

For example:

<table width="728px" class="bordercolor" vAlign="top" align="center">
<tr>
<td width="100%" height="30px" class="titlebg" vAlign="top" align="center">

Title

</td>

</tr>

<tr>

<td width="50%" height="200px" class="windowbg" vAlign="top" align="center" rowspan="2">

Content

</td>

<td width="50%" height="100px" class="windowbg" vAlign="top" align="center">

Content

</td>
</tr>

<tr>
<td width="50%" height="100px" class="windowbg" vAlign="top" align="center">

Content

</td>
</tr>


</table>


Notice the new value rowspan. This signals that the cell is going to cover two rows. The same can be done with columns with colspan.

[Trublu]

The Beginner's Guide to HTML Tables

Part 5- Popular Add-Ins

Most users like to add things to their table; here are the codes for links, images, scrollbars, and marquees:

Images:

<img src="URL to image" border="0" />

Link:

<a href="URL" target="_blank"> Text to be linked </a>

Image made a link:

<a href="URL" target="_blank"><img src="URL to image" border="0" /></a>

Scrollbar:

<div style="overflow: auto; height: 100px">

Content

</div>

Note that the content must be greater than the height in order for the code to work.

Marquee:

<marquee direction="up" scrollamount="2" onmouseover=this.stop() onmouseout=this.start()>

Content

</marquee>

Direction is editable to up, down, left or right. For tables, the direction is traditionally up. Scroll amount is how fast the scroll goes.

[joelatics]

One great tut, taught me a thing or two!

[Trublu]

Nov 4, 2008 13:27:50 GMT -5 joelatics said:

One great tut, taught me a thing or two!

Thanks, glad to be of service!