HTML - Layout Table - Hyper Link Help

I have a template that is being used for a forum and the tables are not working out and everything looks distorted.

PHP Code:
<script language="JavaScript" src="modules/Forums/bbcode_box/add_bbcode.js" type="text/javascript"></script>



<table border="0" cellpadding="3" cellspacing="1" width="100%" class="forumline">



    <!-- BEGIN switch_username_select -->

    <tr> 

        <td class="row1"><span class="gen"><b>{L_USERNAME}</b></span></td>

        <td class="row2"><span class="genmed"><input type="text" class="post" tabindex="1" name="username" size="25" maxlength="25" value="{USERNAME}" /></span></td>

    </tr>

    <!-- END switch_username_select -->

    <!-- BEGIN switch_privmsg -->

    <tr> 

        <td class="row1"><span class="gen"><b>{L_USERNAME}</b></span></td>

        <td class="row2"><span class="genmed"><input type="text"  class="post" name="username" maxlength="25" size="25" tabindex="1" value="{USERNAME}" /> <input type="submit" name="usersubmit" value="{L_FIND_USERNAME}" class="liteoption" onclick="window.open('{U_SEARCH_USER}', '_phpbbsearch', 'HEIGHT=250,resizable=yes,WIDTH=400');return false;" /></span></td>

    </tr>

    <!-- END switch_privmsg -->

    <tr> 

      <td class="row1" width="22%"><span class="gen"><b>{L_SUBJECT}</b></span></td>

      <td class="row2" width="78%"> <span class="gen"> 

        <input type="text" name="subject" size="45" maxlength="60" style="width:450px" tabindex="2" class="post" value="{SUBJECT}" />

        </span> </td>

    </tr>

    <tr> 

      <td class="row1" valign="top"> 

        <table width="100%" border="0" cellspacing="0" cellpadding="1">

          <tr> 

            <td><span class="gen"><b>{L_MESSAGE_BODY}</b></span> </td>

          </tr>

          <tr> 

            <td valign="middle" align="center"> <br />

              <table width="100" border="0" cellspacing="0" cellpadding="5">

                <tr align="center"> 

                  <td colspan="{S_SMILIES_COLSPAN}" class="gensmall"><b>{L_EMOTICONS}</b></td>

                </tr>

                <!-- BEGIN smilies_row -->

                <tr align="center" valign="middle"> 

                  <!-- BEGIN smilies_col -->

                  <td><img src="{smilies_row.smilies_col.SMILEY_IMG}" border="0" onmouseover="this.style.cursor='hand';" onclick="emoticon('{smilies_row.smilies_col.SMILEY_CODE}');" alt="{smilies_row.smilies_col.SMILEY_DESC}" title="{smilies_row.smilies_col.SMILEY_DESC}" /></a></td><!-- END smilies_col -->

                </tr>

                <!-- END smilies_row -->

                <!-- BEGIN switch_smilies_extra -->

                <tr align="center"> 

                  <td colspan="{S_SMILIES_COLSPAN}"><span  class="nav"><a href="{U_MORE_SMILIES}" onclick="window.open('{U_MORE_SMILIES}', '_phpbbsmilies', 'HEIGHT=300,resizable=yes,scrollbars=yes,WIDTH=250');return false;" target="_phpbbsmilies" class="nav">{L_MORE_SMILIES}</a></span></td>

                </tr>

                <!-- END switch_smilies_extra -->

              </table>

            </td>

          </tr>

        </table>

      </td>

      <td class="row2" valign="top"><span class="gen"> <span class="genmed"> </span> 

        <table width="450" border="0" cellspacing="0" cellpadding="2">

          <tr align="right" valign="middle">
            <td>
              <p dir="rtl" style="margin-top: 0; margin-bottom: 0" align="left"><span class="gen"> 
              <span class="genmed"> 
               <span lang="ar-sy"> </span></span></span></span><p dir="rtl" style="margin-top: 0; margin-bottom: 0">
              <span class="genmed"><span style="font-size: 5pt"> </span></span></td>
          </tr>
          <span class="gen"> 
          <tr> 
            <td width="100%"> 
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr> 
                        <td> 
                          <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
                                <tr> 
                                  <td>
                                  <p dir="ltr" align="left"><span class="gen">  
              <span class="genmed"> 
                                  <span lang="ar-sy"> </span></span></span></td> 
                                </tr> 
                                <tr> 
                                  <td dir="rtl">
                                  <p align="right" dir="rtl" style="margin-top: 0; margin-bottom: 0">
                                  <span style="font-size: 5pt"> </span><p align="left" dir="ltr" style="margin-top: 0; margin-bottom: 0"><span class="gen"> 
              <span class="genmed"> 
                       </span></td> 
                                </tr> 
                          </table> 
                        </td> 
                  </tr> 

              </table>
            </td>
          </tr>

              </table>

            </td>

          </tr>

          <tr> 

            <td colspan="9"> <span class="gensmall"> 

              <input type="text" name="helpbox" size="45" maxlength="100" style="width:450px; font-size:10px" class="helpline" value="{L_STYLES_TIP}" />

              </span></td>

          </tr>
           <!-- Canned MOD Begin -->
          <tr>
            <td colspan="9">{S_CANNED_SELECT}</td>
          </tr>
          <!-- Canned MOD End -->

          <tr> 

            <td colspan="9"><span class="gen"> 

              <textarea name="message" rows="15" cols="35" wrap="virtual" style="width:450px" tabindex="3" class="post" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);">{MESSAGE}</textarea>

              </span></td>

          </tr>

        </table>

        </span></td>

    </tr>

    <tr> 

      <td class="row1" valign="top"><span class="gen"><b>{L_OPTIONS}</b></span><br /><span class="gensmall">{HTML_STATUS}<br />{BBCODE_STATUS}<br />{SMILIES_STATUS}</span></td>

      <td class="row2"><span class="gen"> </span> 

        <table cellspacing="0" cellpadding="1" border="0">

          <!-- BEGIN switch_html_checkbox -->

          <tr> 

            <td> 

              <input type="checkbox" name="disable_html" {S_HTML_CHECKED} />

            </td>

            <td><span class="gen">{L_DISABLE_HTML}</span></td>

          </tr>

          <!-- END switch_html_checkbox -->

          <!-- BEGIN switch_bbcode_checkbox -->

          <tr> 

            <td> 

              <input type="checkbox" name="disable_bbcode" {S_BBCODE_CHECKED} />

            </td>

            <td><span class="gen">{L_DISABLE_BBCODE}</span></td>

          </tr>

          <!-- END switch_bbcode_checkbox -->

          <!-- BEGIN switch_smilies_checkbox -->

          <tr> 

            <td> 

              <input type="checkbox" name="disable_smilies" {S_SMILIES_CHECKED} />

            </td>

            <td><span class="gen">{L_DISABLE_SMILIES}</span></td>

          </tr>

          <!-- END switch_smilies_checkbox -->

          <!-- BEGIN switch_signature_checkbox -->

          <tr> 

            <td> 

              <input type="checkbox" name="attach_sig" {S_SIGNATURE_CHECKED} />

            </td>

            <td><span class="gen">{L_ATTACH_SIGNATURE}</span></td>

          </tr>

          <!-- END switch_signature_checkbox -->

          <!-- BEGIN switch_notify_checkbox -->

          <tr> 

            <td> 

              <input type="checkbox" name="notify" {S_NOTIFY_CHECKED} />

            </td>

            <td><span class="gen">{L_NOTIFY_ON_REPLY}</span></td>

          </tr>

          <!-- END switch_notify_checkbox -->

          <!-- BEGIN switch_delete_checkbox -->

          <tr> 

            <td> 

              <input type="checkbox" name="delete" />

            </td>

            <td><span class="gen">{L_DELETE_POST}</span></td>

          </tr>

          <!-- END switch_delete_checkbox -->
           <!-- BEGIN switch_lock_topic -->
          <tr> 
            <td> 
              <input type="checkbox" name="lock" {S_LOCK_CHECKED} />
            </td>
            <td><span class="gen">{L_LOCK_TOPIC}</span></td>
          </tr>
          <!-- END switch_lock_topic -->
          <!-- BEGIN switch_unlock_topic -->
          <tr> 
            <td> 
              <input type="checkbox" name="unlock" {S_UNLOCK_CHECKED} />
            </td>
            <td><span class="gen">{L_UNLOCK_TOPIC}</span></td>
          </tr>
          <!-- END switch_unlock_topic -->

          <!-- BEGIN switch_type_toggle -->

          <tr> 

            <td></td>

            <td><span class="gen">{S_TYPE_TOGGLE}</span></td>

          </tr>

          <!-- END switch_type_toggle -->

        </table>

      </td>

    </tr>

    {ATTACHBOX}{POLLBOX} 

    <tr> 

      <td class="catBottom" colspan="2" align="center" height="28"> {S_HIDDEN_FORM_FIELDS}<input type="submit" tabindex="5" name="preview" class="mainoption" value="{L_PREVIEW}" /> <input type="submit" accesskey="s" tabindex="6" name="post" class="mainoption" value="{L_SUBMIT}" /></td>

    </tr>

  </table>



  <table width="100%" cellspacing="2" border="0" align="center" cellpadding="2">

    <tr> 

      <td align="right" valign="top"><span class="gensmall">{S_TIMEZONE}</span></td>

    </tr>

  </table>

