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

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.

Related

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>

Taking HTML and changing to CSS to override plugin

I have the code for HTML and the developer of the plugin said to create a file which I have to change some of the wording the customer sees. I found the code in HTML (via firebug) and put it in the form but its not working so I am think I need to change more of it into CSS. This is what I have so far but again it didn't change anything.
I just want the wording to change instead of unlimited content just unlimited etc.
Thank you for any help.
<div class="fee-options-for-category">
<table class="fee-options">
<thead>
<tr>
</thead>
<tbody>
<tr class="fee-option fee-id-1">
<td class="fee-selection">
<input id="wpbdp-fees-radio-1" type="radio" data-canrecur="0" checked="checked" value="1" name="fees[91]">
</td>
<td class="fee-label">
<label for="wpbdp-fees-radio-1">Basic Listing</label>
</td>
<td class="fee-amount"> — </td>
<td class="fee-duration"> Unlimited </td>
<td class="fee-images"> 0 </td>
</tr>
<tr class="fee-description fee-id-1">
<td></td>
<td colspan="4">✓ put as much a you want.</td>
</tr>
<tr class="fee-option fee-id-2">
<td class="fee-selection">
<input id="wpbdp-fees-radio-2" type="radio" data-canrecur="1" value="2" name="fees[91]">
</td>
<td class="fee-label">
<label for="wpbdp-fees-radio-2">Featured Listing</label>
</td>
<td class="fee-amount"> $ 12.95 </td>
<td class="fee-duration"> 365 days </td>
<td class="fee-images"> 5 </td>
</tr>
<tr class="fee-description fee-id-2">
<td></td>
<td colspan="4">
✓ Unlimited content .
<br>
✓ Ratings support.
<br>
✓ Ability to attach files to your listing.
</td>
</tr>
</tbody>
</table>
</div>
thank you in advance
Susan

HTML table td's not properly alignt

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

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