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

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_18 in your HTML folder


Let's retype what you had from the previous lsseon, only let's not include Ed's friends for now.

<html>
<head>
<title>Lesson 18</title>
</head>
<body>
<table border="3" width="400">  
<tr>  
<td>Ed</td>  
</tr>  
</table> 
</body> 
</html>
 
 
  

nn

Ed

Let's reduce the table size to 100 pixels

<table border="3" width="100">  
<tr>  
<td>Ed</td>  
</tr>  
</table>  
 
 
  

nn

Ed

 

We can also mess around with the height.

<table border="3" width="100" height="75">    
<tr>  
<td>Ed</td>  
</tr>  
</table>  
 
 
  

nn

Ed

 

Note: Controlling a table's height is fairly simple. Controlling the height of individual cells within the table is a little unreliable, especially across different browsers.

It's also useful to know that the height attribute in the <table> tag is not a part of any official HTML specification (although it is allowed in the <td> tag). That said, table height has been consistently recognized by web browsers for years and there's no reason to believe that will change anytime soon.

We can control where in the cell the data will appear.

<table border="3" width="100" height="75">  
<tr>  
<td align="center">Ed</td>  
</tr>  
</table> 
 
 

nn

Ed

 

<table border="3" width="100" height="75">  
<tr>  
<td align="right">Ed</td>  
</tr>  
</table>  
 
 

nn

Ed

 

<table border="3" width="100" height="75">
<tr>  
<td align="left">Ed</td>  
</tr>  
</table>
 

nn

Ed

   

As you can see, the default align value is (usually) left. You probably already know, by the way, that the default value is the value that the browser assumes if you have not told it otherwise.

Note, I say "usually" the default value is such-and-such. "Usually" mean this is how it is for every major browser that's being used. While there is no "rule" that says the default alignment in a table cell has to be left, it's conceivable that someone may create a web browser where the default is center or right. It's also conceivable that a car manufacturer might sell a neon pink automobile with lime green polka dots... but it pretty flippin' unlikely.

Ok,back to work... we can also control where data will appear vertically in a cell.

<table border="3" width="100" height="75">  
<tr>  
<td align="left" valign="top">Ed</td>  
</tr>  
</table> 
 

nn

Ed

  
<table border="3" width="100" height="75">  
<tr>  
<td align="left" valign="bottom">Ed</td>  
</tr>  
</table>
 

nn

Ed

   
<table border="3" width="100" height="75">  
<tr>  
<td align="left" valign="middle">Ed</td>  
</tr>  
</table>  
 
 

nn

Ed

Default is usually middle.

I will take a second now to show you something else. Images can also be used and manipulated in a table data cell. Take Ed here, and save him to the folder you are working out of (right click / Save Pictue as... "ed.gif" in your Lesson_18 folde). Then substitute an <img> tag for the word Ed.

 

<table border="3" width="100" height="75">  
<tr>  
<td align="left" valign="middle"><img src="ed.gif" width="32" height="32" alt="Ed"></td>  
</tr>  
</table>  

nn

I suppose that now is also a good time to stress that it is good practice to include size attributes with all your image tags. When your browser knows in advance how big your image is going to be, it loads the page faster.

 

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

 

On to Lesson 19