TRYING OUT TABLES 

As usual, if you have a problem, raise your hand.  When you are done,
come to the TA or instructor and make sure you have your completion
of the lab recorded.  Before you go, always log off your machine.


TABLES ARE ACTUALLY USEFUL FOR OTHER THINGS

1.  Remember how to use notepad to make a web page source, then
	save it and view it in the browser.  From now on, I'll assume
	you know how to do this without being told.

2.  Start with the TABLE tag, and end it with the /TABLE tag.
	Inside, you'll need two rows:  each beginning with
	TR and ending with /TR.  Each row will contain two
	cells, beginning with TD and ending with /TD.

	Put the numbers 1, 2, 3, and 4 in your cells, in any
	order.

	So it should look like this:

	<TABLE>
	  <TR>
	    <TD>2</TD>
	    <TD>3</TD>
	  </TR>
	  <TR>
	    <TD>1</TD>
	    <TD>4</TD>
	  </TR>
	</TABLE>

	which looks like this:

	

	  

	    
2
	    
3
	  
	  

	    
1
	    
4
	  
	

	Can you move the numbers around so they make sense
	in clockwise-increasing order?

3.  You can specify an attribute on any of the cells or rows
	which says what should be the background color
	or the height or width, e.g., bgcolor=green or height=20

	

	  

	    
2
	    
3
	  
	  

	    
1
	    
4
	  
	

	See what happens when you change bgcolor on each cell
	and height and width on each cell.

	Why can't you change cell heights and widths arbitrarily?
	I.e., what does it do when two cells in a row have different
	heights?  How about two cells in a column with different
	widths?

	Can a row color and a cell color coexist?

4.  Add the attributes bgcolor=red, cellspacing=10, cellpadding=20, border=4
	bordercolor=pink to your TABLE tag.

	What is the difference between cellpadding and cellspacing?
	Show the TA how you can determine the difference?

5.  Make a table with 4 rows and 6 columns.  Put a name in each one.
	You can say TD align=right valign=top if you don't like
	the alignment.  See if you can find all the alignment options
	for a TD tag by searching for HTML help online.

6.  There is something called rowspan and something called colspan.
	Each can be used to modify the TD tag.  The results vary
	from browser to browser, but see if you can reproduce this
	table (don't peek at my source code):

	

	  

	    
fool
	    
foo
	    
fooz
	  
	  

	    
foot
	    
foos
	  
	  

	    
foop
	    
food
	  
	  

	    
fooey
	  
	

7.  Notice how a table starts a new line each time?  Prove this
	by trying to put text on the same line as the table.
	It's hard to do, isn't it?

	Try something like:

	above

	

	  
cell
	

	below

	and then see if you can turn it into this, voila:

	

	  
above
	  

	    

	      
cell
	    
	  
	  
below
	

	Yes, you have to use a table within a table.  Just do it!

8.  Tables are even more fun if you set the height and width of the
	TABLE tag to be 100%.  Try it with border=1.  You should have
	a single table that takes up the whole browser window.

9.  Can you locate "gone to lunch" in the extreme lower right of
	your browser window?  You can, if you use a table.

10.  Can you make the fool-fooz-fooey table again, where it takes
	up the entire browser window, and each word is centered
	horizontally and vertically in its own cell, AND each word
	has a different font size?  You can, or you aren't done with
	the lab...