1. Lesson 17

   Another Framed Background

    

   Sample 2 Framed background was a little more complicated to successfully line the graphics up for viewing in any screen resolution.  The first sample only took one table to create because the graphics that needed the width enforced were all the same width and the columns for each row were 3. This is not the case with this page as neither the columns or the rows match. Below you will see what is required to line the graphics for this background.

    

   1. First create a table with 1 row, 1 column, alignment centered, border 0 and width 80%

   2. In that table 3 more tables will need to be created, one under the other. The first in line will require 5 columns, 1 row to start, alignment center, border 0 and width 100%. Then the middle 3 columns will need to be split into 2 rows and then the second row 3 columns will need to be merged. After doing this the table should appear as below but without the borders.
       

      1X1 1X2 1X3 1X4 1X5 2X1

   3. The height for all of the cells above will be required in order for these rows and columns to distribute properly. The total height of both rows is 150, the cell marked 1X1 and the cell marked 1X5 will be coded with the height of 150, cells 1X2, 1X3 and 1X4 will have a height of 98 leaving 2X1 at a height of 52. Also 1X1, 1X3 and 1X5 will require the width to be entered and 1X2, 1X4 and 2X1 will extend across the page according to the screen resolution. The finished 2 tables HTML should look as follows:
      <div align="center">
      <center>
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="80%" id="AutoNumber1">
      <tr>
      <td width="100%">
      <div align="center">
      <center>
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber2" height="147" background="../../images/FPlessons/imageslicing2/framestep6_2x1.gif">
      <tr>
      <td width="160" height="150" background="../images/FPlessons/imageslicing2/framestep6_1x1.gif" rowspan="3">&nbsp;</td>
      <td height="98" background="../images/FPlessons/imageslicing2/framestep6_1x2.gif">&nbsp;</td>
      <td width="146" height="98" background="../images/FPlessons/imageslicing2/framestep6_1x3.gif">&nbsp;</td>
      <td height="98" background="../images/FPlessons/imageslicing2/framestep6_1x4.gif">&nbsp;</td>
      <td width="161" height="150" rowspan="3" background="../images/FPlessons/imageslicing2/framestep6_1x5.gif">&nbsp;</td>
      </tr>
      <tr>
      <td height="52" colspan="3">
      <p align="center">&nbsp;</td>
      </tr>
      </table> </tr>
      </table>
      </center>
      </div>

   4. Using the HTML View another table needs to be inserted between the </table> and </tr> marked in red above. The table tag will be identical to the second table tag above but leaving out the height="147" because this table will hold the cell that you would enter your text and images into. There are only 3 columns for this table. The next table should appear as follows:
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber2" background="../../images/FPlessons/imageslicing2/framestep6_2x1.gif">
      <tr>
      <td width="80" background="../images/FPlessons/imageslicing2/framestep6_3x1.gif">&nbsp;</td>
      <td>
      <p align="center">&nbsp;</p>
      <td width="83" background="../images/FPlessons/imageslicing2/framestep6_3x3.gif">&nbsp;</td>
      </tr>
      </table>

   5. The final table to be entered will be the bottom row, and it will appear again as the second table tag did except the height will be different. There will be 5 columns again and two rows, but again they are uneven. This table will be placed directly under the one above.
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" height="157" id="AutoNumber1" background="../../images/FPlessons/imageslicing2/framestep6_2x1.gif">
      <tr>
      <td width="160" rowspan="2" background="../images/FPlessons/imageslicing2/framestep6_6x1.gif" height="157">
      &nbsp;</td>
      <td colspan="3" height="58">
      <p align="center">Insert Footer here</td>
      <td width="161" rowspan="2" background="../images/FPlessons/imageslicing2/framestep6_6x3.gif" height="157">
      &nbsp;</td>
      </tr>
      <tr>
      <td background="../images/FPlessons/imageslicing2/framestep6_7x1.gif" height="99">
      &nbsp;</td>
      <td width="150" background="../images/FPlessons/imageslicing2/framestep6_7x2.gif" height="99">
      &nbsp;</td>
      <td background="../images/FPlessons/imageslicing2/framestep6_7x3.gif" height="99">
      &nbsp;</td>
      </tr>
      </table>

   6. If you try to put all 5 rows of this image into just one table, you would create a mess as it is not evenly proportioned. By placing 3 tables within another table, you have created a background in which can be expanded and compressed to 80% in any screen resolution. It's the coding within the <td> tags that determine if a cell is fixed or if it is expandable, the cells in which do not have a width coded into them will expand and compress with screen resolution. This way no matter how the viewer sees the page, it will appear almost the same as how you view the page. Putting the 4 tables together it should look similar to below.

 

    Copyright © 2003 Margaret Walker