	
			TABLES

A table is simply a grid, whether visible, or invisible.

Let's demonstrate this.  Still have that webpage-- index.html?

If not, create one like this:



<html>

<body  bgcolor=lightsteelblue  text=red>

<p ><font color=yellow size=4><i>this is yellow text</i></font></p>

</body>
</html> 


Ok, now, what if we want four items arranged in a gridlike fashion, like this:


			---------------------------------
                        | item 1	|   item 2	|
			|		|		|
			|---------------|---------------|
			| item 3	|   item 4	|
			|		|		|
			---------------------------------

This is where the table tag comes in.  There are 3 main parts:  <table>

<tr> table row        <td>  table data


			      td	      td
			      \/              \/
			---------------------------------
                 tr>>>> | item 1	|   item 2	|
			|		|		|
			|---------------|---------------|
			| item 3	|   item 4	|
		tr>>>>	|		|		|
			---------------------------------

			     /\               /\
			     td               td


2 Rows with 4 table data tags, like this:



<table>

<tr>

<td>item 1</td>
<td>item 2</td>

</tr>

<tr>

<td>item 3</td>
<td>item 4</td>

</tr>

</table>


This can get confusing at times, since there is a lot of repetition, so we will add comments.

comments are just what you think they are--they are not interpreted by the browser at all--they 

are ignored.  The comment tag is <!--    to begin a comment, and   -->  to end it.



<table>

<!--this is the first table row -->
<tr>

<td>item 1</td>
<td>item 2</td>

</tr>

<tr>

<td>item 3</td>


<!-- this is the fourth table item -->
<td>item 4</td>

</tr>

</table>


Ok lets add this to our page.  Like so:



<html>

<body  bgcolor=lightsteelblue  text=red>

<p ><font color=yellow size=4><i>this is yellow text</i></font></p>


<table>

<!--this is the first table row -->
<tr>

<td>item 1</td>
<td>item 2</td>

</tr>

<tr>

<td>item 3</td>

<!-- this is the fourth table item -->
<td>item 4</td>

</tr>

</table>

</body>
</html> 

VIEW the page.  Notice that they are neatly arranged, but aligned to the left. That is default.

Align it as center, and add a border.  Like so:



<html>

<body  bgcolor=lightsteelblue  text=red>

<p ><font color=yellow size=4><i>this is yellow text</i></font></p>


<table align=center border=1>

<!--this is the first table row -->
<tr>

<td>item 1</td>
<td>item 2</td>

</tr>

<tr>

<td>item 3</td>

<!-- this is the fourth table item -->
<td>item 4</td>

</tr>

</table>

</body>
</html> 



Next, lets get rid of the comments, add a little spacing, and add a color to the border.

Like so:


<html>

<body  bgcolor=lightsteelblue  text=red>

<p ><font color=yellow size=4><i>this is yellow text</i></font></p>


<table align=center cellpadding=5 border=1  bordercolor=darkblue>

<tr>
<td>item 1</td>
<td>item 2</td>
</tr>

<tr>
<td>item 3</td>
<td>item 4</td>
</tr>

</table>

</body>
</html> 


We can increase the size of the outside border (border=4), giving it a more dimensional

 appearence.    Notice that order doesn't count inside the tag:

<table  cellpadding=5   bordercolor=darkblue align=center   border=4     >

Next, change the background color of the table to cadetblue.


<table  cellpadding=5   bordercolor=darkblue align=center border=4  bgcolor=cadetblue   >


we can also change the bg color of the individual <td>'s:



<table  cellpadding=5   bordercolor=darkblue align=center border=4  bgcolor=cadetblue   >
<tr>

<td bgcolor=yellow >item 1</td>

<td>item 2</td>
</tr>

<tr>
<td>item 3</td>
<td>item 4</td>
</tr>

</table>

We can give the <td> or <tr>  a height and width attribute:

<td height=10 width=20 bgcolor=yellow> item 1</td>         The number is the size in pixels.



Notice, that, when you change the height, it affects the whole table row.

When you change the width, it affects the entire column.  This is because tables automatically

make an attempt to keep the whole table rectangular-looking.  

The last feature I want to discuss for now, is the rowspan and colspan features.

The rowspan command lets a <td> span 2 or more rows.

Try it:


<table  cellpadding=5   bordercolor=darkblue align=center border=4  bgcolor=cadetblue   >
<tr>

<td height=10 width=20 bgcolor=yellow     rowspan=2> item 1</td>

<td>item 2</td>
</tr>

<tr>
<td>item 3</td>
<td>item 4</td>
</tr>

</table>


What happened????   Everything is messed up!  This is because the table was poorly planned.

It is very difficult to edit a table drastically after you have used it.  To make item 1 have 

the appearence of taking up 2 rows, we must get rid of one of the items in the last row.

delete item 3.


<table  cellpadding=5   bordercolor=darkblue align=center border=4  bgcolor=cadetblue   >
<tr>

<td height=10 width=20 bgcolor=yellow rowspan=2> item 1</td>

<td>item 2</td>
</tr>

<tr>
<td>item 4</td>
</tr>

</table>

This may be a little difficult to understand the logic, but this illustration may help:



			---------------------------------
                        | item 1	|   item 2	|
			|		|		|
			|---------------|---------------|
			|       	|   item 4	|
			|		|		|
			---------------------------------


			There is no item 3

			item 1 takes its place when it rowspans




			---------------------------------
                 |--    | item 1	|   item 2	|      row 1
	         |      |               |		|		
   rowspan of 2--|      |		|---------------|
	         |--    |        	|   item 4	|      row 2
			|		|		|
			---------------------------------


So, now, your html page looks something like this:



<html>

<body  bgcolor=lightsteelblue  text=red>

<p ><font color=yellow size=4><i>this is yellow text</i></font></p>

<table  cellpadding=5   bordercolor=darkblue align=center border=4  bgcolor=cadetblue   >
<tr>

<td height=10 width=20 bgcolor=yellow rowspan=2> item 1</td>

<td>item 2</td>
</tr>

<tr>

<td>item 4</td>
</tr>

</table>

</body>
</html> 

***********************************************************************************************
NOTE:  you can "nest" tables inside of each other: like this:


			   NESTED TABLE
				\/
			---------------------------------
                        |    tr1, td1   |   item 2	|   <<<td   
	                |               |		|		
         	td>>>   |---------------|---------------|
	                |    tr2, td2 	|   item 4	|   <<<td      
			|		|		|
			---------------------------------
SYNTAX:

<table cellpadding=5   bordercolor=darkblue align=center border=4  bgcolor=cadetblue  >
<tr>

<td height=10 width=20  rowspan=2> 


<!--nested table-->
<table bgcolor=lightsteelblue border=1 bordercolor=green>
<tr>
<td align=center>tr1, td1</td>
</tr>

<tr>
<td align=center>tr2, td2</td>
</tr>
</table>
<!--end nested table-->

</td>

<td>item 2</td>
</tr>

<tr>
<td>item 4</td>
</tr>

</table>


***********************************************************************************************

The last thing you need to know before we move on, is how to add a space to an html page.

Remember before, how I said that browsers want to smoosh everything together? We can force

spaces---you already know how to force a line break:  <br>

To force a space, you must insert this code:  &nbsp;  for a non-breaking space.

Replace item 4 with this:



<table  cellpadding=5   bordercolor=darkblue align=center border=4  bgcolor=cadetblue   >
<tr>

<td height=10 width=20 bgcolor=yellow rowspan=2> item 1</td>

<td>item 2</td>
</tr>

<tr>

<td>&nbsp;</td>
</tr>

</table>

Notice that the <td> is now empty.  Go ahead and try it without the &nbsp.

Doesn't look too good, does it?  This is because the table assumes that you dont want to 

include the <td> in the table.  For it to show up, you must fill it with something--even

if it is just a space. The space character is one of 255 special charcters you can insert

into the HTML document. I have provided a list for you: "special_chars.html"------>view

it in Internet explorer.  By inserting code such as "&copy;" or "&#169;" you can insert

a copyright symbol on your page. For an example of how to use special characters, view 

symbolart.html. View it in Internet Explorer. To view the source code, either open it
 
with notepad, or, in IE, right-click on the webpage, then choose view source. You can also

choose the view source feature from VIEW on the menu bar.


***I have included an example of how to use tables effectively: look at table.html ******
*****************************************************************************************

Ok, lets use this knowledge to bulid some cool elements in webpages:

open WEBSTUFF6.txt




 





























