So, you want to make a Web Page!
Lesson 20

adapted from Joe Barta's tutorials at- PageTutor.com


If you don't already have one, be sure to create a new folder titled Lesson_20 in your HTML folder

Let's pick up where we left off, with Ed and Tom...

<html> 
<head> 
<title>Lesson 20</title> 
</head> 
<body><table border="3" width="300" height="75">  
<tr>  
<td width="50%">Ed</td>  
<td width="50%">Tom</td>  
</tr>  
</table></body>  
</html>

 

nn

Ed

Tom

What we may want to do, just to keep the browser from guessing, is to actually leave that empty cell there and just put a blank space in it (&nbsp;). Normally for a simple table this isn't necessary, however as your tables become more complex, the less guessing the browser has to to, the better off you'll be.

<table border="3" width="300" height="75" >    
<tr>  
<td width="60%">Ed</td>  
<td width="20%">Tom</td>  
<td width="20%">Rick</td>  
</tr>
    
<tr>  
<td>Larry</td>  
<td>Curly</td>  
<td>&nbsp;</td>  
</tr>    
</table>  
 
 

nn

Ed

Tom

Rick

Larry

Curly

 

Now let's back up a little. Remember when we learned about aligning stuff in a cell using align and valign? Well it's good to know that you can use those atributes in table rows too. All that does is simply apply the align/valign attribute accross all rows in a cell. Here is a quick example:

<table border="3" width="300" height="75" > 
   
<tr align="right" valign="top">  
<td width="60%">Ed</td>  
<td width="20%">Tom</td>  
<td width="20%">Rick</td>  
</tr>    
 
<tr align="center">  
<td>Larry</td>  
<td>Curly</td>  
<td>&nbsp;</td>  
</tr>   
 
</table> 
 

nn

Ed

Tom

Rick

Larry

Curly

 

 

 

Let's put Moe back and remove all attributes except border.

<table border="3">    
<tr>  
<td>Ed</td>  
<td>Tom</td>  
<td>Rick</td>  
</tr>
    
<tr>  
<td>Larry</td>  
<td>Curly</td>  
<td>Moe</td>  
</tr>  
  
</table>  
 
 

nn

Ed

Tom

Rick

Larry

Curly

Moe

 

 

Save as: Lesson_20.html in your HTML/Lesson_20 folder

 

On to Lesson 22