Code:	Results:
<table border=3> <tr> <th>Header 1</th> <th>Header 2</th> </tr><tr> <td><Data Cell 1</td> <td><Data Cell 2</td> </tr> </table>	Header 1 Header 2 Data Cell 1 Data Cell 2

Modifying Tables:

Sizes: <table height=# width=#> or <table height=% width=%>

You can set the size of your table using the height and width tags. If table size is set with a number, the size refers to the number of pixels in the table. Table size set using a number as opposed to a percent will have constant size not dependent on window size.

<table height=100 width=225 border=6> 
<tr>
   <td>This is Cell #1</td>
   <th>What's Up, Doc?</th>
</tr> 
</table>

Setting table size by percentages means that the table is dynamic. Resizing the window will resize the table size. In the table below, the width will always be 35% of the window size and the height will be 25% of the window size. If the HTML document is in a frame, the table percentages will be relative to the window size.

<table height="25%" width="35%" border=6> 
<tr>
   <td>This is Cell #1</td>
   <th>What's Up, Doc?</th>
</tr> 
</table>

Borders:

You can hide the borders of your table to modify the location of data on the page. This is actually the default table border width.

<table>
<tr> 
   <th>Header 1</th>
   <th>Header 2</th> 
</tr><tr> 
   <td>Data Cell 1</td>
   <td><Data Cell 2</td> 
</tr>
</table>

You can use tables with larger border sizes to highlight text or images.

<table border=10>
<tr> 
   <th><font size="+1" color="#00FF00">
    Are you Web Savvy?
   </font></th> 
</tr>
</table>

When placing images inside tables make sure to not place breaks between the HTML for the cell and the image. Otherwise you may have extra space in the table at the bottom of the image.

Code:	Results:
<table border=10> <tr> <th><img src="image URL" border=0></th> </tr> </table>

Cell Spacing: <table cellspacing=#>

<table border=6 cellspacing=10> 
<tr>
   <th>Header 1</th>
   <th>Header 2</th>
</tr><tr>
   <td>Cell 1</td>
   <td>Cell 2</td>
</tr> 
</table>

Cell Padding: <table cellpadding=#>

Code:	Results:
<table border="6" cellpadding="10"> <tr> <th>Header 1</th> <th>Header 2</th> </tr><tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table>	Header 1 Header 2 Cell 1 Cell 2

Text Layout: Aligning the Text: <NOBR>, <td align=>, and <td valign=>

The <NOBR> or No Break tag causes the text in the current cell not to wrap around if it goes past the end of the page.

It is possible to modify the location of the text or image in any cell in the table with the flags align and valign. These tags are set for each individual cell, so you can use them to come up with some creative designs (particularly for hidden table layouts). Both of these tags can be used in either a Data Cell or a Table Header cell, but in most cases you shouldn't need to use them with Table Headers. align and valign can be used together in the same table cell.

ALIGN - modifies the horizontal location of data in each cell. (along the x-axis). It can be set to three values, left, right and center.

<table border=4> 
<tr>
   <th>Brand</th>
   <th>Processor</th>
   <th>RAM</th>
</tr><tr> 
   <td align="left">Gateway 2000</td> 
   <td align="center">PIII 550</td> 
   <td align="right">64 MB</td> 
</tr>
</table>

VALIGN - modifies the vertical location of data in each cell. (along the y-axis.) There are four values for this flag: left, right, center, and baseline.

<table border=4 height=200><tr>
   <th>Brand</th>
   <th>Processor</th>
   <th>RAM</th>
   <th>Hard Drive</th>
</tr><tr> 
   <td valign="top">Dell</td> 
   <td valign="middle">PIII 550</td> 
   <td valign="bottom">64MB</td> 
   <td valign="baseline">8GB</td> 
</tr></table>

Table Spanning

Tables can have cells which span other cells in either width or height. This can be useful for certain types of page layout both of you are using hidden or non hidden tables. For both column and row spanning, the number in the HTML tag represents the number of cells you want the cell to span.

Column Spanning:<th colspan=#>

<table border=3>
<tr>
   <th colspan=3>Today's Work Plan</th>
</tr><tr>
   <th>Morning</th>
   <th>Afternoon</th>
   <th>Evening</th>
</tr><tr>
   <td>Sleep</td>
   <td>Take a Nap</td>
   <td>Party Time!</td>
</tr>
</table>

Row Spanning:<th rowspan=#>

<table border=3>
<tr>
   <th rowspan=3>Today's Work Plan</th>
   <th>Morning</th><td>Sleep</td>
</tr><tr>
   <th>Afternoon</th>
   <td>Take a Nap</td>
</tr><tr>
   <th>Evening</th>
   <td>Party Time!</td>
</tr> 
</table>

Putting multiple column and row spans in the same table can sometimes lead to interesting results. Tables can not have over lapping cells. Note the red highlighted text below. When overlapping cells of a table are placed beside each other, you don't need to use empty cells to align each cell MOST of the time.

<table border=4>
  <tr>
     <th>Row 1</th>
     <th>Cell 1</th>
     <th>Cell 2</th>
     <th>Cell 3</th>
     <th>Cell 4</th>
     <th>Cell 5</th>
  </tr><tr>
     <th>Row 2</th>
     <th rowspan=2>Cell 1</th>
     <td></td>
     <th rowspan=2>Cell 3</th>
     <td></td>
     <th rowspan=2>Cell 5</th>
  </tr><tr>
     <th>Row 3</th>
     <td></td>
     <th rowspan=3>Cell 2</th>
     <td></td>
     <th rowspan=3>Cell 4</th>
  </tr> <tr>
     <th>Row 4</th>
  </tr> <tr>
     <th>Row 5</th>
  </tr>
</table>

Table Colors:

Tables in Netscape and Internet Explorer can support colored edges and backgrounds. You can use either an RGB color, color name or a file name when you write your code.

<table border="10" bgcolor="#000000">
<tr>
    <td>12345</td>
    <td><font color="#FFFFFF">12345</font></td>
</tr><tr>
    <td><font color="#FFFFFF">12345</font></td>
    <td>12345</td>
    </tr>
</table>

You can also specify specific colors for the lighter and darker side of the table frames:

<table border="10" 
	bordercolordark="#00FF00"
	bordercolorlight="#0000FF">
     <tr>
	<td>BLUE</td>
        <td></td>
     </tr><tr>
        <td></td>
        <td>GREEN</td>
     </tr>
</table>

Or you can specify a single color or background texture for the entire table:

<table border="10" bordercolor="#FF0000">
   <tr>
      <td>BIG</td>
      <td>RED</td>
   </tr><tr>
      <td>TABLE</td>
      <td>THING</td>
   </tr>
</table>