How To Make Links
Table Intro.
 

Tables are one of those things in HTML that produce a cool effect when used right, but are hard to explain and learn. Once you have the basic cols/rows theory down, your tables will take shape quite nicely.

Before we begin, do you even know what a table is? For an excellent example of a page laid out with borderless tables, visit Microsoft. All the colored boxes are tables. The same goes for this site. The blue box at the left is part of a borderless table that takes up the whole page. Also the little boxes at the end of all the tags on my tags pages are tables. Using tables, you can give your page newspaper style columns.

 

Lets start out with some table theory. Tables are arranged in a column and row fashion. You must define what is a row and then define what the columns have in them. For example:

<table border=1> (Tag that starts a table and specifies a border of 1)
   <tr> (Table Row)
      <td>Row 1, Column 1</td> (Table Data for the first row)
      <td>Row 1, Column 2</td>
   </tr> (Ends a row)
   <tr> (Starts a new row)
      <td>Row 2, Column 1</td> (Table Data for the second row)
      <td>Row 2, Column 2 </td>
   </tr> (Ends the second row)
</table> (Ends the table)

This table would look like this:

Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

To create a table with no border around it, you would set the border attribute of <table> to 0. Thus you can create newspaper style columns without the border if you put the entire contents of the page in a 1 row, 2 column table.

Here is the same table above with the border set to 0.

Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

Every td creates a column. If you have a row with more columns than the row before or after it, a blank cell entry is created.

<table border="1">
   <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
   </tr>
   <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
   </tr>
</table>

It would look like this:

Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

To create an empty cell but not a blank cell, you would insert the character code for a non-breaking space (&nbsp;). Here is the modified code of the above table.

<table border="1">
   <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
      <td>&nbsp;</td>
   </tr>
   <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
   </tr>
</table>

It would look like this:

Row 1, Column 1 Row 1, Column 2  
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

Now that you understand the basics, lets move on to the more advanced aspects.

Spanning Rows & Columns

Suppose you wanted to make one column span across multiple columns above or below it. You would use the colspan= attribute of <td>. Like this:

<table border=1>
   <tr>
      <td colspan=2>This column spans the 2 columns below it.</td>
   </tr>
   <tr>
      <td>This is the first column spanned</td>
      <td>This is the second column spanned</td>
   </tr>
</table>
This column spans the 2 columns below it.
This is the first column spanned This is the second column spanned

The same can be done with spanning rows. For this use the rowspan attribute of the <td> tag. Like this:

<table border=1>
   <tr>
      <td rowspan=2>This column spans 2 rows.</td>
      <td>This is the first row spanned.</td>
   </tr>
   <tr>
      <td>This is the second row spanned.</td>
   </tr>
</table>
This column spans 2 rows. This is the first row spanned
This is the second row spanned

The number value set by colspan= or rowspan= determines the number of rows or columns to span. Colspan= and rowspan= are also attributes of <th> and are used in the same way.

The <th> stands for Table Heading. It is used in exactly the same way as <td> with the exception that <th>makes all text in it bold. It also takes the same attributes of <td>.

<table border=1>
   <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
   </tr>
   <tr>
      <td>Data 1</td>
      <td>Data 2</td>
   </tr>
</table>
Heading 1 Heading 2
Data 1 Data 2

Putting it all together

Here's an example that uses all the table tags discusses thus far.

  Internet Explorer Netscape
Version 2.x 3.x 2.x 3.x
Final Final Final Final
Java   X X X
ActiveX   X    
JavaScript   X X X
VBScript   X    

And here's the source:

<table border=1>
   <tr>
      <td>&nbsp;</td>
      <th colspan=2>Internet Explorer</th>
      <th colspan=2>Netscape</th>
   </tr>
   <tr>
      <th rowspan=2>Version</th>
      <td>2.x</td>
      <td>3.x</td>
      <td>2.x</td>
      <td>3.x</td>
   </tr>
   <tr>
      <td>Final</td>
      <td>Final</td>
      <td>Final</td>
      <td>Final</td>
   </tr>
   <tr>
      <th>Java</th>
      <td>&nbsp;</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
   </tr>
   <tr>
      <th>ActiveX</th>
      <td>&nbsp;</td>
      <td>X</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
   <tr>
      <th>JavaScript</th>
      <td>&nbsp;</th>
      <td>X</td>
      <td>X</td>
      <td>X</td>
   </tr>
   <tr>
      <th>VBScript</th>
      <td>&nbsp;</td>
      <td>X</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
</table>

 

Keep checking this page for the newest additions as this page is by no means complete.

Browser Compatibility

  I.E. Netscape
<table> X X
   ...border= X X
<tr> X X
<td> X X
   ...colspan= X X
   ...rowspan= X X
<th> X X
   ...rowspan= X X
   ...colspan= X X

Created & Managed With Microsoft Frontpage 98 Best experienced with Mirosoft Internet Explorer Counter by Webcounter
Web Tracker Designed with Derekware HTML Author. Free Speech NOW!

©1996-1999 Gilpo All rights reserved. This document may not be altered in anyway or distributed without the expressed written consent of Gilpo. All information contained herein is deemed to be accurate but is not warranted.