SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML TD left allign

    This is my HTML code:

    http://jsfiddle.net/terminator/jGqG5/


    This is what I am trying to do ..

    move.png

    Do you have a solution ?

  2. #2
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by windowsxp View Post
    This is my HTML code:

    http://jsfiddle.net/terminator/jGqG5/


    This is what I am trying to do ..

    move.png

    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.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by windowsxp View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Use the codes below and see if this is what you want:
    Code:
    <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%">&nbsp;</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>&nbsp;</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%">&nbsp;</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>&nbsp;</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>&nbsp;</TD></TR>
          <TR>
    	 <TD vAlign=top colSpan=6>
    	    <DIV id=searchFundRelease
    	     jQuery1334307120124="153">&nbsp;</DIV>
    	 </TD>
          </TR>
       </TBODY>
     </table>

  7. #7
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tom8 View Post
    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.
    I have downloaded this tool. where is the format menu ? How do I format code in this tool ?

  11. #11
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  12. #12
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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:

    http://www.digitalcoding.com/tools/html-beautifier.html


Bookmarks

Posting Permissions

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