• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 158
  • Last Modified:

help with tables

ok i'm creating a new website and having some trouble with the tables. i can't figure out how you get a table to stay one size and one size only. if i set it to what i want it to be it looks fine with nothing in it. but as soon as i add somethign (this something is menu.xhtml) it becomes bigger and changes how everything looks. i just need someway to get the table to lock at the size it is already and then if it needs to become bigger just add in scroll bars. any clues?
0
mtrxpoet
Asked:
mtrxpoet
1 Solution
 
superslamwichCommented:
0
 
COBOLdinosaurCommented:
Using tables for layout is a poor choice for a new site; that is not what they are intended for, though it is quite common to see in older sites.

Tables are supposed to be flexible and size to content.

There is some help with styling.  In the table tag you can use: style="table-layout:fixed;width:xxx"
then between the table tag and the first tr set the widths:

         <col width=80>
         <col width=80>
         <col width=80>
         <col width=80>
         <col width=80>
         <col width=80>

then site the height on the tr tags:

<tr style="height:yyy">

Then for cell that might over flow control it with

<td style=overflow:auto">

that will put in scroll bar where needed... sometimes; in some browsers.

any overall height for a table will frequently be ignored so it is best to put the table inside a scrolling layer like this:
<div "style=height:yyy;overflow:auto">
<table etc...
</div>

If there is a lot of overflow you will have scrollbars all over the place and it will be ugly as sin.  Even without a lot of scrollbars it it be very inflexibile, easily screwed up by user preferences, and a nightmare to maintain.

Cd&
0
 
gator4lifeCommented:
If you post the code you are using, I am sure someone could give you a quick solution rather than shooting in the dark.  However, COBOL's post has a lot of good information in it if you are going to try and solve it on your own.

gator4life
(chomp, chomp)
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
mtrxpoetAuthor Commented:
<html>
<head>
<title>Teen Writing Net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script>

