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

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


Start with a basic HTML page (don't forget the title)

<html> 
<head>
<title>Lesson 17</title>
</head> 
<body>
</body> 
</html>

Today I'm going to give you a few simple lessons on how to make tables for your web documents. You might be thinking that a table is simply one of these but if you've ever seen some of them fancy-like web pages you might be interested to find out that they make good use of the <table> tags! Just to illustrate, here is the same page with a gray background and the table borders turned on.

The whole mess basically has only 3 tags...

<table>

The main Table tag. Used to tell the browser "this is a table", along with some attributes like size, border width and a few other things.

<tr>

Table Row defines a horizontal row of <td> (Table Data) cells.

<td>

Table Data - specifies an individual block or cell in a table row.

To paraphrase: A table is made up of rows which in turn are made up of cells...

 

 

 

 

 

<--this--

----is---

----a----

--table--

-row (tr)>

 

 

 

cell (td)

 

 

cell (td)

 

 

cell (td)

Well, that's tables in a nutshell. You are now ready to make some tables! Now's a good time to stress that if you want to learn how to make quality html documents, then you would be well served to take the time to teach yourself the tags...

Type in your table tags. These simply mean "starting a table" and "ending a table". Or, more accurately, the tags enclose the table element.

  
<body>    
<table>  
</table>    
</body>  
 

Every table needs at least one row (<tr>).

  
<body>    
<table>  
<tr>  
</tr>  
</table>    
</body>  
 

And of course every row has to have at least one table data cell (<td>).

  
<body>    
<table>  
<tr>  
<td></td>  
</tr>  
</table>    
</body>


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

Now you need something to put in that cell. How about Ed? let's put Ed in the <td> cell.

<table>  
<tr>  
<td>Ed</td>  
</tr>  
</table>  

Well now, you are the proud owner of a fully functional html table! Open it with the browser and check it out! If you've done everything correctly your table should look like this:

nn

Ed

 

 

 

 

 

 

Just kidding! Haha! As you can see I am easily amused. This (see below) is what you have created:

 

nn

Ed

 

Take a deep breath, pat yourself on the back and be proud. You made your first table!

Ok, what we've got is this...

<table>  
<tr>  
<td>Ed</td>  
</tr>  
</table>  

...which gives us this:

nn

Ed

First, lets make it look more like a table by giving it a border.

<table border="1">  
<tr>  
<td>Ed</td>  
</tr>  
</table>  
 
 

nn

Ed

How about a bigger border?

<table border="5">  
<tr>  
<td>Ed</td>  
</tr>  
</table> 
 

nn

Ed

  

How about a HUGE border?

<table border="25"> 
 <tr>  
<td>Ed</td>  
</tr>  
</table>  
 
 

nn

Ed

How about NO border?

<table border="0"> 
<tr>  
<td>Ed</td>  
</tr>  
</table> 
 

nn

Ed

  

As you can see, the default is (usually) no border.

Let's stick with a modest border for now.

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

nn

Ed

 

When no sizes are specified the table is only as big as it needs to be.

<table border="3">  
<tr>  
<td>Ed, Rick and Tom</td>  
</tr>  
</table>  
 
 

nn

Ed, Rick and Tom

Specifying a table size is pretty simple though.

<table border="3" width="100%">  (that's 100 percent, kind of hard to read, I know)
<tr>  
<td>Ed, Rick and Tom</td>  
</tr>  
</table> 
 

nn

Ed, Rick and Tom

  

How about this?

<table border="3" width="75%">  
<tr>  
<td>Ed, Rick and Tom</td>  
</tr>  
</table> 
 

nn

Ed, Rick and Tom

So far, so good... 

 

Let's finish up by changing the % (percentage sign) to the word pixels

<table border="3" width="75 pixels">  
<tr>  
<td>Ed, Rick and Tom</td>  
</tr>  
</table> 
 
  

nn

Ed, Rick and Tom

Now change 75 to 400

<table border="3" width="400 pixels">  
<tr>  
<td>Ed, Rick and Tom</td>  
</tr>  
</table> 
 
  

nn

Ed, Rick and Tom

 

Lastly, remove (delete) the word pixels

<table border="3" width="400">  
<tr>  
<td>Ed, Rick and Tom</td>  
</tr>  
</table> 
 
  

nn

Ed, Rick and Tom

 

When using % (percent) as your unit of measurement, you must include a % (percentage sign)... if, however, you simply want to use pixels as your unit of measurement, simply type in a number and the computer will do the rest! I guess you could write out the word pixels, but you certainly don't need to.

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

 

On to Lesson 18