Creating Html Tables

HTML



 WHAT'S NEW 
 HTML FORUM 
 SITE MAP 
 REQUEST HELP 
 TRADE LINKS 
 FREE LINKS PAGE 






WEBMASTERS
Earn Money
Per Click!




SmallDot.com


BraveNet


TrafficSwarm


Submit9000


CodeBrain


Color Schemer


FlashBanger


123TurnKey.com


Web Page Templates


Dynamic Drive


Javascript Source


Javascript City


Javascript Kit


JavaPowered


FreewareJava
Home
General
HTML
Java Applets
Javascript
Wizards
Contact


The Html Help Guide


Tables
Page 2



Tables are great for aligning images or creating a frame around an image.

Let's put a table together that has three columns and two rows of images. In the table tag I'll specify that this table has a border width of 2. It will also contain align=center to center it on the page.

<table border=2 cellpadding=0 cellspacing=2 align=center>
<tr>
<td><img src="image1.jpg" width="80" height="107" border=0 alt=""></td>
<td><img src="image2.jpg" width="80" height="107" border=0 alt=""></td>
<td><img src="image3.jpg" width="80" height="107" border=0 alt=""></td>
</tr>
<tr>
<td><img src="image3.jpg" width="80" height="107" border=0 alt=""></td>
<td><img src="image1.jpg" width="80" height="107" border=0 alt=""></td>
<td><img src="image2.jpg" width="80" height="107" border=0 alt=""></td>
</tr>
</table>


The same table without a border by removing the border= command. You can increase the space between the images by increasing the cellspacing= number.

<table cellpadding=0 cellspacing=2 align=center>
<tr>
<td><img src="image1.jpg" width="80" height="107" border=0 alt=""></td>
<td><img src="image2.jpg" width="80" height="107" border=0 alt=""></td>
<td><img src="image3.jpg" width="80" height="107" border=0 alt=""></td>
</tr>
<tr>
<td><img src="image3.jpg" width="80" height="107" border=0 alt=""></td>
<td><img src="image1.jpg" width="80" height="107" border=0 alt=""></td>
<td><img src="image2.jpg" width="80" height="107" border=0 alt=""></td>
</tr>
</table>


Place a frame around a single image.

<table border=8 cellpadding=0 cellspacing=0 align=center>
<tr>
<td><img src="image.jpg" width="225" height="300" border=0 alt=""></td>
</tr>
</table>


You can also specify the color of the frame by adding a bordercolor= command to the <table> tag.

<table border=8 bordercolor=#804000 cellpadding=0 cellspacing=0 align=center>
<tr>
<td><img src="image.jpg" width="225" height="300" border=0 alt=""></td>
</tr>
</table>


Another way to do this is to replace the the border commands in the <table> tag with a style command. Notice that the frame has a 3D effect.

<table style="border:8px ridge #804000" cellpadding=0 cellspacing=0 align=center>
<tr>
<td><img src="image.jpg" width="225" height="300" border=0 alt=""></td>
</tr>
</table>




< PREVIOUS PAGE      NEXT PAGE >




Join the Html Help Guide mailing list
Enter your email address.
Subscribe    Unsubscribe