<!--
/* clears default values from input boxes */
function clearText(thefield){
if (thefield.defaultValue==thefield.value)
thefield.value = ""
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->


window.status="Teen Writing Net - The place for teens to write and express";

function makevisible(cur,which){
if (which==0) cur.filters.alpha.opacity=100
else cur.filters.alpha.opacity=40 }

</script>
<style type="text/css">
.justify {text-align: justify}
body {scrollbar-face-color: #D2D2D2; scrollbar-shadow-color: #B2B2B2; scrollbar-highlight-color: #DFDFDF; scrollbar-3dlight-color: #A5A5A5; scrollbar-darkshadow-color:#A5A5A5; scrollbar-track-color: #C5D0D6; scrollbar-arrow-color: #909090; color: #007FC0; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 9pt}
submit  {border: 1 solid #007FC0; color: #007FC0; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; background-color: #D8D8D8}
input  {border: 1 solid #007FC0; color: #007FC0; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; background-color: #D8D8D8}
textarea  {border: 1 solid #007FC0; color: #007FC0; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; background-color: #D8D8D8}
td  {font-color: #007FC0; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 9pt}
body  {font-color: #007FC0; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 9pt}
a:link  {color: #008CD3; text-decoration: underline}
a:visited  {color: #008CD3; text-decoration: underline}
a:active  {color: #8EBAD0; text-decoration: none}
a:hover  {color: #8EBAD0; text-decoration: none}
.blue {background-color: #007FC0}
.justify {text-align: justify}

</style></head>

<body bgcolor="#A0A19C" text="Black">
<a href="http://www.teenwriting.net"><img src="http://www.teenwriting.net/header.jpg" border="0" alt="Home James!"></a>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr style="height:250">
    <td width="143" height="217" valign="top" > 
      <table width="100%" border="0" cellspacing="0" cellpadding="0" background="images/bg.gif" style="border: 1 dashed white table-layout:fixed;width:143" >
        <col width=100>
            

          <tr>
          <td width="9" height="7"><img src="images/topleft.gif" width="9" height="9"></td>
          <td width="125" height="7"><img src="images/mainmenu.gif" width="125" height="9"></td>
          <td width="10" height="7"><img src="images/topright.gif" width="9" height="9"></td>
        </tr>
        <tr style="height:2107">
          <td width="9" height="9"><img src="images/spacer.gif" width="9" height="9"></td>
          <td width="125" wrap height="100%" valign="top" style=overflow:auto"><br>
            <!--#include file = "menu.xhtml"-->
          </td>
          <td width="10"><img src="images/spacer.gif" width="9" height="9"></td>
        </tr>
        <tr>
          <td width="9" height="7"><img src="images/bottomleft.gif" width="9" height="9"></td>
          <td width="125" height="7"><img src="images/spacer.gif" width="9" height="9"></td>
          <td width="10" height="7"><img src="images/bottomright.gif" width="9" height="9"></td>
        </tr>
      </table>
              <br>
      <table width="100%" border="0" cellspacing="0" cellpadding="0" background="images/bg.gif" style="border: 1 solid #8EBAD0">
        <tr>
          <td width="9" height="5"><img src="images/topleft.gif" width="9" height="9"></td>
          <td width="125" height="5"><img src="images/affiliates.gif" width="61" height="5"></td>
          <td width="10" height="5"><img src="images/topright.gif" width="9" height="9"></td>
        </tr>
        <tr>
          <td width="9" height="9"><img src="images/spacer.gif" width="9" height="9"></td>
          <td width="125" height="100%" valign="top" align="center">
            <p>
              <img src="images/spacer.gif" width="9" height="9"><br>

          </td>
          <td width="10"><img src="images/spacer.gif" width="9" height="9"></td>
        </tr>
        <tr>
          <td width="9" height="7"><img src="images/bottomleft.gif" width="9" height="9"></td>
          <td width="125" height="7"><img src="images/spacer.gif" width="9" height="9"></td>
          <td width="10" height="7"><img src="images/bottomright.gif" width="9" height="9"></td>
        </tr>
      </table>
        <br>
      <table width="100%" border="0" cellspacing="0" cellpadding="0" background="images/bg.gif" style="border: 1 solid #8EBAD0">
        <tr>
          <td width="9" height="7"><img src="images/topleft.gif" width="9" height="9"></td>
         
    <td width="125" height="7"><img src="images/extra.gif"></td>
          <td width="10" height="7"><img src="images/topright.gif" width="9" height="9"></td>
        </tr>
        <tr>
          <td width="9" height="9"><img src="images/spacer.gif" width="9" height="9"></td>
         
    <td width="125" height="100%" valign="top">
     
    </td>
          <td width="10"><img src="images/spacer.gif" width="9" height="9"></td>
        </tr>
        <tr>
          <td width="9" height="7"><img src="images/bottomleft.gif" width="9" height="9"></td>
          <td width="125" height="7"><img src="images/spacer.gif" width="9" height="9"></td>
          <td width="10" height="7"><img src="images/bottomright.gif" width="9" height="9"></td>
        </tr>
      </table>
            </td>
    <td width="9" height="217"><img src="images/spacer.gif" width="9"></td>
    <td width="100%" height="217">
      <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" background="images/bg.gif" style="border: 1 solid #8EBAD0">
        <tr>
          <td width="10" height="9"><img src="images/topleft.gif" width="9" height="9"></td>
          <td width="100%" height="9"><img src="images/maindisplay.gif" width="300" height="9"></td>
          <td width="9" height="9"><img src="images/topright.gif" width="9" height="9"></td>
        </tr>
        <tr>
          <td width="10" height="185"><img src="images/spacer.gif" width="9" height="9"></td>
          <td width="100%" height="100%" valign"absmiddle" align="center">
                        <center>
             
this is the main text area
          </td>
          <td width="9" height="185"><img src="images/spacer.gif" width="9" height="9"></td>
        </tr>
        <tr>
          <td width="10" height="9"><img src="images/bottomleft.gif" width="9" height="9"></td>
          <td width="100%" height="9"><img src="images/spacer.gif" width="9" height="9"></td>
          <td width="9" height="9"><img src="images/bottomright.gif" width="9" height="9"></td>
        </tr>
      </table>
    </td>
      <td>
      <img src="images/spacer.gif">
      </td>
      <td width="25%" height="217">
      <table width="25%" border="0" cellspacing="0" cellpadding="0" background="images/bg.gif" style="border: 1 solid #8EBAD0">
        <tr>
          <td width="10" height="11"><img src="images/topleft.gif" width="9" height="9"></td>
          <td width="100%" height="11"><img src="images/virus_feed.gif" width="150" height="9"></td>
          <td width="9" height="11"><img src="images/topright.gif" width="9" height="9"></td>
        </tr>
        <tr>
          <td width="10" height="185"><img src="images/spacer.gif" width="9" height="9"></td>
          <td width="100%" height="100%" valign="top" class="justify">
           
                  
            <br>
            <table width="100%" style="border: 1 solid #8EBAD0" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td>
                          <center>
                  Current        </center>
                          </td>
                </tr>
              </table>
              this is the news of stuff for now
          </td>
          <td width="9" height="185"><img src="images/spacer.gif" width="9" height="9"></td>
        </tr>
        <tr>
          <td width="10" height="9"><img src="images/bottomleft.gif" width="9" height="9"></td>
          <td width="100%" height="9"><img src="images/spacer.gif" width="9" height="9"></td>
          <td width="9" height="9"><img src="images/bottomright.gif" width="9" height="9"></td>
        </tr>
      </table>
    <img src="images/spacer.gif">
      <table width="25%" border="0" cellspacing="0" cellpadding="0" background="images/bg.gif" style="border: 1 solid #8EBAD0">
        <tr>
          <td width="10" height="11"><img src="images/topleft.gif" width="9" height="9"></td>
          <td width="100%" height="11"><img src="images/updates.gif" width="150" height="9"></td>
          <td width="9" height="11"><img src="images/topright.gif" width="9" height="9"></td>
        </tr>
        <tr>
          <td width="10" height="185"><img src="images/spacer.gif" width="9" height="9"></td>
          <td width="100%" height="100%" valign="top" class="justify"><br>
            woo hooo
          </td>
          <td width="9" height="185"><img src="images/spacer.gif" width="9" height="9"></td>
        </tr>
        <tr>
          <td width="10" height="9"><img src="images/bottomleft.gif" width="9" height="9"></td>
          <td width="100%" height="9"><img src="images/spacer.gif" width="9" height="9"></td>
          <td width="9" height="9"><img src="images/bottomright.gif" width="9" height="9"></td>
        </tr>
      </table>
   
      
      </td>
  </tr>
  <tr>
    <td colspan="5" width="100%"><img src="images/spacer.gif" width="9" height="9"><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="top">
            <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" background="images/bg.gif" style="border: 1 solid #8EBAD0">
              <tr>
                <td width="1%" height="11"><img src="images/topleft.gif" width="9" height="9"></td>
                <td width="98%" height="11"><img src="images/news.gif" width="150" height="9"></td>
                <td width="1%" height="11"><img src="images/topright.gif" width="9" height="9"></td>
              </tr>
              <tr>
                <td width="1%"><img src="images/spacer.gif" width="9" height="9"></td>
                <td width="98%" valign="top"><a name="news"></a>

                <CENTER>

   
    </CENTER>

                </td>
                <td width="1%"><img src="images/spacer.gif" width="9" height="9"></td>
              </tr>
              <tr>
                <td width="1%" height="9"><img src="images/bottomleft.gif" width="9" height="9"></td>
                <td width="98%" height="9"><img src="images/spacer.gif" width="9"></td>
                <td width="1%" height="9"><img src="images/bottomright.gif" width="9" height="9"></td>
              </tr>
            </table>
          </td>
          <td width="11"><img src="images/spacer.gif"></td>
          <td width="160" height="100%">
            <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" background="images/bg.gif" style="border: 1 solid #8EBAD0">
              <tr>
                <td width="1%" height="11"><img src="images/topleft.gif" width="9" height="9"></td>
                <td width="98%" height="11"><img src="images/vent.gif" width="27" height="5"></td>
                <td width="1%" height="11"><img src="images/topright.gif" width="9" height="9"></td>
              </tr>
              <tr>
                <td width="1%" height="31"><img src="images/spacer.gif" width="9" height="9"></td>
                <td width="98%" height="100%" nowrap>
                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td nowrap>
                                                <TABLE><TR>
     
    </TABLE>
    <a href="#" onClick="MM_openBrWindow('shoutboxall.php#bottom','shoutboxall','width=203,height=400, menubar=no,scrollbars=yes,toolbar=no,location=no,directories=no,resizable=no,top=10,left=10,topmargin=0,leftmargin=0,rightmargin=0'); return false">Past Shouts</a>
&nbsp;|&nbsp;
    <a href="#" onClick="MM_openBrWindow('smilies.php','smilies','width=203,height=400, menubar=no,scrollbars=yes,toolbar=no,location=no,directories=no,resizable=no,top=10,left=10,topmargin=0,leftmargin=0,rightmargin=0'); return false">Smilies</a>
</FORM>
                      </td>
                    </tr>
                  </table>
                </td>
                <td width="1%" height="31"><img src="images/spacer.gif" width="9" height="9"></td>
              </tr>
              <tr>
                <td width="1%" height="2"><img src="images/bottomleft.gif" width="9" height="9"></td>
                <td width="98%" height="2"><img src="images/spacer.gif" width="9" height="9"></td>
                <td width="1%" height="2"><img src="images/bottomright.gif" width="9" height="9"></td>
              </tr>
            </table>
          </td>
          <td width="10"><img src="images/spacer.gif" width="9" height="9"></td>
          <td width="153" height="100%">
            <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" background="images/bg.gif" style="border: 1 solid #8EBAD0">
              <tr>
                <td width="1%" height="11"><img src="images/topleft.gif" width="9" height="9"></td>
                <td width="98%" height="11"><img src="images/random.gif" width="45" height="9"></td>
                <td width="1%" height="11"><img src="images/topright.gif" width="9" height="9"></td>
              </tr>
              <tr>
                <td width="1%" height="31"><img src="images/spacer.gif" width="9" height="9"></td>
                <td class="justify" valign="top" width="98%" height="100%">
<p>
<a href='http://www.kett-turton.com' target='new'>
kett turton online
</a>
</p>
<p><u>Kett Turton Online</u></p>
<p>
my partners site who spends more time on her site then mine cause she don't know anything bout this site ;)
<a href='http://www.deviantart.com/' target='new'><img src='random/arrows.gif' width='14' height='5' align='absmiddle' border='0'></a>
</p></td>
                <td width="1%" height="31"><img src="images/spacer.gif" width="9" height="9"></td>
              </tr>
              <tr>
                <td width="1%" height="2"><img src="images/bottomleft.gif" width="9" height="9"></td>
                <td width="98%" height="2"><img src="images/spacer.gif" width="9" height="9"></td>
                <td width="1%" height="2"><img src="images/bottomright.gif" width="9" height="9"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<p>Site is copyright Teen Writing Net. All Entries, writings, and publications are copyright of exclusive owner. &nbsp;<a href=mailto:cfall@teenwriting.net>Contact us</a> with any questions or comments you may have
</body>
</html>
0
 
COBOLdinosaurCommented:
Wonderful.  Nested tables, a mix of fixed and percentages dimensions, depreciated tags, depreciated properties and invalid tagging.

I think we start with you deciding what standard level you want to use.  Then you put a DOCTYPE declaration in, so you can run it through a validator.  Once the validator flags the invalid syntax and depreciated stuff we can work on the semantic errors and design flaws.  At which point you will have a little more control on the behaviour of the page and be able to get it more the way you want it.

I don't have a lot of time for this but I'll be around a little.

Cd&
0
 
mtrxpoetAuthor Commented:
actually your previous suggestion worked great for me, thanks anyways
0
 
COBOLdinosaurCommented:
I'm glad we could help you, but if you are going to be doing a lot of pages, I would recommend that you take a few hours to get an understanding of CSS.  It has much better capabilities for layout and is easier to maintain.  Thanks for the A. :^)

Cd&
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now