<td> width problem?

liunx · Jan 10, 2008

Hi, 
I know this is very kiddy question. But kindly answer this. 
 
Actually, in the below code, I want to make 3 fields i.e. of First Name, Middle Name and Last Name in one row having equal gap. I have shown this gap with blue, green and red colors. I dont know how to minize the blue area. I cannot underatand the width attribute of <td>. Or is there any way to control via CSS? 
Kindly explain. 
 
Bye, 
Viki. 
 
 
<html> 
<head> 
<style type="text/css"> 
 
--> 
 
#fatherTable{ 
background-color: #e4d2b8; 
position: absolute; 
left: 10px; 
top: 284px; 
width: 980px; 
} 
--> 
</style> 
 
</head> 
 
<body> 
<form> 
 
 
<div id="fatherTable"> 
<table border="0" cellpadding="0"> 
<td width=122 > 
<th width="351">                  
      Father's Information 
</th> 
</td> 
 
<tr> 
 
</tr> 
 
<tr> 
 
<td width="100" bgcolor="FFCC00" >Fisrt Name 
</td> 
<td width="100" bgcolor="blue" ><input type="text" name="Student_Family_Name" size="20"> 
 
</td> 
 
<td width="118" bgcolor="FFCC00" > 
Middle Name 
</td> 
<td width="149" bgcolor="green"><input type="text" name="Grandfathers_Name" size="20"> 
</td> 
 
<td width="118" bgcolor="FFCC00" > 
Last Name 
</td> 
<td width="149" bgcolor="red"><input type="text" name="Grandfathers_Name" size="20"> 
</td> 
 
 
 
</tr> 
 
</table> 
 
 
 
</form> 
</html>Give me a little while and Ill have your code rewritten.<html> 
<head> 
<style type="text/css"> 
#fatherTable{ 
background-color: #e4d2b8; 
position: absolute; 
left: 10px; 
top: 284px; 
} 
#datatbl { 
border:0px; 
padding:0px; 
} 
.capcell { 
background-color:ffcc00; 
font:arial; 
} 
</style> 
</head> 
<body> 
<form> 
<div id="fatherTable"> 
<table id="datatbl"> 
<th style="font:Arial; text-align:center;" colspan="6"> 
<h2>Father's Information</h2> 
</th> 
<tr> 
<td class="capcell" style="width:100px;"> 
<h4>First Name</h4> 
</td> 
<td style="background-color:blue;" > 
<input type="text" name="Student_Family_Name" size="20"> 
</td> 
<td class="capcell" style="width:118px;"> 
<h4>Middle Name</h4> 
</td> 
<td style="background-color:green;"> 
<input type="text" name="Grandfathers_Name" size="20"> 
</td> 
<td class="capcell" style="width:118px;"> 
<h4>Last Name</h4> 
</td> 
<td style="background-color:red;"> 
<input type="text" name="Grandfathers_Name" size="20"> 
</td> 
</tr> 
</table> 
</form> 
</html> 
 
 
It would be better if you put the text box and caption in the same cell. As a matter of fact, this whole table is pointless and not neccessary. You can just put this all into 2 divs and have it work just fine. Why have the cells around the text boxes? You can style an input just like any other element. I dropped all the font tags in this, and I dropped the widths on the cells with the input. It is the tables nature to stretch, so put the width on the text box. Also, the reason you had that blue space is because you were not applying colspan to the <th>, if you want it to span accross 6 cells, you have to say colspan="6". 
 
<a class="postlink" href="http://quasi-ke.servebeer.com/fathertable.html">http://quasi-ke.servebeer.com/fathertable.html</a> is this stuff above in action.Hi, 
Thanks man. Specially for the brief explanation. I am trying my best to use CSS where ever possible; specially for the elements which are common through out the table and forms. 
 
 
Bye, 
Viki.

<td> width problem?

liunx

Guest