Hello!	I am now the 2nd cell on row 1.
Hi! I'm the first cell of row 2!	I am 2nd cell, row 2.

As with most HTML tags, we begin by writing in the <TABLE></TABLE> tags, opening and closing. In between these two tags, we will put rows and cells. (The TR below stands for table row and the TD for table data {cell}.) First let's add a table row: <TR>

ow put the info, image or whatever you desire inside TD or table data tags, closing each one as you go. Each set of table data tags <TD></TD> makes one cell. Then we close the table row, like so: </TR>. So basically, tables only have 3 main tags: <TABLE> and <TR> and <TD> and these are all you'll ever really need, BUT (you knew that was coming, didn't you? There's always a "BUT" stuck in there somewhere.) you will need to assign "attributes" to have control over your tables. Now let's take a look at your basic table:

<TABLE>
<TR>
<TD>INFO</TD>
</TR>
</TABLE>

The above source code would turn out a table that looks something like this: (Note: For the purpose of teaching this tutorial & for those that already know about borders, yes I am using a border. Borders will be fully explained later in this lesson, so for now, disregard everything other than that relevant to the moment.)

INFO

---

Now let's add some cells or extra TD tags. There are four sets of TD tags here. Look closely at this source code:

<TABLE> <TR> <TD> Your main info goes here.</TD> <TD>And in here.</TD> <TD>Each of these is one cell.</TD> <TD>You can have as many of these as you want or You only have to have one.</TD> </TR> </TABLE> Here is the way that would look: Your main info goes here. And in here. Each of these is one cell. You can have as many of these as you want or You only have to have one. ou can put whatever you want inside the TD tags and use as many as you need to arrange it. You can also set the width and height for each which will be explained later. These tags are where your info or images generally go. Compare the tables to the source codes. If you have a problem, then copy and paste it and try entering your own data in place of mine until you get the hang of it. I'll go into depth below. In this next example, perhaps you can better see the difference between the rows and cells. You enter a <TR> tag for each new row you want to make. Then you enter your TD tags and info in between the table rows. After you have finished with that, you enter the closing TR tag to end that row before starting another. Look closely at the table below. There are 3 table rows (TR) and each row has 5 cells (TD tags) in it: <-This -is- -a- -Table- Row-> This is a cell This is another These use the TD tag cell cell cell cell cell cell cell Remember for each set of <TD></TD> tags, you have one cell. Now, check this out: <TABLE> (Begins your table.) <TR>This is row 1. You won't see anything in here but what is in your TD tags. <TD>This is the first cell.</TD> <TD>This is the second cell.</TD> </TR>This is the end of the first table row. <TR>This is the second table row. <TD>This is the first cell on the second row.</TD> <TD>This is the second cell on the second row.</TD> </TR>This is the end of the second table row. </TABLE> (Ends your table.) And this is what it looks like: This is the first cell. This is the second cell. This is the first cell on the second row. This is the second cell on the second row. Now let's add an image inside one of the TD tags: This is a picture of my dog, Jack. He is a full-blooded German Sheppard. We have had him for ten years or so. He is a part of the family. And this is one cell. Jack is in another cell. You add an image just as you do on a page by writing <IMG SRC="jack.gif"> inside the TD tag or table cell as it is called. Here is the code: <TABLE border=4 bgcolor="#ffffff" width=70%> <TR> <TD>This is a picture of my dog, Jack.<br> He is a full-blooded German Sheppard.<br> We have had him for ten years or so.<BR> He is a part of the family. And this<br> is one cell. Jack is in another cell.</TD> <TD><img src="jack.gif"></TD> </TR> </TABLE> ext we'll work on alignment. You can control where in the cell your data will appear. Default is usually the middle. To position the data where you want it to go, you do it like so: (This controls it horizontally. You write it: align= center, left, or right) <TABLE BORDER=2 WIDTH=125 HEIGHT=65> <TR> <TD ALIGN=CENTER><img src="images/dot.gif"></TD> </TR> </TABLE> <TABLE BORDER=2 WIDTH=125 HEIGHT=65> <TR> <TD ALIGN=RIGHT><img src="images/dot.gif"></TD> </TR> </TABLE> <TABLE BORDER=1 WIDTH=125 HEIGHT=65> <TR> <TD ALIGN=LEFT><img src="images/dot.gif"></TD> </TR> </TABLE> You can also control where the data will appear vertically in a cell. (You write it: valign=middle, top, or bottom.) <TABLE BORDER=2 WIDTH=100 HEIGHT=100> <TR> <TD ALIGN=LEFT VALIGN=TOP><img src="images/dot.gif"></TD> </TR> </TABLE> <TABLE BORDER=2 WIDTH=100 HEIGHT=100> <TR> <TD ALIGN=LEFT VALIGN=BOTTOM><img src="images/dot.gif"></TD> </TR> </TABLE> <TABLE BORDER=2 WIDTH=100 HEIGHT=100> <TR> <TD ALIGN=LEFT VALIGN=MIDDLE><img src="images/dot.gif"></TD> </TR> </TABLE> Now that wasn't so hard, was it? When you finish learning about tables, you'll be able to manipulate your pages so much more by using them that you'll be glad you did. p until now, I've used borders in my tables so that I could demonstrate and you could see it, but now it's time for you to learn to use borders yourself. I am going to use names in the cells below to show you what happens when you do not specify a border or set it to zero (border=0). And yes, this is a table: Laura Jan Clara Mike John Larry Let's add a border of 1: Laura Jan Clara Mike John Larry Hopefully, I haven't confused you. If you have any questions or find something not quite clear, feel free to e-mail me and I'll do my best to explain it. Okay, more on table BORDERS. I am going to show you how to set your borders and sizes by example. On this first table, the border is set to 1: This border is set at 1. This is the source code: <table border=1> <tr> <td> This border is set at 1. </td> </tr> </table> This border is set at 3. This border is set at 3. This is the source code: <table border=3> <tr> <td> This border is set at 3. </td> </tr> </table> This border is set at 10. This border is set at 10. This is the code: <table border=10> <tr> <td> This border is set at 10. </td> </tr> </table> n Lesson 10a, we will take up where we left off here and learn about width and height. So whenever you're ready! Lesson 10a E-mail me if you have any questions!