Simple allignment gone wrong

lucy · September 24, 2009

For the sake of me, i cant get the text fields to align up. The bottom table's text fields, aremuch further to the right than the first table's text fields and i cant work out why.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


</head>
<body>

<form action='cation.php' name='main_form' id='main_form' method='post'>
  <table width='750' border='0' cellspacing='0' cellpadding='0'>
  <tr><p class='ijfg'><strong>foprk eofjk</strong></p></tr>
  <tr> </tr>
    <tr><p>text here</p><br /></tr>
		<tr>
          <td>df </td>
          <td><select name='df'>
            <option selected='selected' value='-1'></option>
            <option value='1'>1</option>
            <option value='2'>2</option>
            <option value='3'>3</option>
          </select></td>
        </tr>
        <tr>
          <td>df </td>
          <td><input name='df' type='text' size='30' maxlength='30'/></td>
        </tr>
        <tr>
          <td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
        <tr>
          <td>df </td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
        <tr>
          <td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30'  /></td>
        </tr>
        <tr>
          <td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
        <tr>
          <td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30'  /></td>
        </tr>
	<tr>
          <td>df</td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
	<tr>
          <td>df</td>
          <td><select name='okefoed'>
			<option selected='selected' value='-1'></option>
			<option value='1'>Yes</option>
			<option value='2'>No</option>				
		  </select></td>
        </tr>
	<tr>
          <td>df </td>
          <td><textarea name='dfd' cols='25' rows='8'></textarea></td>
        </tr>
	</table>
        kjnk
        
        <table width='750' border='0' cellspacing='0' cellpadding='0'>
	<tr> </tr>
  <tr><p class='class_NAME'><strong>Ydfkcod</strong></p></tr>
  <tr> </tr>
          <td>df </td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
	<tr>
          <td>df </td>
          <td><input name='df' type='text' size='30' maxlength='30'  /></td>
        </tr>
	<tr>
          <td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30'  /></td>
        </tr>
	<tr>
          <td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30'  /></td>
        </tr>
	<tr>
          <td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
		<td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
        <tr>
          <td>dsfdf df: </td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
      </table>
  
</form>



</body>
</html>

Thanks,

Lucy

haku · September 25, 2009

As long as you use tables for layout you will have problems like this.

mayfair · September 25, 2009

I guess you could always make both tables part of the same table:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


</head>
<body>

<form action='cation.php' name='main_form' id='main_form' method='post'>
  <table width='750' border='1' cellspacing='0' cellpadding='0'>
  <tr><p class='ijfg'><strong>foprk eofjk</strong></p></tr>
  <tr> </tr>
    <tr><p>text here</p><br /></tr>
         <tr>
          <td>df </td>
          <td><select name='df'>
            <option selected='selected' value='-1'></option>
            <option value='1'>1</option>
            <option value='2'>2</option>
            <option value='3'>3</option>
          </select></td>
        </tr>
        <tr>
          <td>df </td>
          <td><input name='df' type='text' size='30' maxlength='30'/></td>
        </tr>
        <tr>
          <td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
        <tr>
          <td>df </td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
        <tr>
          <td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30'  /></td>
        </tr>
        <tr>
          <td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
        <tr>
          <td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30'  /></td>
        </tr>
      <tr>
          <td>df</td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
      <tr>
          <td>df</td>
          <td><select name='okefoed'>
            <option selected='selected' value='-1'></option>
            <option value='1'>Yes</option>
            <option value='2'>No</option>            
           </select></td>
        </tr>
      <tr>
          <td>df </td>
          <td><textarea name='dfd' cols='25' rows='8'></textarea></td>
        </tr>
    <tr>
	<td colspan="2"> kjnk</td>
</tr>
       
        
      <tr> </tr>
  <tr><td colspan="2"><p class='class_NAME'><strong>Ydfkcod</strong></p></td></tr>
  <tr> </tr>
          <td>df </td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
      <tr>
          <td>df </td>
          <td><input name='df' type='text' size='30' maxlength='30'  /></td>
        </tr>
      <tr>
          <td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30'  /></td>
        </tr>
      <tr>
          <td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30'  /></td>
        </tr>
      <tr>
          <td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
         <td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
        <tr>
          <td>dsfdf df: </td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
      </table>

</form>



</body>
</html>

lucy · September 27, 2009

I dont know if i can use one table, as it is broken down into 4 parts (hence 4 tables) and each one has a formatted paragraph at the top of it, like a title.

When i tried doing it all in one table, the formatting got even more messed up.

How can i do this in CSS?

I use a class called .title to format the titles at the top of each table and its contents are below:

.title {
				background-color:#99cc33;
				border:1px solid black;
				width:100%;
				height:auto;
				padding:2px 0 2px 20px;
			}

How could i fix this problem, either with CSS or with plain HTML tables?

Thanks,

Lucy

lucy · September 27, 2009

Like, it sticks all of the titles at the top of the page and then continues with the table.

Here is the code which does that, including the .title class from my previous post.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="layout.css" />

</head>
<body>

<form action='cation.php' name='main_form' id='main_form' method='post'>
  <table width='750' border='1' cellspacing='0' cellpadding='0'>
  <tr><p class='ijfg'><strong>foprk eofjk</strong></p></tr>
  <tr> </tr>
    <tr><p class="title">text here</p><br /></tr>
         <tr>
          <td>df </td>
          <td><select name='df'>
            <option selected='selected' value='-1'></option>
            <option value='1'>1</option>
            <option value='2'>2</option>
            <option value='3'>3</option>
          </select></td>
        </tr>
        <tr><p class="title">text here</p></tr>
        <tr>
          <td><input name='df' type='text' size='30' maxlength='30'/></td>
        </tr>
        <tr>
          <td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
        <tr>
          <td>df </td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
        <tr>
          <td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30'  /></td>
        </tr>
        <tr>
          <td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
        <tr>
          <td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30'  /></td>
        </tr>
      <tr>
          <td>df</td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
      <tr>
          <td>df</td>
          <td><select name='okefoed'>
            <option selected='selected' value='-1'></option>
            <option value='1'>Yes</option>
            <option value='2'>No</option>           
           </select></td>
        </tr>
      <tr>
          <td>df </td>
          <td><textarea name='dfd' cols='25' rows='8'></textarea></td>
        </tr>
    <tr>
      <td colspan="2"> kjnk</td>
   </tr>
       
       
      <tr> </tr>
  <tr><td colspan="2"><p class='class_NAME'><strong>Ydfkcod</strong></p></td></tr>
  <tr> </tr>
          <td>df </td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
      <tr>
          <td>df </td>
          <td><input name='df' type='text' size='30' maxlength='30'  /></td>
        </tr>
      <tr>
          <td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30'  /></td>
        </tr>
      <tr>
          <td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30'  /></td>
        </tr>
      <tr>
          <td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
         <td>df: </td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
        <tr>
          <td>dsfdf df: </td>
          <td><input name='df' type='text' size='30' maxlength='30' /></td>
        </tr>
      </table>

</form>



</body>
</html>

Thanks,

Lucy

bothwell · September 27, 2009

The reason the bottom table has put the boxes further away to the right is because it's expanding the tables to 100% and also expanding the td widths so that they fit the data inside them.

You can fix this behaviour by setting your table column widths explicitly with:

td width="n"

Where 'n' is either a pixel width or a percentage width that you want. Note that if you use % widths then the tables will be liquid, whereas pixel widths are more predictable but inflexible. You may also wish to look at how colspan works.

Sign In

Simple allignment gone wrong

Recommended Posts

lucy

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

mayfair

Link to comment

Share on other sites

lucy

Link to comment

Share on other sites

lucy

Link to comment

Share on other sites

bothwell

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information