I want to fix my TD width, I used the width="50%" but it isn't fixing, it is changing all table width, and I don't want to use css. I want to make it like this width on line 2 and 3 for city and gender ; any idea to fix only this line without changing all width table?
<html>
<head>
<title> Table New </title>
</head>
<body>
<table align="center" border="1">
<tr>
<td> <img src="1.jpg" width="100" > </td>
<td colspan="2"> Welcome To <br> My Website </td>
</tr>
<tr>
<td> City : </td>
<td> <input type="radio" name="v1" checked> Beirut </td>
<td> <input type="radio" name="v1"> Paris </td>
</tr>
<tr>
<td> Gender : </td>
<td> <input type="radio" name="v2" checked> Male </td>
<td> <input type="radio" name="v2"> Female </td>
</tr>
<tr>
<td> Name </td>
<td> First Name : <input type="text" name="v3"> </td>
<td> Last Name : <input type="text" name="v3"> </td>
</tr>
<tr>
<td> Photos </td>
<td> <input type="file" name="v4"> <br> <input type="file" name="v4"> <br> <input type="file" name="v4"> </td>
<td> <input type="submit" name="v5" value="send" style="float:right;" > </td>
</tr>
</table>
</body>
</html>
It's not possible by only changing those two tr. Here's one possible solution, adding another pseudo column on the left:
<table align="center" border="1">
<tr>
<td> <img src="1.jpg" width="100" > </td>
<td colspan="3"> Welcome To <br> My Website </td>
</tr>
<tr>
<td> City : </td>
<td width="100px"> <input type="radio" name="v1" checked> Beirut </td>
<td colspan="2"> <input type="radio" name="v1"> Paris </td>
</tr>
<tr>
<td> Gender : </td>
<td> <input type="radio" name="v2" checked> Male </td>
<td colspan="2"> <input type="radio" name="v2"> Female </td>
</tr>
<tr>
<td> Name </td>
<td colspan="2"> First Name : <input type="text" name="v3"> </td>
<td> Last Name : <input type="text" name="v3"> </td>
</tr>
<tr>
<td> Photos </td>
<td colspan="2"> <input type="file" name="v4"> <br> <input type="file" name="v4"> <br> <input type="file" name="v4"> </td>
<td> <input type="submit" name="v5" value="send" style="float:right;" > </td>
</tr>
</table>
However, this is a good example why it's not considered good practice to use html table and colspan - it quite soon gets rather complicated. But in this case, unless you add a lot of new rows or change the layout a lot, it probably works just fine.
Related
I'm trying to get the below outputs of this form to limit the outcome to 2 decimal place as it's a currency.
I've tried another suggestion by adding an onchange event but it's not working. Any suggestions?
<form oninput="retVal.value = pavVal.value - (pavVal.value * pavCAT.value),salvage.value=pavVal.value * pavCAT.value, retPrevVal.value = ((pavVal.value *0.8) * (1 - pavCAT.value))">
<table>
<tr>
<td>
<label for="pavVal"><b>PAV:</b></label>
</td>
<td>
<input type="number" id="pavVal">
</td>
</tr>
<tr>
<td>
<label for="pavCAT" ><b>CAT:</b></label>
</td>
<td>
<input type="radio" name="pavCAT" value="0.28" >
<label for="0.28" style="padding-right:30px; width:50%;" >Category N (28%)</label>
<input type="radio" name="pavCAT" value="0.2" >
<label for="0.2" style="padding-right:30px; width:50%;">Category S (20%)</label>
<input type="radio" name="pavCAT" value="0.05" >
<label for="0.05" style="padding-right:30px; width:50%;">Category B (5%)</label>
</td>
</tr>
<tr>
<td>
<label for="retVal"><b>Retention Value:</b></label>
</td>
<td>
<output name="retVal" for="pavVal pavCAT" onchange="setTwoNumberDecimal()"></output>
</td>
</tr>
<tr>
<td>
<label for="retPrevVal"><b>Salvage Value:</b></label>
</td>
<td>
<output name="salvage" for="pavVal pavCAT" onchange="setTwoNumberDecimal()" ></output>
</td>
</tr>
<tr>
<td>
<label for="retPrevVal"><b>If Previous TL:</b></label>
</td>
<td>
<output name="retPrevVal" for="pavVal pavCAT"></output>
</td>
</tr>
</table>
</form>
I want to use two forms inside a JSP page, in which one form is of enctype="multipart/form-data" and another is of simple Post method, but it's not working. How should I deal with this?
1)
<form action="NewUserRegn" method="POST">
<table class="mai">
<tr>
<td>
<table class="entry">
<tr class="entry">
<th class="entry" colspan="2">
Personal Details
</th>
</tr>
<tr>
<td class="entry">
Candidate's Name :<br>
<p>(As given in Matriculation Certificate)</p>
</td>
<td class="entry">
<input type="text" name="cdname" size="35" />
</td>
</tr>
<tr>
<td class="entry">
Gender :
</td>
<td class="entry">
<input type="radio" name="gender" value="Male" />Male
<input type="radio" name="gender" value="Female" />Female
</td>
</tr>
</table>
</form>
2)
<form name="docs"
action="NewUserRegn"
method="POST"
enctype="multipart/form-data">
<table class="mai">
<tr>
<td>
<table class="entry">
<tr>
<th class="entry" colspan="2">
Documents Upload
</th>
</tr>
<tr>
<td class="entry">
Photograph : <input type="file" name="photo" accept="image/*"/>
</td>
<td class="entry">
Signature : <input type="file" name="sign" accept="image/*"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
<table class="mai">
<tr>
<td>
<input type="submit"
value="Recheck"
name="recheck" /></center>
</td>
<td>
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</form>
I'm having an weird problem. I've got an table with an input and some text. Only problem is that 1 row is shorter than the others.
I've moved the row down, but that also didn't work. I've also compared them with the other rows, but i can't find the difference.
An image says more than thousands words they say, so here's an screen pick from the live testing area:
Also, here's an JSFiddle of the relevant code.
And here's the code also:
<table class="radio">
<tbody>
<tr class="highlight">
<td>
<input type="radio" name="shipping_method" value="pickup.pickup0" id="shipping_method_pickup" />
</td>
<td colspann="3"><b>Hello</b>
</td>
<td style="text-align: right;">
<label for="pickup.pickup1">0,00</label>
</td>
</tr>
<tr class="highlight">
<td>
<input type="radio" name="shipping_method" value="weight.weight_5" id="weight.weight_5" checked="checked" />
</td>
<td colspan="3"><b>Verzending op gewicht</b>
</td>
<td style="text-align: right;">
<label for="weight.weight_5">2,20</label>
</td>
</tr>
<tr class="highlight">
<td>
<input type="radio" name="shipping_method" value="weighttat.weighttat_5" id="weighttat.weighttat_5" />
</td>
<td colspan="3"><b>Verzending via Post.nl</b>
</td>
<td style="text-align: right;">
<label for="weighttat.weighttat_5">6,75</label>
</td>
</tr>
<tr class="highlight">
<td>
<input type="radio" name="shipping_method" value="dhlpickup.dhlpickup_5" id="dhlpickup.dhlpickup_5" />
</td>
<td colspan="3"><b>Verzenden via DHL Afhaalservice ( Kies hier een DHL afhaalpunt </b>
</td>
<td style="text-align: right;">
<label for="dhlpickup.dhlpickup_5">4,50</label>
</td>
</tr>
</tbody>
</table>
You have a small spelling error
An extra n in colspann
Your first row's attribute colspan is wrong, change:
<td colspann="3"><b>Hello</b>
with:
<td colspan="3"><b>Hello</b>
Here is the fiddle updated: http://jsfiddle.net/D5fJa/1/
More info about colspan attribute: http://www.w3schools.com/tags/att_td_colspan.asp
I have a table as below
<table style="border-spacing: 10px; width:auto; table-layout: fixed" id="tblCustomerinput">
<tbody>
<tr>
<td width="2px">
<span class="error"> *</span>
</td>
<td style="width: auto;resize: horizontal;">
<span>Required Field</span>
</td>
<td>
<span id="cvEventsValidator" class="error" style="display:none;">Please complete the required fields below.</span>
<span id="reqFieldValidator" class="error" style="color:Red;display:none;">Please complete the required fields below.</span>
<br>
</td>
</tr>
<tr>
<td width="2px">
</td>
<td width="130px">
<b> <span id="lblCustNumber">Customer Number:</span></b>
</td>
<td>
<input name="txtCustNumber" type="text" maxlength="50" id="txtCustNumber">
</td>
</tr>
<tr>
<td width="2px"><span class="error">*</span>
</td>
<td width="130px">
<b> <span id="lblFirstName">First Name:</span> </b>
</td>
<td>
<input name="txtFirstName" type="text" maxlength="50" id="txtFirstName" class="requiredfield">
</td>
</tr>
<tr>
<td width="2px"><span class="error">*</span>
</td>
<td width="130px">
<b> <span id="lblLastName">Last Name:</span></b>
</td>
<td>
<input name="txtLastName" type="text" maxlength="50" id="txtLastName" class="requiredfield">
</td>
</tr>
<tr>
<td width="2px">
</td>
<td width="130px">
<b> <span id="lblCompanyName">Company Name:</span></b>
</td>
<td>
<input name="txtCompanyName" type="text" maxlength="50" id="txtCompanyName">
</td>
</tr>
<tr>
<td width="2px" span="" class="error">*
</td>
<td width="130px">
<b> <span id="lblPhoneNumber">Phone Number:</span></b>
</td>
<td>
<input name="txtPhoneNumber" type="text" maxlength="50" id="txtPhoneNumber" class="requiredfield">
</td>
</tr>
<tr>
<td width="2px"><span class="error">*</span>
</td>
<td width="130px"><b>
<span id="lblEmail">E-mail Address:</span></b>
</td>
<td>
<input name="txtEmail" type="text" maxlength="50" id="txtEmail" class="requiredfield">
</td>
</tr>
<tr>
<td width="2px">
</td>
<td width="130px">
<b> <span id="lblDynamicField" maxlength="50"></span></b>
</td>
<td>
<input name="txtDynamicField" type="text" maxlength="50" id="txtDynamicField">
</td>
</tr>
<tr>
<td colspan="2"><span id="Label1">Comments:</span>
<br>
<textarea name="txtComment" rows="5" cols="20" id="txtComment" class="feedback_comment" onkeypress="return this.value.length <=1500" onkeydown="limitText(this,1500);" onkeyup="limitText(this,1500);" style="width:360px;" clicks="0" onfocus="clearContents(this);">Please describe the problem you found...</textarea></td>
</tr>
</tbody>
</table>
The width of the second always comes out as 347px for reasons I cant quite comprehend(!!??)
I set a fixed width for the td as 130 px.
Could anyone help me with this please? I had been scratching my head till it aches for this :)
Basically I need to line up the Labels closer to the Textboxes.
As always thanks a ton for your help in advance.
Thanks
The default width of the textarea which spans the first and second column is larger than the 130px. You need to set the width of the textarea to 130px or smaller. Or you can span the textarea's parent td colspan to 3 columns instead of 2.
I have a checkbox in a table and I cannot align them to the left.
<tr>
<td colspan="3" class="cb">
<input type="checkbox" name="cb" value="checked" /> this is a checkbox
</td>
</tr>
table.all td.cb{
color: #424242;
border:1px solid black;
margin:0 auto;
text-align:left;
}
I have tried many things, but the result is this:
I applied a border for demonstration purposes.
If I add float:left, I get this:
I used the same code in another webpage where it was working fine (there the table had 2 columns only).
Solution:
I already had this in my .css file which strangely caused the problem in spite of the colspan="3"
table.all td input{
width:90%;
float:left;
}
I changed it to
table.all td input.i{
width:90%;
float:left;
}
and added a class="i" to all the other input types and now it's working fine.
The whole form if necessary:
<div id="container_center">
<form>
<table class="minden">
<tr>
<td colspan="3">
<p class="title">Create new account</p>
</td>
</tr>
<tr>
<td colspan="3">
<p class="title2">Enter account holder information</p>
</td>
</tr>
<tr>
<td colspan="3">
<div id="container_jobb_content_vonal"> </div>
</td>
</tr>
<tr>
<td>
<p>First name: *</p>
</td>
<td colspan="2">
<p>Last name: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="firstname" size="45">
</td>
<td colspan="2">
<input type="text" name="lastname" size="45">
</td>
</tr>
<tr>
<td>
<p>Email: *</p>
</td>
<td colspan="2">
<p>Email again: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="email" size="45">
</td>
<td colspan="2">
<input type="text" name="email2" size="45">
</td>
</tr>
<tr>
<td>
<p>Address 1: *</p>
</td>
<td colspan="2">
<p>Address 2:</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="address1" size="45">
</td>
<td colspan="2">
<input type="text" name="address2" size="45">
</td>
</tr>
<tr>
<td>
<p>Country: *</p>
</td>
</tr>
<tr>
<td>
<select name="country" class="sel_country">
<option value="">[Please Select]</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Germany">Germany</option>
</select>
</td>
</tr>
<tr>
<td>
<p>City: *</p>
</td>
<td>
<p>State/Province: *</p>
</td>
<td>
<p>Zip code: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="city" size="45">
</td>
<td>
<input type="text" name="state" size="30">
</td>
<td>
<input type="text" name="zip" size="10" class="zip">
</td>
</tr>
<tr>
<td>
<p>Phone number: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="phone" size="45">
</td>
</tr>
<tr>
<td colspan="3">
<p class="title3">Create your login</p>
</td>
</tr>
<tr>
<td colspan="3">
<div id="container_jobb_content_vonal"> </div>
</td>
</tr>
<tr>
<td>
<p>Username: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="username" size="45">
</td>
</tr>
<tr>
<td>
<p>Password: *</p>
</td>
<td>
<p>Confirm password: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="password" size="45">
</td>
<td colspan="2">
<input type="text" name="password2" size="45">
</td>
</tr>
<tr>
<td colspan="3">
<p class="title3">Accept terms</p>
</td>
</tr>
<tr>
<td colspan="3">
<div id="container_jobb_content_vonal"> </div>
</td>
</tr>
<tr>
<td colspan="3" class="cb">
<input type="checkbox" name="cb" value="checked"/>this is a checkbox
</td>
</tr>
<tr>
<td>
<ul>
<li>Terms of service</li>
<li>Privacy policy</li>
</ul>
</td>
</tr>
<tr>
<td class="submit" colspan="3">
<input type="submit" name="purchase" value="Purchase" id="submitbutton">
</td>
</tr>
</table>
</form>
</div>
You could also accomplish this by excluding the checkbox from your input style. For example, I was encountering a similar problem with this CSS:
input {
width: 300;
}
And fixed by changing to this:
input:not([type="checkbox"]) {
width: 300;
}