I am about to create a simple HTML table. I'd like some of the cells to dont change their width, not even if the available space for the table increases (eg: higher resolution).
I have created a JSF with my code. My problem is that if I move the vertical separator all the way to the left the column with the delete button starts to get wider instead of keeping its size.
Please help me out how can I do it.
Thanks!
<!DOCTYPE HTML>
<html lang="en-US">
<title>User Management</title>
<body>
<table cellspacing="0" border="1" style="width:80%;">
<tr>
<td>
<form action="/link1" method="post">
<div style="max-width:60px;display:block;">
<input type="hidden" name="id" value="1" />
<input type="button" name="Confirm" value="Delete" onclick="UserConfirm(this)" />
</div>
</form>
</td>
<form action="/link2/" method="post">
<td style="margin:10px;max-width:60px;">
<input type="text" name="id" value="1" style="display:none" />1</td>
<td style="margin:10px;">
<input type="text" name="username" value="1" style="display:none" />johnd</td>
<td style="margin:10px;">
<input type="text" name="firstname" value="John" style="width: 80px;" maxlength="10" required />
</td>
</form>
</tr>
</table>
</body>
</html>
Just assign some small width for the TD of your button like below.
<td width="10">
<form action="/link1" method="post">
<div style="max-width:60px;display:block;">
<input type="hidden" name="id" value="1" />
<input type="button" name="Confirm" value="Delete" onclick="UserConfirm(this)" />
</div>
</form>
</td>
Fiddle Demo
Related
I'm writing a payment page to make a payment from Paypal using Instant Payment Notification. This process is kicked off by POSTing to Paypal using a submit button and a bunch of hidden form fields. As per layout, I have a table and in one of the tds is the form. The HTML looks like this:
<table>
...
<tr id="paymentRow"> <!-- shows the paypal payment information -->
<td valign="top">
<div style="min-height:50px;">
<br/>
<descriptive> Payment</descriptive>
</div>
</td>
<td style="vertical-align:middle; text-align:center;" >
<form style="width:0" action="https://ipnpb.sandbox.paypal.com/cgi-bin/webscr" onsubmit="return validate_payment_form(this)" method="post" />
<input type="image" src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/checkout-logo-large.png" title="Check out with PayPal" alt="Submit" name="Submit" id="Submit"/>
<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="business" value="bob#bob.com" />
<input type="hidden" name="item_name" value="Test purchase item|CustomerID|1" />
<input type="hidden" name="no_shipping" value="1" />
<input type="hidden" name="return" value="https://mywebsite/paymentReceived.php" />
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="currency_code" value="GBP" />
<input type="hidden" name="amount" id="amount" value="1.00" />
<input type="hidden" name="logged_in" value="" />
<input type="hidden" name="<custom>" value="15" />
<input type="hidden" name="notify_url" value="https://mywebsite/paypalNotification.php" /><br />
</form>
</td>
</tr>
...
</table>
There is nothing in my CSS file that sets the alignment for td without the use of a class.
The problem I have is that the paypal button is in the top-left of the td, and I'd like it aligned in the centre/middle. My guess is that this is because it is just one input item in a form. How do I achieve this?
The reason is because you set the form style: width:0 so the td width is also 0; therefore, the image is overflowing and aligned at the left (default alignment for ltr layouts). I'm not sure why you set the form width to 0 but if you remove it, your image will be center-aligned.
So It's hard to write a proper title, I will do my best to explain.
The thing I'm looking for, is a simple way to Directly load the top link google present's my as if I would google a certain term.
Imagine this -> User gives the input "BMW x5" in the text box and clicks on "submit".
As a result I have an Iframe on my webpage that will have it's source set to the url that is the top result in google.com .
To make clear my Iframe will not load google.com with as search parameters "BMX x5" instead it will directly load the top listed page.
Is this possible?
Have a look at this code:
https://productforums.google.com/forum/#!topic/customsearch/Iyv7_wswlqk
You need to copy this to a page of its own and target your iframe - however it is possible that google will not allow that.
If that is the case, then you need to have a proxy on your server that parses the search result and redirects to the first link
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" align="center" valign="bottom">
<form name="f" action="Your results page address" id="cse-search-box" method="get" target="_blank">
<input type="hidden" name="cx" value="Your cx value here" />
<input type="hidden" name="cof" value="FORID:9" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" id="q" autocomplete="off" size="51" class="txbx" />
</form>
</td>
</tr>
<tr>
<td style="height:35px;" width="45%" align="right" valign="middle">
<form name="s" action="Your results page address" method="get">
<input type="hidden" name="cx" value="" />
<input type="hidden" name="cof" value="" />
<input type="hidden" name="ie" value="" />
<input type="submit" name="sa" value="Search" class="btn" onClick="document.s.cx.value=document.f.cx.value; document.s.cof.value=document.f.cof.value; document.s.ie.value=document.f.ie.value;" />
</form>
</td>
<td width="55%" align="left" valign="middle">
<form name="g" action="http://www.google.co.uk/search" method="get">
<input type="hidden" name="q" value="">
<input name="btnI" type=submit value="I'm Feeling Lucky" class="btn" onClick="document.g.q.value=document.f.q.value;" />
</form>
</td>
</tr>
</table>
I'm working on a webpage that lists several rental reservations from a database. I think I may have built myself into a corner. I originally had each row end with 3 cells, each one containing a tiny form made of 2 or 3 hidden fields and a button to "edit", "return", or "cancel" the reservation.
Those worked fine, and were all valid because each entire form was within a single cell.
Now I need to add functionality to allow selecting multiple rows, and passing them to another page. So without thinking, I added a <form> that wrapped around the whole table, added a checkbox to each row, and a submit button at the bottom of the table.
After some research, I'm pretty sure nested forms are not allowed in XHTML. But the document still somehow validates with the W3C validator. I'm using XHTML 1.0 Transitional. Maybe because its not a <form> directly within another <form>, its a <form> within a <table> within a <form>? Is that allowed?
The form works as it is (it submits a few extra fields from the top row, but I can just ignore those if I have to).
I'm just afraid to implement this because I feel like there's no way this is correct. If anyone could clarify whether or not this is valid I would really appreciate it. And if it's not, do you have any suggestions to fix it?
Thanks in advance!
<form id="form2" name="form2" method="post" action="pickup.php">
<table width="1200" border="1" align="center" cellpadding="5" cellspacing="0" style="border-collapse:collapse; border-color:#CCC;">
<tr>
<td colspan="10" bgcolor="#CCCCCC"><h2>Equipment Being Picked Up Today</h2></td>
</tr>
<tr class="highlight">
<td><input type="checkbox" name="res1" id="res1" value="2278" /></td>
<td>George Washington</td>
<td>555-333-4444</td>
<td>Lghting kit 6209</td>
<td>2/12/15</td>
<td>2/13/15</td>
<td></td>
<td align="center">
<form name="editForm" method="post" action="edit.php">
<input name="editFrom" type="hidden" value="today2.php" />
<input name="theDate" type="hidden" value="2015-02-12" />
<input name="reservationID" type="hidden" value="2278" />
<input type="submit" name="edit" value="edit" />
</form>
</td>
<td align="center">
<form name="returnForm" method="post" action="today2.php">
<input name="reservationID" type="hidden" value="2278" />
<input name="return" type="hidden" value="yes" />
<input name="theDate" type="hidden" value="2015-02-12" />
<input type="submit" value="return" />
</form>
</td>
<td align="center">
<form name="cancelForm" method="post" action="cancel.php">
<input name="editFrom" type="hidden" value="today2.php" />
<input name="theDate" type="hidden" value="2015-02-12" />
<input name="reservationID" type="hidden" value="2278" />
<input type="submit" name="cancel" value="cancel" />
</form>
</td>
</tr>
<tr class="highlight">
<td><input type="checkbox" name="res2" id="res2" value="2279" /></td>
<td>Sam Adams</td>
<td>333-222-7777</td>
<td>camera kit 3456</td>
<td>2/12/15</td>
<td>2/13/15</td>
<td></td>
<td align="center">
<form name="editForm" method="post" action="edit.php">
<input name="editFrom" type="hidden" value="today2.php" />
<input name="theDate" type="hidden" value="2015-02-12" />
<input name="reservationID" type="hidden" value="2279" />
<input type="submit" name="edit" value="edit" />
</form>
</td>
<td align="center">
<form name="returnForm" method="post" action="today2.php">
<input name="reservationID" type="hidden" value="2279" />
<input name="return" type="hidden" value="yes" />
<input name="theDate" type="hidden" value="2015-02-12" />
<input type="submit" value="return" />
</form>
</td>
<td align="center">
<form name="cancelForm" method="post" action="cancel.php">
<input name="editFrom" type="hidden" value="today2.php" />
<input name="theDate" type="hidden" value="2015-02-12" />
<input name="reservationID" type="hidden" value="2279" />
<input type="submit" name="cancel" value="cancel" />
</form>
</td>
</tr>
<tr class="highlight">
<td><input type="checkbox" name="res3" id="res3" value="2280" /></td>
<td>Bob Dole</td>
<td>111-222-4444</td>
<td>Other item 6789</td>
<td>2/12/15</td>
<td>2/13/15</td>
<td></td>
<td align="center">
<form name="editForm" method="post" action="edit.php">
<input name="editFrom" type="hidden" value="today2.php" />
<input name="theDate" type="hidden" value="2015-02-12" />
<input name="reservationID" type="hidden" value="2280" />
<input type="submit" name="edit" value="edit" />
</form>
</td>
<td align="center">
<form name="returnForm" method="post" action="today2.php">
<input name="reservationID" type="hidden" value="2280" />
<input name="return" type="hidden" value="yes" />
<input name="theDate" type="hidden" value="2015-02-12" />
<input type="submit" value="return" />
</form>
</td>
<td align="center">
<form name="cancelForm" method="post" action="cancel.php">
<input name="editFrom" type="hidden" value="today2.php" />
<input name="theDate" type="hidden" value="2015-02-12" />
<input name="reservationID" type="hidden" value="2280" />
<input type="submit" name="cancel" value="cancel" />
</form>
</td>
</tr>
<tr>
<td colspan="10">
<input type="submit" name="submit" id="submit" value="Pickup Selected Equipment" />
</td>
</tr>
</table>
</form>
It validates because the formal validation of XHTML 1.0 is based on XML rules, and XML is a strongly simplified modification of SGML, which is what HTML 4.01 is nominally based on. Consequently, some features, such as nested forms, which are prohibited in all versions of HTML are not forbidden by the formal syntax of XHTML 1.0 described in a DTD based on XML. The specification says this as follows:
SGML gives the writer of a DTD the ability to exclude specific
elements from being contained within an element. Such prohibitions
(called "exclusions") are not possible in XML.
For example, the HTML 4 Strict DTD forbids the nesting of an 'a'
element within another 'a' element to any descendant depth. It is not
possible to spell out such prohibitions in XML. Even though these
prohibitions cannot be defined in the DTD, certain elements should not
be nested. A summary of such elements and the elements that should not
be nested in them is found in the normative Element Prohibitions.
And the Element Prohibitions says that a form element must not contain another form element.
It is not safe to nest forms. There is no specification of what should happen if you do that. For example, it is not specified whether the fields on an inner form should be included when an outer form is submitted.
Thus, you should consider restructuring the page so that form nesting is avoided. If you need help with this, consider posting a new question that specifies the desired functionality and shows your best attempt at restructuring.
I have been using this table for a while now and all of a sudden its broken now. I have CSS in my files for it but for whatever reason its now adding a blank line to the bottom of the table row after the form image is posted. It does this even with this same table with no CSS. I have tried table height, spacing, the works. I cannot figure out why there is a blank line here. I apologize if it turns out to be a stupid fix I have searched and tried many fixes.
HERE IS AN EXAMPLE
<table border="1">
<tr>
<td></td>
<td>
<form action="" method="post">
<div>
<input type="hidden" name="id" value="" />
<input type="hidden" name="d" value="1" />
<input type="image" src="../resources/img/direction/up_arrow.png" alt="Up" width="62" height="62" />
</div>
</form>
</td>
<td></td>
</tr>
<tr>
<td>
<form action="" method="post">
<div>
<input type="hidden" name="id" value="" />
<input type="hidden" name="d" value="2" />
<input type="image" src="../resources/img/direction/left_arrow.png" alt="Left" width="62" height="62" />
</div>
</form>
</td>
<td>
<form action="" method="post">
<div>
<input type="hidden" name="id" value="" />
<input type="hidden" name="r" value="1" />
<input type="image" src="../resources/img/direction/rest_button.png" alt="Rest" width="62" height="62" />
</div>
</form>
</td>
<td>
<form action="" method="post">
<div>
<input type="hidden" name="id" value="" />
<input type="hidden" name="d" value="3" />
<input type="image" src="../resources/img/direction/right_arrow.png" alt="Right" width="62" height="62" />
</div>
</form>
</td>
</tr>
<tr>
<td></td>
<td>
<form action="" method="post">
<div>
<input type="hidden" name="id" value="" />
<input type="hidden" name="d" value="4" />
<input type="image" src="../resources/img/direction/down_arrow.png" alt="Down" width="62" height="62" />
</div>
</form>
</td>
<td></td>
</tr>
</table>
The forms of the tds have a margin. Add following css:
form {
margin: 0;
}
To prevent more of this behaviours you should include e.g. a normalize.css instead.
This css is what will solve your problem:
form {margin:0;padding:0}
The extra space was basically coming from your form. You probably removed some old code from css and that's why it suddenly broke.
I have a webpage that is using Google's custom search engine. I wanted to make it prettier so I created a wrapper around area that essentially puts the search area is a rounded rectangle. To accomplish this, I am using the following code:
<table style="height:33px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="background-image:url(/leftEdge.png); height:33px; width:5px;"> </td>
<td style="background-image:url(/bg.png); height:33px; background-repeat:repeat-x;">
<form name="cse" id="searchbox_demo" action="http://www.google.com/cse">
<input type="hidden" name="cref" value="" />
<input type="hidden" name="ie" value="utf-8" />
<input type="hidden" name="hl" value="" />
<input name="q" type="text" size="32" />
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript"
src="http://www.google.com/cse/tools/onthefly?form=searchbox_demo&lang="></script>
</td>
<td style="background-image:url(/rightEdge.png); height:33px; width:5px;"> </td>
</tr>
</table>
This code looks good in Chrome. However, in Internet Explorer, the rightEdge image appears on the next line. It appears that IE is adding a line break. However, I'm not sure how to get rid of it. Thus far, I have tried:
Changing my DocType to: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Adding the following CSS: form { margin: 0; padding: 0; }
I'm not sure what else to do. Can somebody help me remedy this problem?
Thank you!
I am not a fan fo tables so I remade it using CSS and DIV's:
<div style="height:33px; width:290px">
<div style="background-image:url(/leftEdge.png); height:33px; width:5px; float:left;margin:0; padding:0;"></div>
<div style="background-image:url(/rightEdge.png); height:33px; width:5px; float:right;margin:0; padding:0;"></div>
<div style="background-image:url(/bg.png); height:33px; background-repeat:repeat-x;margin:0; padding:0;">
<form name="cse" id="searchbox_demo" action="http://www.google.com/cse" style="margin:0; padding:0;">
<input type="hidden" name="cref" value="" style="margin:0; padding:0;" />
<input type="hidden" name="ie" value="utf-8" style="margin:0; padding:0;" />
<input type="hidden" name="hl" value="" style="margin:0; padding:0;" />
<input name="q" type="text" size="32" style="margin:0; padding:0;" />
<input type="submit" name="sa" value="Search" style="margin:0; padding:0;" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/tools/onthefly?form=searchbox_demo&lang="></script>
</div>
</div>
It's a bit dirty but I hope it will help.