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



Tables are a very useful html element. They will let you organize objects and text on your page very easily. They are also great for displaying spreadsheet type information.

Tables are basically just columns and rows. The main elements are:

<table> The beginning of a table, the table tag will contain elements that control it's width, border size, border color, cell attributes, and alignment.

<tr> </tr>
These are the beginning and end table rows.

<td> </td> The td stands for table data. These are the columns of the table and are referred to as cells. Each <td> can contain elements to set the background color and alignment of items in its cell.

</table> The end of the table.

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

<table width=500 border=2 cellpadding=2 cellspacing=2 align=center>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6


The same table with the cell contents centered by placing align=center in the two <tr> tags.

<table width=500 border=2 cellpadding=2 cellspacing=2 align=center>
<tr align=center>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr align=center>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6


Now we'll add a background color to the entire table by placing bgcolor=#C0C0C0 in the <table> tag.

<table bgcolor=#C0C0C0 width=500 border=2 cellpadding=2 cellspacing=2 align=center>
<tr align=center>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr align=center>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6


Now we'll add a background color to just one row by placing bgcolor=#C0C0C0 in the <tr> tag.

<table width=500 border=2 cellpadding=2 cellspacing=2 align=center>
<tr bgcolor=#C0C0C0 align=center>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr align=center>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6


Or we can add a background color to any separate cell by placing bgcolor=#C0C0C0 in the <td> tag.

<table width=500 border=2 cellpadding=2 cellspacing=2 align=center>
<tr align=center>
<td bgcolor=#C0C0C0>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr align=center>
<td>Cell 4</td>
<td>Cell 5</td>
<td bgcolor=#C0C0C0>Cell 6</td>
</tr>
</table>

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6


You can have a table without a border by removing the border= command from the table tag. Here is the table above without a border.

<table width=500 cellpadding=2 cellspacing=2 align=center>
<tr align=center>
<td bgcolor=#C0C0C0>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr align=center>
<td>Cell 4</td>
<td>Cell 5</td>
<td bgcolor=#C0C0C0>Cell 6</td>
</tr>
</table>

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6




NEXT PAGE




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