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

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


Let's go back to plain old Ed...

<html> 
<head> 
<title>Lesson 19</title> 
</head> 
<body> 
<table border="3" width="100" height="75">   
<tr>   
<td align="left" valign="middle">Ed</td>   
</tr>   
</table>  
</body>  
</html>

 

nn

Ed

And for the sake of clarity and simplicity let's remove the alignment attributes. We know what will happen because we know what the default values are. As a reminder, a <tag> tells the browser to do something. An attribute goes inside the <tag> and tells the browser how to do it.

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

nn

Ed

Now we will make our table a fuzz bigger.

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

nn

Ed

  

You should know that fuzz is a technical term. Its full definition is so broad and complicated that it would only be suitable for advanced html students.

Ed's friend Tom is back and this time he wants his own cell.

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

nn

Ed

Tom

When no instructions are given to the browser, each cell may (but not always) be different in size. It's often a fine idea to specify how big each cell is. Make sure your arithmetic is correct or what people see may be drastically different than what you want them to see!

<table border="3" width="300" height="75">  
<tr>  
<td width="150">Ed</td>  
<td width="150">Tom</td>  
</tr>  
</table>  
 
 

nn

Ed

Tom

These width attributes can also be expressed as a percentage.

<table border="3" width="300" height="75">  
<tr>  
<td width="50%">Ed</td>  
<td width="50%">Tom</td>  
</tr>  
</table>
 

nn

Ed

Tom

   

FAQ: I've laid out my table with my dimensions but the table doesn't show up right. Or it's fine in Browser A but looks different in Browser B.

A: Getting too specific with table cell dimensions is a tricky business. Often the browser doesn't render a table exactly how we've specified. The best way I've found to overcome this is to design tables that are more like rubberbands than a rigid framework. That is they flexibly hold everything together rather than rigidly box everything together. Design your table in such a way so that minor differences in the way a browser renders it won't destroy what you're trying to do.

Remember that a table is only as big as it needs to be. Put stuff in the table, and it will snug down to a comfortable size all by itself. Use that characteristic of HTML tables... don't try to fight it.

 

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

 

On to Lesson 20