Need some basic tables HELP! Please and thank you.

Discussion in 'HTML & Website Design' started by mafia mazy, Dec 22, 2009.

  1. #1
    This is what I'm trying to achieve.

    [​IMG]

    Basically there's two columns, and then the largest column on the left is split into 3 more columns. I've been playing with it for hours but all I seem to get is error messages.

    <table width="100%" cellspacing="0" cellpadding="5" border="0" align="center">
      <tr>
    
    	<td valign="top" width="78%">
    		<table width="100%" cellpadding="2" cellspacing="1" border="0" class="forumline">
    		  <tr>
    			table contents
    		  </tr>
    		</table>
    
    		<br />
    
    
    
    		<table width="33%" cellpadding="2" cellspacing="1" border="0" class="forumline">
    		  <tr>
    
    		table contents
    		  </tr>
    		</table>
    
    		</td>
    
    
    
    	<td valign="top" width="22%">
    	  <table width="100%" cellpadding="2" cellspacing="1" border="0" class="forumline">
    	   <tr>
    		table contents
    	   </tr>
    	  </table>
    
    	</td>
      </tr>
    
    </table>
    <br />
    
    
    Code (markup):
    The code above is for this layout, I don't know how to add the other 2 columns in. Any help is greatly appreciated.
    [​IMG]
     
    mafia mazy, Dec 22, 2009 IP
  2. ibg

    ibg Member

    Messages:
    25
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    38
    #2
    Your code is wrong - you need <td> tags for the :
    <table width="33%" cellpadding="2" cellspacing="1" border="0" class="forumline">
    <tr>

    table contents
    </tr>

    Table contents. Think of <tr> as row and <td> as columns.
     
    ibg, Dec 22, 2009 IP
  3. webtechnologies

    webtechnologies Peon

    Messages:
    370
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You can do this with DIVS in less than a few minutes,
    Tables are a Pin in the arse!
     
    webtechnologies, Dec 22, 2009 IP
  4. mafia mazy

    mafia mazy Peon

    Messages:
    307
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    How would I go about that?
    I haven't used div much, I'll go look it up now though. But I need to have the tables there, that's essential, the code I showed has the contents deleted as its quite long
     
    mafia mazy, Dec 22, 2009 IP
  5. DaveyJ

    DaveyJ Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    This took me less than 10 seconds. You would have easily spent an hour with DIV's, especially writing all the hacks to make it cross browser compatible.

    <table border="1" width="100%">
      <tr>
        <td width="75%" colspan="3">&nbsp;</td>
        <td width="25%" rowspan="2">&nbsp;</td>
      </tr>
      <tr>
        <td width="25%">&nbsp;</td>
        <td width="25%">&nbsp;</td>
        <td width="25%">&nbsp;</td>
      </tr>
    </table>
    PHP:
     
    DaveyJ, Dec 22, 2009 IP
  6. webtechnologies

    webtechnologies Peon

    Messages:
    370
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I did it in a table for You

    You should view/work with this in dreamweaver.

    Oh...
    and You can set the widths Yourself,
    Im too lazy.

    But here You are..

    <table width="100%" border="0">
      <tr>
        <td>
        <table width="100%" border="0">
          <tr>
            <td>&nbsp;</td>
          </tr>
        </table>
        <table width="100%" border="0">
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </table></td>
        <td>&nbsp;</td>
      </tr>
    </table>
    PHP:
     
    Last edited: Dec 22, 2009
    webtechnologies, Dec 22, 2009 IP
  7. LeetPCUser

    LeetPCUser Peon

    Messages:
    711
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #7
    CSS
    
    #ad
    {
     float:left;
     width:100%;
    }
    
    #banner
    {
     width:100%;
     float:left;
    }
    
    .contentColumn
    {
     float:left;
     width:33%;
    }
    
    #leftContent
    {
     float:left;
     width:78%;
    }
    
    #rightContent
    {
     float:right;
     width:22%;
    }
    
    Code (markup):
    HTML
    
    <div id="leftContent">
     <div id="banner">
      This is your banner. Although in the CSS you will have to define a height and a background image.
     </div>
    
     <div class="contentColumn">Column 1</div>
    
     <div class="contentColumn">Column 2</div>
    
     <div class="contentColumn">Column 3</div>
    </div>
    
    <div id="rightContent">
     <div id="ad">
      This is your ad. You will have to define a height and put some code in here, etc.
     </div>
    </div>
    
    Code (markup):
     
    LeetPCUser, Dec 22, 2009 IP
  8. webtechnologies

    webtechnologies Peon

    Messages:
    370
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #8


    This is what I was talking about,

    Good work Bro.
     
    webtechnologies, Dec 22, 2009 IP
  9. mafia mazy

    mafia mazy Peon

    Messages:
    307
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Thank you all for your help. However, I'm still having issues. You see, the blocks in the image I posted on the first post are all seperate tables, they contain their own rows. And so I think I can't use any of the code you have provided. It's basically like that, but each of the columns in the code you guys provided are tables and those tables contain row.
    It's just that part I can't work out.

    Below is the code for the long box for 78% length and one of the 3 tables I need under it.

    	<td valign="top" width="78%">
    
    		<!-- BEGIN welcome_text -->
    		<table width="100%" cellpadding="2" cellspacing="1" border="0" class="forumline">
    
    		  <tr>
    			<td class="catHead" height="25"><span class="genmed"><b>{L_NAME_WELCOME}</b></span></td>
    		  </tr>
    		  <tr>
    			<td class="row1" align="left"><span class="gensmall" style="line-height:150%">{WELCOME_TEXT}<br />&nbsp;</span></td>
    		  </tr>
    		</table>
    
    		<br />
    		<!-- END welcome_text -->
    
    
    
    
    		<!-- BEGIN fetchpost_row --
    		<table width="33%" cellpadding="2" cellspacing="1" border="0" class="forumline">
    		  <tr>
    			<td class="catHead" height="25"><span class="genmed"><b> <a href="{fetchpost_row.U_VIEW_COMMENTS}">{L_ANNOUNCEMENT}: {fetchpost_row.TITLE}</a></b></span></td>
    		  </tr>
    		</table>
    		
    		<!-- END fetchpost_row -->
    
    		</td>
    Code (markup):
    Again, any help is greatly appreciated.
     
    mafia mazy, Dec 22, 2009 IP
  10. Maz991

    Maz991 Member

    Messages:
    78
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #10
    Yeah i dislike tables, seems like you got the help you need but in future i advise you to use divs so much easier and so much quicker.
     
    Maz991, Dec 23, 2009 IP