Why this layout is breaking?

HTML & CSS
1

Why this layout is breaking ?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
  <table style="width: 60%">
					<tbody><tr>
						<td align="center"><div id="SubTypeDataDiv">


<table style="width: 100%" class="FormBorder">
	<tbody><tr class="Caption">
		<td align="center" style="width: 40%">Labour Sub-Type</td>
		<td align="center" style="width: 50%">Labour Sub-Type Description</td>
		<td align="center" style="width: 10%">Active</td>
	</tr>
	
		
			<tr>
				<input type="hidden" id="labourSubTypeList_0__labourSubTypeAutoId" value="1" name="labourSubTypeList[0].labourSubTypeAutoId">
				<input type="hidden" id="labourSubTypeList_0__labourTypeAutoId" value="1" name="labourSubTypeList[0].labourTypeAutoId">
				<td align="center"></td></tr><tr>
    <td class="tdLabel"></td>
    <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_0__labourSubType" value="Bhutanese National Labour-13-feb-2013" name="labourSubTypeList[0].labourSubType"></td>
</tr>

				<tr><td align="center"></td></tr><tr>
    <td class="tdLabel"></td>
    <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_0__labourSubTypeDesc" value="Bhutanese National Labour1" name="labourSubTypeList[0].labourSubTypeDesc"></td>
</tr>

				<tr><td align="center" style="width: 10%">N
					</td></tr><tr>
	<td valign="top" align="right">
    </td>
    <td valign="top" align="left">

<input type="checkbox" id="labourSubTypeList_0__labourTypeStatus" value="true" name="labourSubTypeList[0].labourTypeStatus">
<input type="hidden" value="true" name="__checkbox_labourSubTypeList[0].labourTypeStatus" id="__checkbox_labourSubTypeList_0__labourTypeStatus">  </td>
</tr>


				
			
		
			<tr>
				<input type="hidden" id="labourSubTypeList_1__labourSubTypeAutoId" value="2" name="labourSubTypeList[1].labourSubTypeAutoId">
				<input type="hidden" id="labourSubTypeList_1__labourTypeAutoId" value="1" name="labourSubTypeList[1].labourTypeAutoId">
				<td align="center"></td></tr><tr>
    <td class="tdLabel"></td>
    <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_1__labourSubType" value="Statutory-On-Cost Allowances" name="labourSubTypeList[1].labourSubType"></td>
</tr>

				<tr><td align="center"></td></tr><tr>
    <td class="tdLabel"></td>
    <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_1__labourSubTypeDesc" value="Statutory-On-Cost Allowances" name="labourSubTypeList[1].labourSubTypeDesc"></td>
</tr>

				<tr><td align="center" style="width: 10%">N
					</td></tr><tr>
	<td valign="top" align="right">
    </td>
    <td valign="top" align="left">

<input type="checkbox" id="labourSubTypeList_1__labourTypeStatus" value="true" name="labourSubTypeList[1].labourTypeStatus">
<input type="hidden" value="true" name="__checkbox_labourSubTypeList[1].labourTypeStatus" id="__checkbox_labourSubTypeList_1__labourTypeStatus">  </td>
</tr>


				
			
		
			<tr>
				<input type="hidden" id="labourSubTypeList_2__labourSubTypeAutoId" value="3" name="labourSubTypeList[2].labourSubTypeAutoId">
				<input type="hidden" id="labourSubTypeList_2__labourTypeAutoId" value="1" name="labourSubTypeList[2].labourTypeAutoId">
				<td align="center"></td></tr><tr>
    <td class="tdLabel"></td>
    <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_2__labourSubType" value="Built-up Trade Rates - Category1" name="labourSubTypeList[2].labourSubType"></td>
</tr>

				<tr><td align="center"></td></tr><tr>
    <td class="tdLabel"></td>
    <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_2__labourSubTypeDesc" value="Built-up Trade Rates - Category1" name="labourSubTypeList[2].labourSubTypeDesc"></td>
</tr>

				<tr><td align="center" style="width: 10%">N
					</td></tr><tr>
	<td valign="top" align="right">
    </td>
    <td valign="top" align="left">

<input type="checkbox" id="labourSubTypeList_2__labourTypeStatus" value="true" name="labourSubTypeList[2].labourTypeStatus">
<input type="hidden" value="true" name="__checkbox_labourSubTypeList[2].labourTypeStatus" id="__checkbox_labourSubTypeList_2__labourTypeStatus">  </td>
</tr>


				
			
		
			<tr>
				<input type="hidden" id="labourSubTypeList_3__labourSubTypeAutoId" value="4" name="labourSubTypeList[3].labourSubTypeAutoId">
				<input type="hidden" id="labourSubTypeList_3__labourTypeAutoId" value="1" name="labourSubTypeList[3].labourTypeAutoId">
				<td align="center"></td></tr><tr>
    <td class="tdLabel"></td>
    <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_3__labourSubType" value="Built-up Trade Rates - Category2" name="labourSubTypeList[3].labourSubType"></td>
</tr>

				<tr><td align="center"></td></tr><tr>
    <td class="tdLabel"></td>
    <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_3__labourSubTypeDesc" value="Built-up Trade Rates - Category2" name="labourSubTypeList[3].labourSubTypeDesc"></td>
</tr>

				<tr><td align="center" style="width: 10%">N
					</td></tr><tr>
	<td valign="top" align="right">
    </td>
    <td valign="top" align="left">

<input type="checkbox" id="labourSubTypeList_3__labourTypeStatus" value="true" name="labourSubTypeList[3].labourTypeStatus">
<input type="hidden" value="true" name="__checkbox_labourSubTypeList[3].labourTypeStatus" id="__checkbox_labourSubTypeList_3__labourTypeStatus">  </td>
</tr>


				
			
		
			<tr>
				<input type="hidden" id="labourSubTypeList_4__labourSubTypeAutoId" value="5" name="labourSubTypeList[4].labourSubTypeAutoId">
				<input type="hidden" id="labourSubTypeList_4__labourTypeAutoId" value="1" name="labourSubTypeList[4].labourTypeAutoId">
				<td align="center"></td></tr><tr>
    <td class="tdLabel"></td>
    <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_4__labourSubType" value="Built-up Trade Rates - Category3" name="labourSubTypeList[4].labourSubType"></td>
</tr>

				<tr><td align="center"></td></tr><tr>
    <td class="tdLabel"></td>
    <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_4__labourSubTypeDesc" value="Built-up Trade Rates - Category3" name="labourSubTypeList[4].labourSubTypeDesc"></td>
</tr>

				<tr><td align="center" style="width: 10%">N
					</td></tr><tr>
	<td valign="top" align="right">
    </td>
    <td valign="top" align="left">

<input type="checkbox" id="labourSubTypeList_4__labourTypeStatus" value="true" name="labourSubTypeList[4].labourTypeStatus">
<input type="hidden" value="true" name="__checkbox_labourSubTypeList[4].labourTypeStatus" id="__checkbox_labourSubTypeList_4__labourTypeStatus">  </td>
</tr>


				
			
		
			<tr>
				<input type="hidden" id="labourSubTypeList_5__labourSubTypeAutoId" value="6" name="labourSubTypeList[5].labourSubTypeAutoId">
				<input type="hidden" id="labourSubTypeList_5__labourTypeAutoId" value="1" name="labourSubTypeList[5].labourTypeAutoId">
				<td align="center"></td></tr><tr>
    <td class="tdLabel"></td>
    <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_5__labourSubType" value="Built-up Trade Rates - Category4" name="labourSubTypeList[5].labourSubType"></td>
</tr>

				<tr><td align="center"></td></tr><tr>
    <td class="tdLabel"></td>
    <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_5__labourSubTypeDesc" value="Built-up Trade Rates - Category4" name="labourSubTypeList[5].labourSubTypeDesc"></td>
</tr>

				<tr><td align="center" style="width: 10%">N
					</td></tr><tr>
	<td valign="top" align="right">
    </td>
    <td valign="top" align="left">

<input type="checkbox" id="labourSubTypeList_5__labourTypeStatus" value="true" name="labourSubTypeList[5].labourTypeStatus">
<input type="hidden" value="true" name="__checkbox_labourSubTypeList[5].labourTypeStatus" id="__checkbox_labourSubTypeList_5__labourTypeStatus">  </td>
</tr>


				
			
		
			<tr>
				<input type="hidden" id="labourSubTypeList_6__labourSubTypeAutoId" value="7" name="labourSubTypeList[6].labourSubTypeAutoId">
				<input type="hidden" id="labourSubTypeList_6__labourTypeAutoId" value="1" name="labourSubTypeList[6].labourTypeAutoId">
				<td align="center"></td></tr><tr>
    <td class="tdLabel"></td>
    <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_6__labourSubType" value="Built-up Trade Rates - Category5" name="labourSubTypeList[6].labourSubType"></td>
</tr>

				<tr><td align="center"></td></tr><tr>
    <td class="tdLabel"></td>
    <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_6__labourSubTypeDesc" value="Built-up Trade Rates - Category5" name="labourSubTypeList[6].labourSubTypeDesc"></td>
</tr>

				<tr><td align="center" style="width: 10%">N
					</td></tr><tr>
	<td valign="top" align="right">
    </td>
    <td valign="top" align="left">

<input type="checkbox" id="labourSubTypeList_6__labourTypeStatus" value="true" name="labourSubTypeList[6].labourTypeStatus">
<input type="hidden" value="true" name="__checkbox_labourSubTypeList[6].labourTypeStatus" id="__checkbox_labourSubTypeList_6__labourTypeStatus">  </td>
</tr>


				
			
		
			<tr>
				<input type="hidden" id="labourSubTypeList_7__labourSubTypeAutoId" value="8" name="labourSubTypeList[7].labourSubTypeAutoId">
				<input type="hidden" id="labourSubTypeList_7__labourTypeAutoId" value="1" name="labourSubTypeList[7].labourTypeAutoId">
				<td align="center"></td></tr><tr>
    <td class="tdLabel"></td>
    <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_7__labourSubType" value="Labour (Market Rate)" name="labourSubTypeList[7].labourSubType"></td>
</tr>

				<tr><td align="center"></td></tr><tr>
    <td class="tdLabel"></td>
    <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_7__labourSubTypeDesc" value="Labour (Market Rate)" name="labourSubTypeList[7].labourSubTypeDesc"></td>
</tr>

				<tr><td align="center" style="width: 10%">N
					</td></tr><tr>
	<td valign="top" align="right">
    </td>
    <td valign="top" align="left">

<input type="checkbox" id="labourSubTypeList_7__labourTypeStatus" value="true" name="labourSubTypeList[7].labourTypeStatus">
<input type="hidden" value="true" name="__checkbox_labourSubTypeList[7].labourTypeStatus" id="__checkbox_labourSubTypeList_7__labourTypeStatus">  </td>
</tr>


				
			
		
	
	

</tbody></table>
</div></td>
					</tr>
				</tbody></table>
 </BODY>
</HTML>

Can you please tell how do I correct it ? what is the solution ?

2

Explain broken. It does not look in a browser the way you expect? Or something else?

It certainly is very ugly code. Where did it come from? Can you replace it with new code?

You are in Quirks mode with that kind of !DOCTYPE at the top. However, with tables I thought the differences between standards and quirks were small and did not matter, but it’s possible your doctype is making browsers show this table differently than you expect.

As a test, you can try replacing it with <!doctype html> and just see if the page looks any different.

3

it does not work.

>>>Explain Broken

N values should come under Active column.

text fields are to be under Labour Sub-Type and Labour Sub-Type Description column.

What I am missing in my HTML code.

4

What I am missing in my HTML code.

You are missing HTML. This isn’t HTML, this is tag soup.

N values should come under Active column.

The row with N does not have the correct number of td’s.

Your first row shows three table data cells (td). This means your table consists of rows with three cells each.


<tr class="Caption">
  [b]1[/b]<td align="center" style="width: 40%">Labour Sub-Type</td>
  [b]2[/b]<td align="center" style="width: 50%">Labour Sub-Type Description</td>
  [b]3[/b]<td align="center" style="width: 10%">Active</td>
</tr>

However your row with “N” consists of only one cell.


<tr>
  [b]1[/b]<td align="center" style="width: 10%">N</td>
</tr>

If you want to use a table, you must use it correctly. If you use table tags but do not follow the rules of tables, it will not work.

You will see this yourself if you make the table neat.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
  <table style="width: 60%">
    <tbody>
      <tr>
        <td align="center">
          <div id="SubTypeDataDiv">
            <table style="width: 100%" class="FormBorder">
              <tbody>
                <tr class="Caption">
		  [b]<td align="center" style="width: 40%">Labour Sub-Type</td>
		  <td align="center" style="width: 50%">Labour Sub-Type Description</td>
		  <td align="center" style="width: 10%">Active</td>[/b]
	        </tr>

	        <tr>
[b]you are missing <td>s here[/b]
		  <input type="hidden" id="labourSubTypeList_0__labourSubTypeAutoId" value="1" name="labourSubTypeList[0].labourSubTypeAutoId">
		  <input type="hidden" id="labourSubTypeList_0__labourTypeAutoId" value="1" name="labourSubTypeList[0].labourTypeAutoId">
		  <td align="center"></td>
                </tr>

                <tr>
[b]this row only has 2 td's. Where is your last one?[/b]
                  <td class="tdLabel"></td>
                  <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_0__labourSubType" value="Bhutanese National Labour-13-feb-2013" name="labourSubTypeList[0].labourSubType"></td>
                </tr>

                <tr>
