Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Need help creating an HTML table structure.

    Hi,
    I want to get a particular structure for an HTML table. Disregarding the row height and the background color, the table should look like the image attached(target_table.jpg).

    I have done some coding that should work correctly, but alas it is not. I need to understand what I am doing wrong here. The code is attached herewith(test_table.txt). It needs to be converted to HTML file to see the output.

    Please note that the tag structure inside each <td> tag has to be retained.

    Thanks in advance for your help.

    Regards,
    arian10daddy
    Attached Thumbnails Attached Thumbnails Need help creating an HTML table structure.-target_table.jpg  
    Attached Files Attached Files

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Code:
    <table width="800" border="1" cellpadding="2">
      <tr>
        <td width="116">&nbsp;</td>
        <td colspan="5">&nbsp;</td>
        <td width="119">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2">&nbsp;</td>
        <td width="93">&nbsp;</td>
        <td width="84">&nbsp;</td>
        <td width="109">&nbsp;</td>
        <td width="94">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td colspan="7">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="7">&nbsp;</td>
      </tr>
    </table>

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vikram1vicky View Post
    Code:
    <table width="800" border="1" cellpadding="2">
      <tr>
        <td width="116">&nbsp;</td>
        <td colspan="5">&nbsp;</td>
        <td width="119">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2">&nbsp;</td>
        <td width="93">&nbsp;</td>
        <td width="84">&nbsp;</td>
        <td width="109">&nbsp;</td>
        <td width="94">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td colspan="7">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="7">&nbsp;</td>
      </tr>
    </table>
    Thanks for the reply but if you see closely, the last cells of the first two rows should have different widths, and even though have given different widths to the cells, they come in the same line in the output. This doesn't solve my problem.

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Check now

    Code:
    <table width="800" border="1" cellpadding="2">
      <tr>
        <td width="12%">&nbsp;</td>
        <td colspan="6">&nbsp;</td>
        <td width="12%">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2" width="200">&nbsp;</td>
        <td width="85">&nbsp;</td>
        <td width="85">&nbsp;</td>
        <td width="85">&nbsp;</td>
        <td width="85">&nbsp;</td>
        <td colspan="2">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="8">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="8">&nbsp;</td>
      </tr>
    </table>
    You can adjust width according to your choice

  • #5
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    Hi! Looks like a page layout. It's a bad idea to use tables, as anyone will tell you. The best way would be to style it using .css, so I've transformed your 'table' with .css. Here it is. It's a centred "wrapper" with nested divs. You will have to adjust it according to your requirements, of course.

    Cheers!

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    
    	<head>
    		<title>Layout with .css</title>
    		
    		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    		
    <style type="text/css">
    
    #wrapper {width: 650px; height: 124px; margin-left: auto; margin-right: auto; border: 1px solid #000; 
    }
    
    #heading1 {float: left; clear: right; width: 75px; height: 30px; background-color: #c5fad7; border-bottom: 1px solid #000;
    }
    
    #heading2 {float: left; clear: right; width: 508px; height: 30px; background-color: #a8b9ea; border-bottom: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000; 
    }
    
    #heading3 {float: left; width: 65px; height: 30px; background-color: #e1a0a8; border-bottom: 1px solid #000;
    }
    
    #r1d1 {float: left; clear: right; width: 300px; height: 30px; background-color: #c6e99e; border-right: 1px solid #000;  
    }
    
    #r1d2 {float: left; clear: right; width: 60px; height: 30px; background-color: #ebdca7;
    }
    
    #r1d3 {float: left; clear: right; width: 65px; height: 30px; background-color: #e5e5e5; border-right: 1px solid #000; border-left: 1px solid #000;
    }
    
    #r1d4 {float: left; clear: right; width: 70px; height: 30px; background-color: #baccea;
    } 
    
    #r1d5 {float: left; clear: right; width: 75px; height: 30px; background-color: #d1b2dc; border-right: 1px solid #000; border-left: 1px solid #000;
    }
    
    #r1d6 {float: left; clear: right; width: 75px; height: 30px; background-color: #f9ffcf;
    }
    
    #r2d1 {float: left; width: 650px; height: 30px; background-color: #9dfced; border-top: 1px solid #000; border-bottom: 1px solid #000;
    }
    
    #r3d1 {float: left; width: 650px; height: 30px; background-color: #eed7cc; 
    }
    
    </style>
    	</head>
    	
    	<body>
    <div id="wrapper">
    
    <div id="heading1"> Heading 1</div>
    <div id="heading2"> Heading 2 </div>
    <div id="heading3"> Head 3 </div>
    <div id="r1d1"> r1d1 </div>
    <div id="r1d2"> r1d2 </div>
    <div id="r1d3"> r1d3 </div>
    <div id="r1d4"> r1d4 </div>
    <div id="r1d5"> r1d5 </div>
    <div id="r1d6"> r1d6 </div>
    <div id="r2d1"> r2d1 </div>
    <div id="r3d1"> r3d1 </div>
    
    </div>
    
    </body>
    </html>

  • #6
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vikram1vicky View Post
    Check now

    Code:
    <table width="800" border="1" cellpadding="2">
      <tr>
        <td width="12%">&nbsp;</td>
        <td colspan="6">&nbsp;</td>
        <td width="12%">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2" width="200">&nbsp;</td>
        <td width="85">&nbsp;</td>
        <td width="85">&nbsp;</td>
        <td width="85">&nbsp;</td>
        <td width="85">&nbsp;</td>
        <td colspan="2">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="8">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="8">&nbsp;</td>
      </tr>
    </table>
    You can adjust width according to your choice
    try seeing your code with and then without the first row in the table. You will see a difference. I need my table to exactly replicate the one I have provided in the attached image. Anything else is just something that I probably have already tried.

  • #7
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Avril,
    thanks for the reply.
    Actually I should've made it clear before. It is not a page layout. I have to add some data from an xml into the table, and the html is just temporary state. I need this table to be copied into a word document, to represent the data in tabular format. That part of the funtionality has already been implemented, so need not worry about that. The only main thing is that I have to use ONLY the HTML table.
    Regards,
    arian10daddy

  • #8
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by arian10daddy View Post
    try seeing your code with and then without the first row in the table. You will see a difference. I need my table to exactly replicate the one I have provided in the attached image. Anything else is just something that I probably have already tried.

    Then you need to use nested table.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •