This is my HTML code:
This is what I am trying to do …
Do you have a solution ?
can you view html code ? I,m not sure about jsfidle.
Please let me know if its not visible so that i may post an attachment.
You’ll need to create another column to the left of it, and use colspan in all the other rows to bridge across it where you don’t want that extra column to show in the row.
Not getting you. I already have enough columns to hold data.why do i need extra ?
I have posted my code in jsfiddle. Could you please take a look at it and tell what changes requied?
Tables are all laid out on a strict column layout. If you want to adjust the layout and move one of the cells further left, you’ll need to adjust the columns. That’s just a simple fact when it comes to attempting to use tables for your layout.
Use the codes below and see if this is what you want:
<table border="3" cellSpacing="0" cellPadding="0">
<TBODY>
<TR>
<TD width="12%">Fund Source </TD>
<TD width="28%" colspan="2">
<SELECT id=fundSourceId class=text_box
name=fundRelease.fundSourceId>
<OPTION selected value="">All</OPTION>
<OPTION value=1>National</OPTION>
<OPTION value=2>Revolving</OPTION>
<OPTION value=34>Perf</OPTION>
<OPTION value=42>FundSource18956</OPTION>
<OPTION value=43>FundSource50839</OPTION>
<OPTION value=44>FundSource96841</OPTION>
<OPTION value=45>FundSource2871</OPTION>
<OPTION value=47>Treasury Funds</OPTION>
<OPTION value=48>livelihood Development</OPTION>
<OPTION value=49>livelihood Development english6</OPTION>
<OPTION value=50>uu8uhuhuhuhu</OPTION>
<OPTION value=51>livelihood Development english6</OPTION>
<OPTION value=52>livelihood Development english6</OPTION>
<OPTION value=53>Reg Fund1</OPTION>
<OPTION value=54>RegFund2</OPTION>
<OPTION value=55>ABC</OPTION>
<OPTION value=56>Test_2nd_April_National</OPTION>
<OPTION value=57>Test_2nd_April_Revolving</OPTION>
</SELECT>
</TD>
<TD width="5%"> </TD>
<TD width="12%">Start Date* </TD>
<TD width="43%">
<INPUT id=startDate class="text_box_medium hasDatepicker"
readOnly maxLength=50 type=text
name=fundRelease.startDate
jQuery1334307120124="148">
</TD>
</TR>
<TR>
<TD> </TD>
</TR>
<TR>
<TD width="12%">District* </TD>
<TD>
<SELECT id=selectedDistrict class=text_box
onchange=checkBoxFunc(); name=fundRelease.distId
jQuery1334307120124="151">
<OPTION value="">Select</OPTION>
<OPTION value=25>Dist1</OPTION>
<OPTION value=26>Dist2</OPTION>
<OPTION value=27>Dist3</OPTION>
</SELECT>
</TD>
<TD nowrap="nowrap">
<DIV style="DISPLAY: block" id=div_CheckBox>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%">
<TBODY>
<TR>
<TD nowrap="nowrap">Divisional Secretariat </TD>
<TD>
<INPUT id=checkbox1 align=left
type=checkbox name=checkbox1
jQuery1334307120124="150">
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</TD>
<TD width="5%"> </TD>
<TD width="12%">End Date* </TD>
<TD width="43%">
<INPUT id=endDate class="text_box_medium hasDatepicker"
readOnly maxLength=50 type=text
name=fundRelease.endDate jQuery1334307120124="149">
</TD>
</TR>
<TR>
<TD> </TD></TR>
<TR>
<TD width="12%">
<DIV style="WIDTH: 100%; DISPLAY: none"
class=div_division
jQuery1334307120124="154">Division* </DIV>
</TD>
<TD width="28%">
<DIV style="WIDTH: 100%; DISPLAY: none"
class=div_division jQuery1334307120124="155">
<SELECT id=selectedDivision class=text_box
name=fundRelease.divId>
<OPTION selected value=-1>--- Select ---</OPTION>
<OPTION selected value=div1>DIV1</OPTION>
<OPTION selected value=div2>DIV2</OPTION>
<OPTION selected value=div3>DIV3</OPTION>
</SELECT>
</DIV>
</TD>
</TR>
<TR>
<TD colSpan=6>
<INPUT id=submit_1682155201 class=submit_btn_base
title=Search value=Search type=submit
jQuery1334307120124="152">
</TD>
</TR>
<TR>
<TD> </TD></TR>
<TR>
<TD vAlign=top colSpan=6>
<DIV id=searchFundRelease
jQuery1334307120124="153"> </DIV>
</TD>
</TR>
</TBODY>
</table>
Thanks. I have seen the HTML GUI output. That looks OK to me.
I’m still finding it hard to find what changes you made in my code.
How do I format my code ( http://jsfiddle.net/terminator/jGqG5/ ) similar to your format ? That will help me to compare code line by line and view the differences.
So, I’m trying to format my messy code exactly into your format . I tried HTML Tidy but It does NOT format similar to yours. Do you have any suggestion here ?
Thanks
I simply did what paul_wilkins suggested above by adding a column for Divisional Secretariat and set the Fund Source column to span two cells.
The code is formatted by my editor. I’m using Epsilon. I have been using it since version 3. It is very expensive ($250). I think I paid $125 but they never charged me for updates over the years. There are many free HTML editors. I sure they could format the code just as well.
You are using tables on non-tabular data with incomplete/non-semantic forms. That entire codebase should be thrown out and replaced with elements like label, fieldset, legend, etc… Maybe (not sure it’s necessary) some floats and div… though proper placement of line breaks and use of inline-block on your labels could do the job quite well…
Basically you have invalid non-semantic HTML and are trying to build the form using decade or more out of date techniques. (as evidenced by the HTML 3.2 style markup) Heading to bed, but I’ll try to revisit this when I get up to show you what I mean.
Of course all that jquery garbage isn’t exactly inspiring confidence either. Running around making up fictional attributes is NOT good coding.
I have downloaded this tool. where is the format menu ? How do I format code in this tool ?
I have installed HTML Tidy and integrated with Editplus. This formats code ok.
I followed this instruction
http://editplus.info/wiki/User_Tools#HTML_Tidy
but I dont see a good indention 
If you were referring to Epsilon, it is not a tool, it is an editor. If you use it, it will indent and format the line as you enter each line.
Try this online tool; maybe it gives you on what you’re looking for: