Need help creating an HTML table structure.

arian10daddy · 08-10-2011, 06:53 AM

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

vikram1vicky · 08-10-2011, 07:24 AM

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>

arian10daddy · 08-10-2011, 07:31 AM

Quote:

Originally Posted by vikram1vicky

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.

vikram1vicky · 08-10-2011, 07:57 AM

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

Avril · 08-10-2011, 08:54 AM

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>

arian10daddy · 08-10-2011, 09:29 AM

Quote:

Originally Posted by vikram1vicky

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.

arian10daddy · 08-10-2011, 09:35 AM

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

vikram1vicky · 08-10-2011, 10:03 AM

Quote:

Originally Posted by arian10daddy

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.