</form>



<table width="100%" cellspacing="2" border="0" align="center">

  <tr> 

    <td valign="top" align="right">{JUMPBOX}</td>

  </tr>

</table>



{TOPIC_REVIEW_BOX} 



Could somebody take a look at that and see what I'm missing or need to add.

Thanks

This is pretty basic, i am trying to make a layout using tables to include a header, nav bar, left, main and right columns(tables) and a footer, so far i have this(below), the header and nav bar work ok, after that the tables align to the left out of postion with the header etc, how do i get the left table to be flush with the header and nav bar tables and then the middle table and right tables(cols) to be in the right place??... any help here....?

HTML Code:

<table width = "80%" border = "1" align = "center">

<tr>
<td> Header </td>
</tr>

<table width = "80%" border = "1" align = "center">
<tr>
<td> Nav bar</td>
</tr>
</table>

<!--  i can't get this table to be flush with the header and nav bar tables -->

<table width = "20%" border = "1" align = "left">
<tr>
<td> Left col </td>
</tr>
</table>

</table>

This is what i am trying to achieve,

I designed a page using tables with background images to create borders around photos. Click here to view the page. The page renders correctly in Firefox, but does not in IE7. The lower right hand corner border of the photo in the 2nd and the 4th testimonials is off track for some reason. I double checked all of my widths and they are consistent. Can someone please tell me what I'm missing. Thanks in advance for your help!

Hi Guy's,

First time poster and newbie designer.

I am trying to put a three column template together for a content site, I want to have the text in the middle, nav on the left and adsense on the right hand column.

Problem is that I simply can't get the elements to align correctly, when I add the text, the images on the left and right are pushed down to the middle of the left and right columns and if I push up the left image using text and white space it pushes the text in the middle column out of alignment!!!

It's incredibly frustrating and I have tried lots of alignment settings to get it to work but I can't and I am sure I am just missing some real basic things.

Please can you look at the page and help me to find what I am doing wrong

http://www.blueballoonshopping.info/3colprob.html

Thanks

SEE IMAGE

How can I get these two tables on the same row? Do they have to be in one whole table altogether? Or can they be separate tables. At the 'mo they're different tables.


Thanks

It figures it's the easy things that are getting me..lol. For some reason I just can't seem to get the table to match what I am looking for. Could be I am up too late trying to get this to work but if anyone could provide the table code I would need to get the following it would be much appreciated!! I don't need any of the width attributes or anything, just the basic table structure to get this layout!! Thank you in advance for the help!!

A crude drawing but hopefully gets the idea across..lol

I am making a table layout and am having a problem. There are two pictures enclosed.. one is how is should look (minus text) and the other is how it shows up in InternetExplorer

