Tables
 

Adding
<table> <tr> <td>Text</td> </tr> </table>	Text
<table> <tr> <td>Text</td> <td>Text</td> </tr> </table>	Text Text
<table> <tr> <td>Text</td> <td>Text</td> </tr> <tr> <td>Text</td> <td>Text</td> </tr> </table>	Text Text Text Text
No Border
<table border="0"> <tr> <td>Text</td> </tr> </table>	Text
Adding an Image
<table> <tr> <td><img src="fguffy.gif"></td> </tr> </table>
Border Size
<table border="4"> <tr> <td>Text</td> </tr> </table>	Text
<table border="6"> <tr> <td>Text</td> </tr> </table>	Text
Border Colour
<table border="4" bordercolor="666699"> <tr> <td>Text</td> </tr> </table>	Text
Border size with cellpadding
<table border="1" cellpadding="4" bordercolor="666699"> <tr> <td>Text</td> </tr> </table>	Text
Border size with cellpadding & cellspacing
<table border="1" cellpadding="4"cellspacing="4" border color="666699"> <tr> <td>Text</td> </tr> </table>	Text
Larger Border with cellpadding & cellspacing
<table border="4" cellpadding="4"cellspacing="4" border color="666699"> <tr> <td>Text</td> </tr> </table>	Text
Light Border Colour
<table border="2" cellpadding="2" bordercolorlight="#666699"> <tr><td>Text</td></tr></table>	Text
Dark Border Colour
<table border="2" cellpadding="2" bordercolordark="#000033"> <tr><td>Text</td> </tr></table>	Text
All Border Colours
<table border="10" cellpadding="10" bordercolorlight="#CFDAE9" bordercolordark="#000099" bordercolor="#9966CC" cellspacing="1"> <tr><td>Text</td></tr> </table>	Text
Background Image
<table border="4" cellpadding="2" background="fguppy.gif" bordercolor="#CFDAE9"> <tr> <td>Text</td> </tr> </table>	Text
<table border="1" cellpadding="2" bordercolordark="#000033" bordercolorlight="#666699" background="fguppy.gif" bordercolor="#C4C4E1"> <tr> <td>Text</td> <td>Text</td> </tr> <tr> <td>Text</td> <td>Text</td> </tr> </table>	Text Text Text Text
Table Width
<table border="1" cellpadding="2" width="80%" bordercolorlight="#666699" bordercolordark="#000033" bordercolor="#C4C4E1"> <tr> <td>Text</td> </tr> </table>	Text
Table Height
<table border="1" cellpadding="2" height="50%" bordercolorlight="#666699" bordercolordark="#000033" bordercolor="#C4C4E1"> <tr> <td>Text</td> </tr> </table>	Text
Tip - The percentage of the table depends on the amount of space available to the window. If 50% of the page is available then 100% of that will be used if your table has been set to 100%
Coloured Background
<table border="1" cellpadding="2" bordercolorlight="#C4C4E1" bordercolordark="#330066" bgcolor="#CFDAE9" bordercolor="#666699"> <tr> <td>Text</td> </tr> </table>	Text
Everything
<table border="4" cellpadding="4" width="100%" cellspacing="4" bordercolorlight="#C4C4E1" bordercolordark="#330066" bgcolor="#CFDAE9" background="fguppy.gif" height="100%" bordercolor="#666699"> <tr> <td>Text</td> <td>Text</td> </tr> <tr> <td>Text</td> <td>Text</td> </tr> </table>	Text Text Text Text
Rowspan
<table border="1" cellpadding="2" bordercolor="#666699"> <tr> <td rowspan="2">One</td> <td>Two</td> </tr> <tr> <td>Three</td> </tr> </table>	One Two Three
<table border="1" cellpadding="2" bordercolor="#666699"> <tr> <td rowspan="5">One</td> <td>Two</td> </tr> <tr> <td>Three</td> </tr> <tr> <td>Four</td> </tr> <tr> <td>Five</td> </tr> <tr> <td>Six</td> </tr> </table>	One Two Three Four Five Six
Colspan
<table border="1" cellpadding="2" bordercolor="#666699"> <tr> <td colspan="2">One</td> </tr> <tr> <td>Two</td> <td>Three</td> </tr> </table>	One Two Three
<table border="1" cellpadding="2" bordercolor="#666699"> <tr> <td colspan="5">One</td> </tr> <tr> <td>Two</td> <td>Three</td> <td>Four</td> <td>Five</td> <td>Six</td> </tr> </table>	One Two Three Four Five Six
Cell Thickness
<table border="1" cellpadding="6" bordercolor="#666699" cellspacing="6"> <tr> <td>One</td> <td>Two</td> </tr> <tr> <td>Three</td> <td>Four</td> </tr> </table>	One Two Three Four
Notice Box
<table border="1" cellpadding="4" bordercolor="#666699" bgcolor="#C4C4E1" style="border-collapse: collapse" cellspacing="4"> <tr> <td><b>Notice</b></td> </tr> <tr> <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </td> </tr> </table>	Notice Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Horizontal Aligning
<table border="1" cellpadding="2" bordercolor="#666699" width="100%"> <tr> <td><p align="left">Left</td> </tr> </table>	Left
Tip - Left alignment is the default
<table border="1" cellpadding="2" bordercolor="#666699" width="100%"> <tr> <td> <p align="center">Center</td> </tr> </table>	Center
<table border="1" cellpadding="2" bordercolor="#666699" width="100%"> <tr> <td> <p align="right">Right</td> </tr> </table>	Right
Vertical Alignment
<table border="1" cellpadding="2" bordercolor="#666699" width="100%" height="100%"> <tr> <td valign="top">Top</td> </tr> </table>	Top
<table border="1" cellpadding="2" bordercolor="#666699" width="100%" height="100%"> <tr> <td valign="middle">Middle</td> </tr> </table>	Middle
<table border="1" cellpadding="2" bordercolor="#666699" width="100%" height="100%"> <tr> <td valign="baseline">Baseline</td> </tr> </table>	Baseline
<table border="1" cellpadding="2" bordercolor="#666699" width="100%" height="100%"> <tr> <td valign="bottom">Bottom</td> </tr> </table>	Bottom
Calendar
<table border="4"bordercolor="#666699" bordercolorlight="#C4C4E1" bordercolordark="#330066" cellpadding="4" cellspacing="4"> <tr> <td align="center" width="10%">Sun</td> <td align="center" width="10%">Mon</td> <td align="center" width="10%">Tue</td> <td align="center" width="10%">Wed</td> <td align="center" width="10%">Thu</td> <td align="center" width="10%">Fri</td> <td align="center" width="10%">Sat</td> </tr> <tr> <td align="center" width="10%"></td> <td align="center" width="10%"></td> <td align="center" width="10%">1</td> <td align="center" width="10%">2</td> <td align="center" width="10%">3</td> <td align="center" width="10%">4</td> <td align="center" width="10%">5</td> </tr> <tr> <td align="center" width="10%">6</td> <td align="center" width="10%">7</td> <td align="center" width="10%">8</td> <td align="center" width="10%">9</td> <td align="center" width="10%">10</td> <td align="center" width="10%">11</td> <td align="center" width="10%">12</td> </tr> <tr> <td align="center" width="10%">13</td> <td align="center" width="10%">14</td> <td align="center" width="10%">15</td> <td align="center" width="10%">16</td> <td align="center" width="10%">17</td> <td align="center" width="10%">18</td> <td align="center" width="10%">19</td> </tr> <tr> <td align="center" width="10%">20</td> <td align="center" width="10%">21</td> <td align="center" width="10%">22</td> <td align="center" width="10%">23</td> <td align="center" width="10%">24</td> <td align="center" width="10%">25</td> <td align="center" width="10%">26</td> </tr> <tr> <td align="center" width="10%">27</td> <td align="center" width="10%">28</td> <td align="center" width="10%">29</td> <td align="center" width="10%">30</td> <td align="center" width="10%">31</td> <td align="center" width="10%"></td> <td align="center" width="10%"></td> </tr> </table>	Sun Mon Tue Wed Thu Fri Sat     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

top of page
 

Last Updated
Sunday, 03 August 2008