PDA

Click to See Complete Forum and Search --> : <td> width problem?

Viki
07-21-2004, 02:39 AM
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"> <b><font face="Arial" size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Father's Information</font></b>
</th>
</td>

<tr>

</tr>

<tr>

<td width="100" bgcolor="FFCC00" ><font face="Arial" size="3">Fisrt Name</font>
</td>
<td width="100" bgcolor="blue" ><font face="Arial" size="2"><input type="text" name="Student_Family_Name" size="20">
</font>
</td>

<td width="118" bgcolor="FFCC00" ><font face="Arial" size="3">
Middle Name </font>
</td>
<td width="149" bgcolor="green"><font face="Arial" size="2"><input type="text" name="Grandfathers_Name" size="20"></font>
</td>

<td width="118" bgcolor="FFCC00" ><font face="Arial" size="3">
Last Name </font>
</td>
<td width="149" bgcolor="red"><font face="Arial" size="2"><input type="text" name="Grandfathers_Name" size="20"></font>
</td>



</tr>

</table>



</form>
</html>
PeOfEo
07-21-2004, 02:43 AM
Give me a little while and Ill have your code rewritten.
PeOfEo
07-21-2004, 03:03 AM
<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".

http://quasi-ke.servebeer.com/fathertable.html is this stuff above in action.
Viki
07-21-2004, 03:42 AM
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.