Image Slices and Tables

Part Two-The Table

by:© Mitch Peifer

Before you can seriously get started with this end of it, you will need to have a decent basic understanding of HTML, and a text editor. You can do this in any text program, but you will want the ability to rapidly go back and forth between your text editor and your browser, for preview purposes. Open a New Document, and save it as table-lesson.html in the folder named tablestuff you created in the first part of the tutorial. That folder already contains the images we will be working with. Fill in the basic HTML document stuff for a blank page.

  				
<HTML>
<HEAD>
<TITLE>Table Lesson</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

Using a standard type image tag <IMG SRC="top-left.jpg">, go ahead and list your images that you have saved inside the body tags of your HTML doc. It should look like this.

<HTML>
<HEAD>
<TITLE>Table Lesson</TITLE>
</HEAD>
<BODY>
<IMG SRC="top-left.jpg">
<IMG SRC="top-right.jpg">
<IMG SRC="bot-left.jpg">
<IMG SRC="bot-right.jpg">
</BODY>
</HTML>

Save this, and view it in your browser , and it all looks rather undisciplined, doesn't it? We have to put it back together by using a TABLE to contain it. Table tags come in many flavors, and can have a lot of attributes. We are going for simplicity here, a bare, stripped down table. It will need to hold our four images in place, 2 on top, 2 on bottom.

<TABLE>
<TR>
<TD>?</TD><TD>?</TD>
</TR>
<TR>
<TD>?</TD><TD>?</TD>
</TR>
</TABLE>

Yeah sure, you say. Instead of just cutting and pasting that, lets understand it -

<TABLE>This is the opening tag for the entire table. It can fit anywhere within the BODY of an HTML document.
<TR>This is the opening tag for a Table Row. It follows the Table tag.
It contains one or more Table Data cells.
<TD>?</TD>These are opening and closing tags for a Table Data Cell. The Table Data Cell contains all of the displayed information in the table, whether it is text, or image. Table Data Cells can also contain additional Tables. Two Table Data Cells are displayed in a row in the table shown above.
</TR>This is the closing tag for the Table Row. It can be followed by another new Table Row, or by the closing tag for the Table. In the example above, it is followed by another Table Row containing two more Data Cells.
</TABLE>This is the closing tag for the entire Table.

That is a quick nutshell description of the basic Table we will use to reassemble our sliced up image. We will only have to make a few minor modifications to the basic table shown above. You can now copy and paste the table code above in between the body tags in table-lesson.html.
It should look like this-

<HTML>
<HEAD>
<TITLE>Table Lesson</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>?</TD><TD>?</TD>
</TR>
<TR>
<TD>?</TD><TD>?</TD>
</TR>
</TABLE>
</BODY>
</HTML>

If you view that in your browser , you will see the four question marks, two on top, two on bottom. Lets make the table a little more visible. Go to the opening Table tag,
<TABLE>, and change to
<TABLE border=1>. Now view in web browser, and you will see the border around the question marks.
Lets inject our graphic slices. Replace the first question mark in the first Table Data Cell (TD) with <IMG SRC="top-left.jpg">.
Replace the second question mark in the next TD tag with
<IMG SRC="top-right.jpg">. Continue until your html looks like this

<HTML>
<HEAD>
<TITLE>Table Lesson</TITLE>
</HEAD>
<BODY>
<TABLE border=1>
<TR>
<TD><IMG SRC="top-left.jpg"></TD><TD><IMG SRC="top-right.jpg"></TD>
</TR>
<TR>
<TD><IMG SRC="bot-left.jpg"></TD><TD><IMG SRC="bot-right.jpg"></TD>
</TR>
</TABLE>
</BODY>
</HTML>

Preview that in your browser , and you will see we are getting close. We need to change the tags to eliminate all gaps and borders between the images. Take the current opening Table tag, <TABLE border=1>
change to <TABLE border=0 cellspacing=0 cellpadding=0>
Your html now looks like this-



<HTML>
<HEAD>
<TITLE>Table Lesson</TITLE>
</HEAD>
<BODY>
<TABLE border=0 cellspacing=0 cellpadding=0>
<TR>
<TD><IMG SRC="top-left.jpg"></TD><TD><IMG SRC="top-right.jpg"></TD>
</TR>
<TR>
<TD><IMG SRC="bot-left.jpg"></TD><TD><IMG SRC="bot-right.jpg"></TD>
</TR>
</TABLE>
</BODY>
</HTML>

Preview

We have added the Table to the HTML document, and we have changed the Table tags to show no border ( the line size surrounding the table and its cells) , no cellspacing (the distance between the neighboring Data Cells), and no cellpadding (the distance between the walls of the Data Cell, and the Data it contains). This has placed the Data in all four Data cells up against each other. With nothing to separate the four images, they appear as one, assuming you placed the right images in the right Data Cells. Also critical, and often overlooked-the Data Cells (TD) tags are placed up against each other, with no spacing. There is no gap between the closing of the first Data cell </TD> and the start<TD> of the next Cell in the same Table Row. If there is a space in the coding, it will show in the finished Table.

Is this all there is to know about Tables? No way. Individual images within Tables can be made active links, individual Table Data Cells can contain Tables nested within them. Attributes include border color, border size, Data Cell background colors, etc. For a complete listing of HTML Table tags, their attributes and usages, try a site like Willcam's Comprehensive HTML Cross Reference, or Blooberry.com's Index DOT Html Listing. After you get a good command of Tables, all of the Interface projects are within your grasp. All you have to do is add scripts to make active links and image swapping effects. Plenty can be done with Tables without using images as well. The menu I use on this web site is constructed entirely of tables, for example. Until CSS style sheets and other techniques improve and take things over, Tables still rule.