[b]this row only has one td in it. Where are the other two?[/b]
                  <td align="center"></td>
                </tr>

                <tr>
[b]this row only has 2 td's. Where is your last one?[/b]
                  <td class="tdLabel"></td>
                  <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_0__labourSubTypeDesc" value="Bhutanese National Labour1" name="labourSubTypeList[0].labourSubTypeDesc"></td>
                </tr>

                <tr>
[b]this row only has 1 td. Where are the other two?[/b]
                  <td align="center" style="width: 10%">N</td>
                </tr>

                <tr>
[b]there are only 2 td's in this row. Where is the last one?[/b]
                  <td valign="top" align="right"></td>
                  <td valign="top" align="left"><input type="checkbox" id="labourSubTypeList_0__labourTypeStatus" value="true" name="labourSubTypeList[0].labourTypeStatus"><input type="hidden" value="true" name="__checkbox_labourSubTypeList[0].labourTypeStatus" id="__checkbox_labourSubTypeList_0__labourTypeStatus"></td>
                </tr>

                <tr>
[b]this row only has 1 td. Where are the other two?[/b]
                  <input type="hidden" id="labourSubTypeList_1__labourSubTypeAutoId" value="2" name="labourSubTypeList[1].labourSubTypeAutoId">
		  <input type="hidden" id="labourSubTypeList_1__labourTypeAutoId" value="1" name="labourSubTypeList[1].labourTypeAutoId">
		  <td align="center"></td>
                </tr>

                <tr>
[b]only 2 td's here[/b]
                  <td class="tdLabel"></td>
                  <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_1__labourSubType" value="Statutory-On-Cost Allowances" name="labourSubTypeList[1].labourSubType"></td>
                </tr>

                <tr>
[b]only one here[/b]
                  <td align="center"></td>
                </tr>

                <tr>
[b]care to guess what's wrong with this one?[/b]
                  <td class="tdLabel"></td>
                  <td><input type="text" class="TextBoxLarge" id="labourSubTypeList_1__labourSubTypeDesc" value="Statutory-On-Cost Allowances" name="labourSubTypeList[1].labourSubTypeDesc"></td>
                </tr>

                <tr>
                  <td align="center" style="width: 10%">N</td>
                </tr>

                <tr>
	          <td valign="top" align="right"></td>
                  <td valign="top" align="left"><input type="checkbox" id="labourSubTypeList_1__labourTypeStatus" value="true" name="labourSubTypeList[1].labourTypeStatus"><input type="hidden" value="true" name="__checkbox_labourSubTypeList[1].labourTypeStatus" id="__checkbox_labourSubTypeList_1__labourTypeStatus"></td>
                </tr>
[b]etc...[/b]
              </tbody>
            </table>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</BODY>
</HTML>

My advice: next time, instead of spewing a huge jumble of table mess and wondering why it doesn’t work, try properly indenting the code. This makes it much more readable and you will find errors much more easily. In your code posted above, it was difficult to see that the number of td’s did not match per row, but once I indented everything, it became obvious.

Now, you can have fewer td’s in a row, but then you must use the colspan attribute to set a td to take up more than the space of one normal td. For example, the rows with nothing in them:


                <tr>
                  <td [b]colspan=3[/b]></td>
                </tr>

Since you’ve set at the first, top row that a row consists of 3 td’s, this now is code with a single td who spans across three “normal” td’s.

As a final note, this code is bad and should never go online. The doctype is ancient, the table is nested in another table (why?), this is not tabular data, and this is not how forms should be constructed. Since there are inputs in here, this is a form. It should have form tags.

5

how did you indented everything ? which tool you are using ?

6

Here in the forums, I did it by hand.

But, I think (not sure) that there are text editors who can indent for you-- however I believe you would have to set that up yourself.

I know Paul O’B uses dreamweaver as his editor specifically so that if he copies someone’s code from here on the forums, it gets the indentation he personally likes.

Maybe someone else here knows of a program who automatically indents HTML correctly?

7

how to indent in Dreamweaver ? I have access to DreamWeaver . Is there any shortcut or menu to indent HTML properly ?

8

In DW you can mark a block of code and press either tab to indent it, or shift and tab to remove one layer of indentation.
It’s not perfect, but you can achieve the same effect as poes did relatively quickly.

9

good … but I’m worried as a page could consists many such blocks …and this approach will kill time.

Is there any other tool which is capable of indenting whole page with one click of a button ?

Thanks for the post anyway.

10

Try js-beautify.

It’s a JS beautifier but works for HTML too.