Dreamweaver Tables driving me mad!!

jmal

Hi All.

I'm an inexperienced web designer and I am doing a website for a friends Parish. I've designed a few website before but I am a self-thought Dreamweaver user and keep running into the same problem with tables when creating web pages. I'm using Dreamweaver UltraDev 4.

The table spacing is a mystery to me and is driving me crazy! I have a table inside a table and when I view the page in Internet Explorer there is a huge space above and below the table. I have tried to drag up all the other sections of the page with no sucess.

Can anyone explain what might be causing this strange behaviour. I't happening to me alot and I have a feeling its an inexperience issue and easly resolved. Your help would be greatly appreciated.

Jmal

LowOdour

Are you using the designer part of it....to drag on the tables and resize them manually? Thats always a bad thing. Maybe you should post up the html so we can have a look at.
I presume its some thing like this that your trying to do
<table><tr><td><table><tr><td></td></tr></table></td></tr></table>

jmal

Hi Low,

thanks for the help. Here's the HTML.

<table id="wrapper" border="0" cellspacing="0" cellpadding="0" width="833" height="1552">
  <tr>
      
    <td width="542" style="height:116px"><a href="index.html"><img src="images/logo.gif" alt="logo" width="534" height="116" border="0"></a></td>
      
    <td width="338" style="height:116px"> 
      <div align="right"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','images/home-bt2.gif',1)"><img src="images/home-bt.gif" alt="home" name="Image7" width="60" height="60"></a><a href="findus.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','images/findus-bt2.gif',1)"><img src="images/findus-bt.gif" alt="find us" name="Image8" width="60" height="60"></a><a href="sitemap.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','images/sitemap-bt2.gif',1)"><img src="images/sitemap-bt.gif" alt="site map" name="Image9" width="60" height="60"></a></div></td>
    </tr>
    <tr>
      
    <td colspan="2" id="nav" height="288"> 
      <ul class="menu">
        <li><a href="about.html">About us</a></li>
        <li><img src="images/div.gif" alt="" class="dv"></li>
        <li><a href="ministries.html">History</a></li>
        <li><img src="images/div.gif" alt="" class="dv"></li>
        <li><a href="events.html">Gallery</a></li>
        <li><img src="images/div.gif" alt="" class="dv"></li>
        <li><a href="worship.html">Diary</a></li>
        <li><img src="images/div.gif" alt="" class="dv"></li>
        <li><a href="map.html">Map of Site</a></li>
        <li><img src="images/div.gif" alt="" class="dv"></li>
        <li><a href="contacts.html">Contacts</a></li>
      </ul>
    </td>
    </tr>
    
  <tr valign="top"> 
    <td colspan="2" height="4868"> 
      <table border="0" align="center" cellpadding="0" cellspacing="0" id="interior" width="787" height="4876">
        <tr>
          <td class="padding" height="5204">
            <table width="823" border="0" height="3618" align="center">
              <tr> 
                <td height="53" valign="middle"> 
                  <p>&nbsp;</p>
                  <p><font color="#666633" size="5"><b><font color="#FF0000">Grave 
                    Yard Map</font></b></font> </p>
                </td>
              </tr>
              <tr> 
                <td height="49"> 
                  <h3>Click on the map to enlarge and review details.</h3>
                </td>
              </tr>
              <tr> 
                <td height="344"> 
                  <div align="center"> 
                    <p><a href="images/ABC_Grave_Yard.pdf"><img src="images/YardMap.jpg" width="800" height="679" border="0" align="texttop"></a></p>
                    <p>&nbsp;</p>
                  </div>
                </td>
              </tr>
              <tr> 
                <td height="3934"> 
                  <table width="790" border="0" height="263" align="center">
                    <tr valign="top"> 
                      <td colspan="3" height="71"> 
                        <h3>&nbsp;</h3>
                        <h3><font color="#FF0000" size="5">Information</font></h3>
                      </td>
                    </tr>
                    <tr> 
                      <td colspan="3">eeeeeeeeeeeeeeeeeeeeeeeee&quot; 
                        Prices in Euro/s &euro;&quot;</td>
                    </tr>
                    <tr> 
                      <td width="60" valign="middle">1.</td>
                      <td width="627" valign="middle">ssssssssssssssssssssss</td>
                      <td width="89" valign="top">&euro;200.00</td>
                    </tr>
                    <tr> 
                      <td width="60" valign="middle">2.</td>
                      <td width="627" valign="middle">ddddddddddd</td>
                      <td width="89" valign="top">&euro;100.00</td>
                    </tr>
                    <tr> 
                      <td width="60" height="42" valign="middle">3.</td>
                      <td width="627" height="42"
                       valign="middle">xxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
                      <td width="89" height="42" valign="top">&euro;200.00</td>
                    </tr>
                    <tr> 
                      <td width="60" valign="middle">4.</td>
                      <td width="627" valign="middle">dddddddddddddddddd</td>
                      <td width="89" valign="top">&euro;500.00</td>
                    </tr>
                    <tr> 
                      <td width="60" height="44" valign="middle">5.</td>
                      <td width="627" height="44" valign="middle"> 
                        <p>ssssssssssssssssssssssssssss</p>
                        <p>(ssssssssssssssssssssssssssss)</p>
                      </td>
                      <td width="89" valign="top" height="44">&euro;2,000.00</td>
                    </tr>
                    <tr> 
                      <td width="60" valign="middle">6.</td>
                      <td width="627" valign="middle">ccccccccc</td>
                      <td width="89" valign="top">&euro;100.00</td>
                    </tr>
                    <tr> 
                      <td width="60" valign="middle">7.</td>
                      <td width="627" valign="middle">7. Text 10201</td>
                      <td width="89" valign="top">&euro;500.00</td>
                    </tr>
                    <tr> 
                      <td colspan="3" height="31"> 
                        <div align="center"></div>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    </tr>
    
    <tr>
      
    <td colspan="2" id="footer" height="2">&#169; 2008 ... &nbsp;| &nbsp;<a href="findus.html">find 
      us</a>&nbsp; | &nbsp;<a href="audio.html">audio messages</a>&nbsp; | &nbsp;<a href="staff.html">staff</a>&nbsp; 
      |&nbsp; <a href="index.html">home</a></td>
    </tr>
  </table>

</body>
</html>

Think I have added the correct code. Note: I've changes some text in the HTML with "ssssssssssssssss" etc as I do not want to show it here.

Thanks

louie

what's up with the td height here:

<td height="3934">

jmal

I see that.

I've tried to reduce the td height but its very difficult to see exactly where the changes as taking place.

My HTML is very poor.

louie

you can delete the height for tables as is not required - they will expand with the content.

LowOdour

Ok, that needs a lot more work than your question explained.

What I would do is remove all heights from everything. Dont set heights on all cells (td), set them once on the row (tr).
I think its lines like these that are the real problem though.
<td colspan="2" height="4868">
<table border="0" align="center" cellpadding="0" cellspacing="0" id="interior" width="787" height="4876">
You are trying to put some higher (the table) into the cell (td). In reality, the td should be 4876 and the table 4868.

Not sure how much html knowledge you have, but I would look at not using a design mode to design pages and try to hand code as much as possible, so that you get a feel for html.
I know its not a great deal of help but you need to take a proper look at what your doing again.
A little tip, if you want to see sizes better set the border on the table to 1px so that you get a better view of your layout. you can remove the border afterwards

Creamy Goodness

Only use tables for tabular data tables for content layout is a bad idea and will cause you to pull your hair out.

jmal

Thanks all for the help.

I did what louie said and deleted the <td> heights and it resolved the problem.

Worked perfect.:D

Thanks again

jmal

Hi all.

You might be able to help me with one last requirement for this site.

My mate would like to have a section where he can update a small "Upcoming Events" section on the front page once the site is up and running.

He does not have a HTML editor (Dreamweaver) and need it to be something as simple as updating a MS word or notepad file with the 3-4 Upcoming events every couple of weeks.

Can any-one offer any suggestion on a fool proof and simple method of doing this.

Your help is greatly appreciated.

JJ

louie

Database + Administration Area for add / update content

tricky D

jmal wrote: »

My mate would like to have a section where he can update a small "Upcoming Events" section on the front page once the site is up and running.

He does not have a HTML editor (Dreamweaver) and need it to be something as simple as updating a MS word or notepad file with the 3-4 Upcoming events every couple of weeks.

Can any-one offer any suggestion on a fool proof and simple method of doing this.

Your help is greatly appreciated.

JJ

Use a Content Management System

The usual recommendations are CushyCMS and CMS Made Simple. There are others mentioned in previous threads.

daymobrew

tricky D wrote: »

CMS Made Simple.

OP - you can demo CMS Made Simple at opensourcecms.com

The demo site has a News section on the left. This is easily updated in the admin interface.

If that looks like what your friend wants, then post here as there are a few who use CMS Made Simple regularly.