Table Code:


<body text=#FFFFFF LINK=#FFFFFF ALINK=#FFFFFF VLINK=#FFFFFF>


<table width="770" valign="top" border="0" cellpadding="0" cellspacing="0" align="center" alt="">

<tr>
<td colspan="4">
<img src="images/header_01.png" width="770" height="185" alt=""></td>
</tr>


<tr>
<td colspan="2" valign="left" width="446" height="71" alt="" style="background: url('images/header_02.png') no-repeat; padding-top: 0px; padding-left: 446px; padding-right: 0px; padding-bottom: 0px;">
</td>

<td colspan="2" valign="right" width="324" height="71" alt="" style="background: url('images/header_03.png') no-repeat; padding-top: 12px; padding-left: 10px; padding-right: 535px; padding-bottom: 0px;">
<!---------------------------------News----------------------------------->
<p class="marquee">
<Marquee direction="left" scrollamount="2" scrolldelay="50">
News at 11!
</Marquee></p>
<!---------------------------------News----------------------------------->
<td>

<tr>
<td width="229" colspan="1" valign="top" alt="" style="background: url('images/header_04.png') repeat; padding-top: 0px; padding-left: 80px; padding-right: 225px; padding-bottom: 5px;">
<!---------------------------------Navigation------------------------------------>
<p class="nav">Main</p>
<p class="li">
= <a href="index.html">Home</a><br>

</p>
<!---------------------------------Navigation------------------------------------>
</td>



<td class="padding" colspan="2" valign="top" width="282" alt="" style="background: url('images/header_05.png') repeat; padding-top: 40px; padding-left: 3px; padding-right: 3px; padding-bottom: 5px;">
<!----------------------------------Content-------------------------------------->
<center>*insert title*</center>
<!----------------------------------Content-------------------------------------->
</td>



<td colspan="1" valign="top" width="257" height="21" alt="" style="background: url('images/header_06.png') repeat; padding-top: 8px; padding-left: 0px; padding-right: 0px; padding-bottom: 5px;">
<!------------------------------------Info--------------------------------------->
<center>Hey!</center>
<!------------------------------------Info--------------------------------------->
</td>
</tr>



<tr>
<td colspan="1" valign="top" width="770" height="118" alt="" style="background: url('images/header_07.png') no-repeat; padding-top: 50px; padding-left: -1px; padding-right: 0px; padding-bottom: 30px;">
<!-----------------------------------Credits--------------------------------------->
<center>
Site is Copyright &copy; of Concord Cosplay Group 2007<br>
Layout by Joel Watson
</center>
<!-----------------------------------Credits--------------------------------------->

</td>
</tr>






</table>



</body>

So I had a friend who owed me some work layout my new website. He did it in a table format and probably used a template.

I hate working with tables and I've been trying to get a nav bar underneath the main picture, but I don't remember how to do it in tables. I wish he would have done the whole layout in CSS.

So the question is: can I place a nav box absolutely on the page even though it's a table layout? Or what if it scrolled down with the reader? That's javascript right?

I kinda like the layout so I don't want to muck too much with the look and feel (plus I have to build about 15 more pages of information before I can put too much work on layout).

You can see the website he
http://www.hollywood-script-reader.com

I started a navigation box in my CSS, but it either puts it right at the top or below the whole layout. Thought I'd let the masters tell me why I suck at this! Thanks everyone. I feel like I have this forum on speed dial.

Roberto

Hi there.

Can anybody help me fix this issue.

At this test url you will see a simple table layout that I have built in Dreamweaver

http://www.mediaminx.com/development/

The css can be viewed here

