...

View Full Version : 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
<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
<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



<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!



<!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
Check now



<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
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum