Jump to content

Making tables even


Mod-Jay

Recommended Posts

<form id="createForm" action="register.php" method="POST">

<h1> Registering On Our Site! </h1><br>
<table border="2" cellpadding="2" cellspacing="2" width="100%" valign="top" style="float:center;border:5px solid #8b1d25">
<tr>
<td><center><p>Create An Account To Show Your PHP Work! <a href="sfeat.php">Click Here to View the Features!</a></p></center></td>
</tr>
<table border="2" cellpadding="2" cellspacing="2" width="60%" valign="top" style="float:left;border:5px solid #8b1d25">
<tr>
<td><center><p>Your Username</p></center></td>
<td><center><input id="username" name="username" border="2px" autocomplete="off" maxlength="12"></center></td>
</tr>
<tr>
<td><center><p>Your Password</p></center></td>
<td><center><input id="password1" name="password1" type="password" autocomplete="off" maxlength="20"></center></td>
</tr>
<tr>
<td><center><p>Re-enter Password</p></center></td>
<td><center><input id="password2" name="password2" type="password" autocomplete="off" maxlength="20"></center></td>
</tr>
<tr>
<td><center><p>Date Of Birth</p></center></td>
<td><center>
<select name="DateOfBirth_Month">
    <option> - Month - </option>
    <option value="January">January</option>
    <option value="Febuary">Febuary</option>
    <option value="March">March</option>
    <option value="April">April</option>
    <option value="May">May</option>
    <option value="June">June</option>
    <option value="July">July</option>
    <option value="August">August</option>
    <option value="September">September</option>
    <option value="October">October</option>
    <option value="November">November</option>
    <option value="December">December</option>
</select>

<select name="DateOfBirth_Day">
    <option> - Day - </option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
</select>

<select name="DateOfBirth_Year">
    <option> - Year - </option>
    <option value="2010">20010</option>
    <option value="2009">2009</option>
    <option value="2008">2008</option>
    <option value="2007">2007</option>
    <option value="2006">2006</option>
    <option value="2005">2005</option>
    <option value="2004">2004</option>
    <option value="2003">2003</option>
    <option value="2002">2002</option>
    <option value="2001">2001</option>
    <option value="2000">2000</option>
    <option value="1999">1999</option>
    <option value="1998">1998</option>
    <option value="1997">1997</option>
    <option value="1996">1996</option>
    <option value="1995">1995</option>
    <option value="1994">1994</option>
    <option value="1993">1993</option>
    <option value="1992">1992</option>
    <option value="1991">1991</option>
    <option value="1990">1990</option>
    <option value="1989">1989</option>
    <option value="1988">1988</option>
    <option value="1987">1987</option>
    <option value="1986">1986</option>
    <option value="1985">1985</option>
    <option value="1984">1984</option>
    <option value="1983">1983</option>
    <option value="1982">1982</option>
    <option value="1981">1981</option>
    <option value="1980">1980</option>
    <option value="1979">1979</option>
    <option value="1978">1978</option>
    <option value="1977">1977</option>
    <option value="1976">1976</option>
    <option value="1975">1975</option>
    <option value="1974">1974</option>
    <option value="1973">1973</option>
    <option value="1972">1972</option>
    <option value="1971">1971</option>
    <option value="1970">1970</option>
    <option value="1969">1969</option>
    <option value="1968">1968</option>
    <option value="1967">1967</option>
    <option value="1966">1966</option>
    <option value="1965">1965</option>
    <option value="1964">1964</option>
    <option value="1963">1963</option>
    <option value="1962">1962</option>
    <option value="1961">1961</option>
    <option value="1960">1960</option>
    <option value="1959">1959</option>
    <option value="1958">1958</option>
    <option value="1957">1957</option>
    <option value="1956">1956</option>
    <option value="1955">1955</option>
    <option value="1954">1954</option>
    <option value="1953">1953</option>
    <option value="1952">1952</option>
    <option value="1951">1951</option>
    <option value="1950">1950</option>
    <option value="1949">1949</option>
    <option value="1948">1948</option>
    <option value="1947">1947</option>
    <option value="1946">1946</option>
    <option value="1945">1945</option>
    <option value="1944">1944</option>
    <option value="1943">1943</option>
    <option value="1942">1942</option>
    <option value="1941">1941</option>
    <option value="1940">1940</option>
    <option value="1939">1939</option>
    <option value="1938">1938</option>
    <option value="1937">1937</option>
    <option value="1936">1936</option>
    <option value="1935">1935</option>
    <option value="1934">1934</option>
    <option value="1933">1933</option>
    <option value="1932">1932</option>
    <option value="1931">1931</option>
    <option value="1930">1930</option>
    <option value="1929">1929</option>
    <option value="1928">1928</option>
    <option value="1927">1927</option>
    <option value="1926">1926</option>
    <option value="1925">1925</option>
    <option value="1924">1924</option>
    <option value="1923">1923</option>
    <option value="1922">1922</option>
    <option value="1921">1921</option>
    <option value="1920">1920</option>
    <option value="1919">1919</option>
    <option value="1918">1918</option>
    <option value="1917">1917</option>
    <option value="1916">1916</option>
    <option value="1915">1915</option>
    <option value="1914">1914</option>
    <option value="1913">1913</option>
    <option value="1912">1912</option>
    <option value="1911">1911</option>
    <option value="1910">1910</option>
    <option value="1909">1909</option>
    <option value="1908">1908</option>
    <option value="1907">1907</option>
    <option value="1906">1906</option>
    <option value="1905">1905</option>
    <option value="1904">1904</option>
    <option value="1903">1903</option>
    <option value="1902">1902</option>
    <option value="1901">1901</option>
    <option value="1900">1900</option>
