PB Code Zone

PB Code Zone

Simple Tables

BARE CELL TABLE

first td cell second td cell third td cell

BARE CELL TABLE <center><table width="400" height="30"> <tr> <td><font color="white">first td cell</font> <td><font color="white">second td cell</font> <td><font color="white">third td cell</font<</td></tr></table></center>

A SINGLE DATA CELL

a single data cell

A SINGLE DATA CELL <table bgcolor="663366" width="200" height="20"> <tr> <td><font color="white">a single data cell</font> </td></tr>:</table>

TWO DATA CELL TABLE

result

cell 1 cell 2

TWO DATA CELL TABLE <table bgcolor="0000FF" width="300" height="20"> <tr> <td><font color="white">cell 1</font> <td><font color="white">cell 2</font> </td></tr>result</table>

THREE DATA CELL TABLE

result

cell 1 cell 2 cell 3

THREE DATA CELL TABLE <table bgcolor="darkblue" width="300" height="20"> <tr> <td><font color="white">cell 1</font> <td><font color="white">cell 2</font> <td><font color="white">cell 3</font> </td></tr>result</table>

ADDING BACKGROUND COLOR

A background color can be added to a table and to individual cells using color names or hexadecimals.

cell 1 cell 2 cell 3

ADDING BACKGROUND COLOR <table bgcolor="#6633CC" width="300" height="20"> <tr> <td bgcolor="#9966CC"><font color="#FF99CC">cell 1</font> <td bgcolor="#CC99FF"><font color="#555555">cell 2</font> <td bgcolor="#CCFFFF"><font color="#9999FF">cell 3</font></td> </td></tr></table>

ADDING A BORDER

one two three

ADDING A BORDER <table bgcolor="#000000" width="400" height="20" border="6"> <tr> <td><font color="#9999FF">one</font> <td><font color="#9999ff">two</font> <td><font color="#9999FF">three</font> </td></tr></table>

TABLE ALIGNMENT
Tables can be aligned left, center, or right. Default is left.

Table below is center aligned

center

TABLE ALIGNMENT <center> <table bgcolor="6600CC" width="200" height="20"> <tr> <td align="center"><font color="#9999FF">center</font> </td></tr></table></center>

ALIGNING TEXT WITHIN THE DATA CELL:

The table cell below is left aligned

align=left

ALIGNING TEXT WITHIN THE DATA CELL <table bgcolor="#00008B" width="300" height="20"> <tr> <td align="left"><font color="#9999FF">align=left</font></td> </tr></table>

EXAMPLE OF CENTER ALIGNED TEXT

align=center

EXAMPLE OF CENTER ALIGNED TEXT <table bgcolor="#00008B" width="300" height="20"> <tr> <td align="center"><font color="#9999ff">align=center</font></td> </tr></table>

EXAMPLE OF RIGHT ALIGNED TEXT

align=right

CODE FOR RIGHT ALIGN <table bgcolor="#00008B" width="300" height="20"> <tr> <td align="right"><font color="#9999ff">align=right</font></td> </tr></table> 

EXAMPLE OF VALIGN = TOP

valign=top

CODE FOR VALIGN = TOP <table bgcolor="#00008B" width="300" height="40"> <tr> <td align="center" valign="top"><font color="#9999ff">valign=top</font></td> </tr></table>

CELLPADDING EFFECT

result result result

CELLPADDING EFFECT <table cellpadding="10" bgcolor="#9999ff" width="500" height="30" border="2"> <tr> <td align=center><font color="#0000FF">result</font> <td align=center><font color="#0000FF">result</font> <td align=center><font color="#0000FF">result</font></td></tr></table>

COLSPAN EFFECT:

result 2 column span result

result result result result

COLSPAN EFFECT <table cellspacing="10" border=2 bgcolor="#9999ff" width="500" height="30"> <tr> <td align=center><font color="#0000FF">result</font> <td align=center colspan="2"><font color="#0000FF">2 column span</font> <td align=center<font color="#0000FF">result</font></td> </tr> <tr> <td align=center><font color="#0000FF">result</font> <td align=center><font color="#0000FF">result</font> <td align=center><font color="#0000FF">result</font> <td align=center><font color="#0000FF">result</font> </td></tr></table>

ROWSPAN EFFECT:

result result 2 row span result

result result result

ROWSPAN EFFECT: <table cellspacing="10" border=2 bgcolor="#9999FF" width="500" height="30"> <tr> <td align=center><font color="#0000FF">result</font> <td align=center><font color="#0000FF">result</font> <td align=center ROWSPAN="2"><font color="#0000FF">2 row span</font> <td align=center><font color="#0000FF">result</font></td> </tr> <tr> <td align=center><font color="#0000FF">result</font> <td align=center><font color="#0000FF">result</font> <td align=center><font color="#0000FF">result</font> </tr></table>

TIP Scrolling down to exit a text box can be impossible unless you know this trick. Push Cmd and scroll Down and hold both keys down. You will then be at the bottom of the text box. Now push a third key, the arrow down key. The cursor will jump to the first link below the textbox.

TIP Scrolling down to exit a text box can be impossible unless you know this trick. Push Cmd and scroll Down and hold both keys down. You will then be at the bottom of the text box. Now push a third key, the arrow down key. The cursor will jump to the first link below the textbox.