?
Solved

help with tables

Posted on 2003-03-16
7
Medium Priority
?
150 Views
Last Modified: 2010-04-09
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
Comment
Question by:mtrxpoet
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 3

Expert Comment

by:superslamwich
ID: 8147909
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 200 total points
ID: 8147939
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
 
LVL 5

Expert Comment

by:gator4life
ID: 8148027
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:mtrxpoet
ID: 8148507
<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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 8148601
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
 

Author Comment

by:mtrxpoet
ID: 8148677
actually your previous suggestion worked great for me, thanks anyways
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 8152765
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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question