</select>
</center></td>
</tr>

</table>
<table border="2" cellspacing="5" width="40%" height="20%" valign="top" style="float:right;border:5px solid #8b1d25">
<tr height="30%">
<td><center><p>Your Email</p></center></td>
<td><center><input id="email" name="email" type="email" autocomplete="off" maxlength="60"></center></td>
</tr>
<tr height="30%">
<td><center><p>Hide Email</p></center></td>
<td><center><input id="cb" name="cb" type="checkbox" maxlength="20">Hide Email</center></td>
</tr>
<tr height="30%">
<td><center><p>Sex:</p></center></td>
<td><center><input id="password2" name="password2" type="password" autocomplete="off" maxlength="20"></center></td>
</tr>
<tr>
<td><center><p>Location:</p></center></td>
<td><center><input id="email" name="email" type="email" autocomplete="off" maxlength="60"></center></td>
</tr>
</table>
<table id="table123" border="2" cellpadding="2" cellspacing="2" width="55%" valign="top" style="float:left;bottom-border:8px solid #8b1d25;border:5px solid #8b1d25">
<tr><td>
<span class="smalltext"><?php echo recaptcha_get_html($publickey, $error); ?><br>Please enter the text contained within the image on the right in to the text box below it. This process is used to prevent automated signups.</span>
</td></tr></table>
<table border="2" cellpadding="2" cellspacing="2" width="45%" valign="top" style="float:right;border:5px solid #8b1d25">
<tr><td><center>Have a Site? Enter It here!</center><td/></tr>
<tr><td><center><input type="text"name="hp" value="http://"/></center></td></tr>
<tr><td><center>Have a Aim Or Msn?</center></td></tr>
<tr><td><input type="text" name="aim" value="Enter Aim Here"/>  <input type="text"name="msn" value="Enter Msn Here"/></td></tr>
<tr><td>Referrer: (where you told about this site?)</td></tr>
<tr><td><input style="text" name="referrer" /></td></tr>
<tr><td>Dont know yet</td></tr>
<tr><td>Dont know yet</td></tr>
</table>
<table border="2" cellpadding="2" cellspacing="2" width="100%" valign="top" style="float:center;border:5px solid #8b1d25">
<tr><td><h2><center>Mod-Justin | TOS(Team of Service)</center></h2>
<textarea rows=9 cols=87 readonly></textarea>
<center><input type="checkbox" name="cb2" value="0">Agree
<input type="checkbox" name="cb3" value="1"/>Disagree</center>
</td></tr>
<tr>
<td><p>
<input type="checkbox" name="cb6" value="1"/>Get Emails Of Updates And New Comments/Uploads.<br></p></td>
</tr>
<tr>
<td><p>
<input type="checkbox" name="cb5" value="1">You are Atleast 15 or Older.<br>
</p></td>
</tr>
<tr>
<td><p>
<input type="checkbox" name="cb4" value="1"/>Allow Administrators to Email You.<br>
</p></td>
</tr>
<tr>
<td><p><center>
<input type="submit" value="Continue">
</center></p></td>
</tr>
</table>

 

The Table Codes, The Gaps on the Image Click Me i dont want them there..

 

--- EDIT ---

Sorry about how the code is, so long

Link to comment
Share on other sites

I do this by placing an ID in each table, assigning each to a variable with getElementById, then calling a javascript function on each cell of the first row of each table.

 

var adj=0;
var inc=0;
function match(ea,eb) {
var fix,comp;
inc++;
if (ea.clientWidth<eb.clientWidth) {
  comp=eb.clientWidth-adj;
  ea.innerHTML="<div id='m"+inc+"' style='width:" + comp + "px;'>" + ea.innerHTML + "</div>";
  fix=ea.clientWidth-eb.clientWidth;
}
else {
  comp=ea.clientWidth-adj;
  eb.innerHTML="<div id='m"+inc+"' style='width:" + comp + "px;'>" + eb.innerHTML + "</div>";
  fix=eb.clientWidth-ea.clientWidth;
}
if (fix!=0) {
  adj+=fix;
  comp-=fix;
  var ob=document.getElementById('m'+inc);
  ob.style.width=comp+'px';
}
}

hh=document.getElementById('head');
nn=document.getElementById('names');
dd=document.getElementById('detail');
hta=document.getElementById('htab');
dta=document.getElementById('dtab');
nta=document.getElementById('ntab');
mna=document.getElementById('mna');
for (var j=dta.rows[0].cells.length-1;j>=0;j--) match(hta.rows[0].cells[j],dta.rows[0].cells[j]);

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.