Welcome to My Homepage

Tables

Tables in html are wonderful things! They allow you to be creative and make imaginative layouts without using dirty tricks like frames (which may not look at all like you want them to on some computers) or huge imagemaps (which may take forever to load on a slow connection and are useless until they are fully loaded. They can be a little bit messy to make but read the tips I give a the end and remember to always have a good idea of what you want to make before you start making it.

A simple example of a table

This source code: 


<table border = 1>
  <tr>
    <td>
      one
    </td>
    <td>
      two
    </td>
  </tr>
  <tr>
    <td>
      three
    </td>
    <td>
      four
    </td>
  </tr>
</table>
Gives this result:

one two
three four

A more complicated example:

This source code: 

<table border = 1 cellpadding = 10>
  <tr>   
    <td align = right colspan = 2>
       <b><i>one</i></b>
    </td>
  </tr>
  <tr>  
    <td>
      <img src = "../pics/icons/smiley.gif"
       width = 40 height = 40 alt = "">
    </td>
    <td bgcolor = red valign = bottom>
      <font color = white> four </font>
    </td>
  </tr>
</table>
Gives this result:

one
four

A couple of tips

Try to imagine the different parts of the table as being "inside" each other. The simple example above could be seen like this:

<table border = 1>
   <tr>
   <td>
   one   
</td> 		  
   <td>
   two   
</td> 		  
</tr> 		  
   <tr>
   <td>
   three   
</td> 		  
   <td>
   four   
</td> 		  
</tr> 		  
</table> 		  

This way it may be easier to understand that each <table> must be matched by a </table>, each <tr> must me matched by a </tr> and each <td> must have its matching </td>. You also see that one or more <td></td> pairs must be found inside a <tr></tr> pair and that one or more <tr></tr> pairs must be found inside a <table></table> pair.

The whole thing is a bit like Russian dolls

[picture of russian dolls

Where the smallest doll fits into the second smallest which fits into the third smallest etc...

if you want something to motivate the use of indentation (i.e. when you "go into a new box" in the illustration above you also write the source code a little bit further in on the line and when you "go out from a box" you write the code a little bit more to the left again) take a look at the source code of the example above (where I have used tables inside tables...) 

<table>
  <tr>
    <td bgcolor = black><tt>
      <font color = red><table border = 1></font>
      <table border = 0>        
        <tr>
	  <td><tt>  </td>
          <td bgcolor = 550000><tt>
            <font color = ff5500>  <tr></font>
	    <table border = 0>
	      <tr>
	        <td><tt>  </td>
	        <td bgcolor = 990000><tt>
                  <font color = ff8800>    <td> </font>
		  <table border = 0>
		    <tr>
		      <td><tt>  </td>
		      <td bgcolor = red width = 100><tt>
                         <font color = blue>      one</font>
		      </td>
		      <td><tt>  </td>
		    </tr>
		  </table>
                  <font color = ff8800>    </td></font>
		</td>
		<td><tt>  </td>
	      </tr>
	    </table>
	    <table border = 0>
	      <tr>
	        <td><tt>  </td>
	        <td bgcolor = 990000><tt>		  
                  <font color = ff8800>    <td> </font>
		  <table border = 0>
		    <tr>
		      <td><tt>  </td>
		      <td bgcolor = red width = 100><tt>
                         <font color = blue>      two</font>
		      </td>
		      <td><tt>  </td>
		    </tr>
		  </table>
                  <font color = ff8800>    </td></font>
		</td>
		<td><tt>  </td>
	      </tr>
	    </table>
            <font color = ff5500>  </tr></font>
	  </td>
	  <td><tt>  </td>
	</tr>
      </table>
      <table border = 0>        
        <tr>
	  <td><tt>  </td>
          <td bgcolor = 550000><tt>	  
            <font color = ff5500>  <tr></font>
	    <table border = 0>
	      <tr>
	        <td><tt>  </td>
	        <td bgcolor = 990000><tt>
                  <font color = ff8800>    <td> </font>
		  <table border = 0>
		    <tr>
		      <td><tt>  </td>
		      <td bgcolor = red width = 100><tt>
                         <font color = blue>      three</font>
		      </td>
		      <td><tt>  </td>
		    </tr>
		  </table>
                  <font color = ff8800>    </td></font>
		</td>
		<td><tt>  </td>
	      </tr>
	    </table>
	    <table border = 0>
	      <tr>
	        <td><tt>  </td>
	        <td bgcolor = 990000><tt>
                  <font color = ff8800>    <td> </font>
		  <table border = 0>
		    <tr>
		      <td><tt>  </td>
		      <td bgcolor = red width = 100><tt>
                         <font color = blue>      four</font>
		      </td>
		      <td><tt>  </td>
		    </tr>
		  </table>
                  <font color = ff8800>    </td></font>
		</td>
		<td><tt>  </td>
              </tr>
	    </table>
            <font color = ff5500>  </tr></font>
	  </td>
	  <td><tt>  </td>
	</tr>
	</table>
      <font color = red></table></font>
    </td>
    <td><tt>  </td>
  </tr>
</table>

This would (almost) not have been possible to write without using a very strict indentation...

You can set border = 1 while you are developing a table, even if you are not going to have a border on it later. In that case it is also a good idea to set border = 0 when you are finished instead of removing that tag altogether (it's a good help the day you want to change your page). The extreme code above will become this table when you set border = 1 in its source code:

<table border = 1>
   <tr>
   <td>
   one   
</td> 		  
   <td>
   two   
</td> 		  
</tr> 		  
   <tr>
   <td>
   three   
</td> 		  
   <td>
   four   
</td> 		  
</tr> 		  
</table> 		  

Technical problems to be aware of

Tables don't work at all on some browsers! (for example lynx and some older browsers). Because of this it might be a good idea to check your pages in one such browser and see where such problems may occur. You can often change the code so that it turns into simple lists in such browsers and still look good in your ordinairy browser by adding a few simple <br> in "strategic places". (I haven't done that on this page because I didn't want to confuse you by having <br> all over the place, seemingly for no reason).

A table won't show up on the screen until it knows its exact proportions!!! This means that it is very important to include WIDTH and HEIGHT on all pictures inside the table!!! (This is so extremely important that I think it is motivated to use blinking red text on this paragraph).

Back to my homepage
Send comments to me@site.country