HTML table td's not properly alignt - html

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

Related

Cannot fix table td width

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.

My form answers are not attaching to email

I have wrote in scripting a simple question list, I need the responses to be returned in a txt file via email when the person hits submit. The front end of the file works, the email creates but the form does not post. Can anyone help with this scripting please?
Coding listed below:
<form action="mailto:test#yahoo.com?subject=Test" id="form" method="post" name="form" >
<!-- PAGE HEADER -->
<table bgcolor=#D1DEE5>
<tr>
<td width="833px"align="center">
<input class="title" name="Title" value="Customer Satisfaction Survey">
</td>
</tr>
</table>
<!-- QUESTIONS -->
<p>
<table>
<tr>
<td>
<p> Welcome message
<p>
</ul>
</td>
</tr>
</table>
<br>
<table>
<tr class="shaded">
<td align="left">
<p><b>Please tell us based on your experience, how satisfied you are with the following services:</b>
</td>
<td align="center" width="50px">Very satisfied</td>
<td align="center" width="50px">Satisfied</td>
<td align="center" width="50px">Dissatisfied</td>
<td align="center" width="50px">Very Dissatisfied</td>
<td align="center" width="50px">N/A</td>
</tr>
<tr>
<td>A</td>
<td align="center" width="50px"><input type="radio" name="q1" value="Very satisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="Satisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="Dissatisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="Very Dissatisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="N/A"></td>
</tr>
</table>
<br>
<table class="outlineTable" bgcolor=#D1DEE5>
<tr>
<td align="left" rowspan=5 width=500 style="vertical-align:top" style="padding-top:5px">
<p><b>Please add comments to explain your answers</b>
<br><textarea name="Comments10" id="Comments10" rows="7" cols="55"></textarea>
</td>
<td align="left">
Month being scored
</td>
<td align="left" class="submitButton">
<input class="name" name="Month">
</td>
</tr>
<tr>
<td align="left">
Name
</td>
<td align="left" class="submitButton">
<input class="name" name="Name">
</td>
</tr>
<tr>
<td align="left">
Date
</td>
<td align="left" class="submitButton">
<input class="name" name="Date">
</td>
</tr>
<tr>
<td align="left">
</td>
<td align="left" class="submitButton">
<input class="button2" type="submit" value="Click here to submit results">
</td>
</tr>
</table>
<br>
<table bgcolor=#D1DEE5>
<tr>
<td align="center">
<h1> Many thanks for taking the time to complete this survey
</td>
</tr>
</table>
<p>
</form>
</body>
</html>

I don't understand how to add a table inside a div

I have a very simple table and I would like to understand what is incorrect with using this . I have entered a styling of color: red; just to visualize where the will work correctly.
<table>
<tr>
<td colspan=2>
<div id="transportation_table" >
<tr>
<td align="right"> Flights (round trip) </td>
<td align="right"> <input type="text" size="10" id="flights" onblur="calculateTransportation(flights, oversized, shuttle)">
</td>
</tr>
<tr>
<td align="right"> Oversized baggage fee (skis) </td>
<td align="right"> <input type="text" size="10" id="oversized" onblur="calculateTransportation(flights, oversized, shuttle)">
</td>
</tr>
<tr>
<td align="right"> Taxi to airport, shuttle to resort (X2) </td>
<td align="right"> <input type="text" size="10" id="shuttle" onblur="calculateTransportation(flights, oversized, shuttle)">
</td>
</tr>
</div>
</td>
</tr>
</table>
You are not declaring a table inside of your div. Tr elements belong inside of tables.
See: http://dev.w3.org/html5/markup/tr.html
That is likely the big error you are seeing.

TD width more than designated

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.

Hiding text and use Radio button to view it

I am trying to have some content show/appear if a certain radio button (YES) is selected. I have provided the text I have in HTML form. I believe this should be a very simple code but I am VERY rusty on my HTML. This is all within a table. If the YES radio is chosen, I would like the 3 Quantity portions to appears but if not then I would like them hidden. I hope this helps...
<tbody>
<td class="style1" colspan="2">
<strong>Room Setup<br>
<tr>
<span class="style2"><em>Complete where applicable</em></span>
</strong>
</td>
<td style="width: 255px;">
*Is a Room Setup Required?
</td>
<td style="width: 202px;">
<input name="roomsetup" value="yes" type="radio">
Yes<br>
<input name="roomsetup" value="no" type="radio"> No
</td>
</tr>
<tr>
<td style="width: 255px; height: 14px;">
</td>
<td style="width: 202px; height: 14px;">
</td>
</tr>
<tr>
<td style="width: 255px;" class="style3">
Quantity
</td>
<td style="width: 202px;">
<input name="roomchairs" value="yes" type="checkbox"> Chairs Needed<br>
<input name="roomchairsquantity" type="text">
</td>
</tr>
<tr>
<td style="width: 255px;">
</td>
<td style="width: 202px;">
</td>
</tr>
<tr>
<td style="width: 255px;" class="style3">
Quantity
</td>
<td style="width: 202px;">
<input name="checktables" value="yes" type="checkbox"> Tables Needed<br>
<input name="roomquantitytable" type="text">
</td>
</tr>
<tr>
<td style="width: 255px;">
</td>
<td style="width: 202px;">
</td>
</tr>
<tr>
<td style="width: 255px;" class="style3">
Quantity
</td>
<td style="width: 202px;">
<input name="checktableclothes" value="yes" type="checkbox"> Tableclothes
Needed<br>
<input name="roomquantitycloth" type="text">
</td>
</tr>
<tr>
<td style="width: 255px;" class="style3">
</td>
<td style="width: 202px;">
</td>
</tr>
There are about two ways you can do this.
(1) Using PHP
<?php
if($_POST["RADIOBOX NAME"] =="OPTION YOU WANT TO SELECT") {
echo "WHAT YOU WANT TO SAY";
//USE THE ECHO AS MUCH AS NEEDED
}
?>
(2) I think that there is a JavaScript for this, however, I am not familiar with JavaScript.
You'll need some javascript for that. If you can use something like jQuery, this is really easy to do, and it's easy to find brazillions tutorial on Internet.
For exemple this one or this one