http://www.mediaminx.com/development/pages/test.css

The problem is not Firefox as this renders the layout perfectly - as does 3 other popular browsers. The problem is IE - it just wont render the layout correctly. All the table cells are out of proportion and the css just isnt controlling.

Note that when the middle cell isnot split into may cells ie will render the table correctly - as in 3 columns with the middle one at 760pix and the two outer set to auto and the height set to 100%. But as soon as I start splitting that middle column it throws IE out?

Any ideas out there please?

I am trying out a couple of layouts for presenting some information in
table format. Basically, two tables side by side.

Table 1: 3 rows, one column fixed width.
table 2: A calendar format with 3 rows.

In FF they are displayed as I want them. Even if I include an overflow
to force a horizontal scrollbar. Ok I know. But if horizontal
scrollbars are not desired, then why do we have them?
In IE the overflow is totally ignored.

Should I happen to have in table 1, a 4th line of text, then the <hr>
I use as a seperator, shows up floating beside table 1, not underneath
it as it should.
Easily fixed with a <br> but I feel that should not be necessary.

In IE, A horizontal scroll bar is not displayed until the data is
forced way beyond the edge unlike in FF. Then table 2 drops below
table 1 which is not where I want it.

In another format, I simply place table 2 under table 1. Which is ok
but just doesn't look right.

Anyone have a site that discusses this problem and how to work around
it so that the browsers are satisfied and the tables show as I want?

Hello,

I cannot seem to get my css menu to work in harmony with my html table.

Here is where the problem lies: http://www.beta.iquorum.net

It looks fine sometimes when the page is maximized. However, when you resize the browser to a smaller size, it distorts the alignment. I know it does this because the layer that the menu resides in has a fixed coordinate position, while my table is aligned via the align tag in my HTML code.

Is there a way to somehow put the menu inside of the cell of my table? Every time I try, it completely ruins the layout of the page and prevents the menu from functioning correctly.

Is there a way to possibly define a fixed coordinate position for a table rather than using the align="center" tag? Just a thought.

Thanks for any suggestions.

Hello,
I made a very simple table layout (with photoshop and imageready) and its my very first time making this type of layout so I'm having a little trouble with the coding. I haven't added a style.css file to it, except for maybe the css that wraps my navigation to a certain width.

Here is the url: http://rezina.awardspace.com/layout01

I can't seem to align the images correctly. My friend told me that one of the images was not sliced correctly, so I sliced it but .. it kind of fixed the right side, and not the left.

Also, the extra.jpg (which is the outside background-the stripes) seems to repeat itself both vertically and horizontally, is there a way to fix that?

Thanks. =))

oh. oops. I just read the rules, sorry for the vague title. I would try changing it to be more specific but I don't know how..

Hi I am very new to website design and html code therefore I cannot spot what may be a very simple error in my webpage code.

The page in question is http://www.stephanieholmes.co.uk/videos.html

I have made the page in dreamweaver. The content is layed out in a table 7x8 with the two outer column's rows merged to contain the left and right floral border. However, in Firefox the centre columns are displaced vertically, but this problem does not occur in IE which confuses me. Please help!

If anyone can help with this problem I would be very grateful.

It's a problem I notice on a fairly regular basis so I guess I am over looking something when I am working with tables. Basically my table sizes look completely different in IE than they do in Firefox.

Here is an example of a table I'm working on that appears massive in firefox yet is keeping its correct dimensions of height 287 pixels in IE.

http://www.orolin.co.uk/prices.html

Can anyone shed any light on this problem?. It would be much appriciated. Many Thanks, Jamie

Hi all, I love the design of this forum.

I have a very annoying HTML problem and really need help. Would REALLY appreciate it.

On some of the pages there's too much space between the table cells. I've tried EVERYTHING and couldn't find the source of the problem. Take it as a challenge and please help... Try this: http://www.canaseed.com/Search.aspx?search=csdc

I've attached a gif file that describes the problem.

Thank you so much for your help...