I having trouble trying to put a div with the style catalog at the top of the cell of a table. I don't know why because in the next column, I have a div and it appears in the right place.
What am I doing wrong?
The code, live at jsFiddle:
<table id="tblButtonContainer" style="margin:0px;border:0px; border-collapse: collapse; border-spacing: 0;">
<tbody>
<tr>
<td style="">
<div class="ui-accordion-header ui-helper-reset ui-state-default topCatalog">
Categorias
</div>
</td>
<td>
<div class="ui-accordion-header ui-helper-reset ui-state-default">
<label style="float:left;color:#FFF">Buscar</label>
<input id="txtFinder" class="txtInput" type="text" value="Buscar" size="40">
<input id="btnFinder" type="button" value="Buscar" class="ui-button ui-widget ui-state-default ui-corner-all" role="button">
</div>
</td>
</tr>
<tr>
<td style="padding-right: 20px">
<div class="catalog ui-accordion-header ui-helper-reset ui-state-default" style="200px">
<ul class="menuCat">
<li>
<label class="formatText">Accesorios 4x4</label>
<span class="ui-icon ui-icon-triangle-1-e" style="float:right"></span>
</li>
<li>
<label class="formatText">Frenos y Pastillas</label>
<span class="ui-icon ui-icon-triangle-1-e" style="float:right"></span>
</li>
<li>
<label class="formatText">Tren Delantero</label>
<span class="ui-icon ui-icon-triangle-1-e" style="float:right"></span>
</li>
</ul>
</div>
</td>
<td>
<div id="catalogSearch" class="boxShadow">
<table id="tblCatalogSearch" class="centerTable" style="text-align:center">
<tbody>
<tr>
<td colspan="3">
<div style="margin:0;width:490px" class="ui-state-hover borders">
Elige el modelo de tu vehículo
</div>
<div style="height:20px"></div>
</td>
</tr>
<tr>
<td>
<label>Marca</label>
<select name="brand" id="brand">
<option value="0">Elige una Marca</option>
<option value="1">prueba</option>
</select>
</td>
<td>
<label>Modelo</label>
<select name="model" id="model" disabled="disabled"></select>
</td>
<td>
<label>Año</label>
<select name="year" id="year" disabled="disabled"></select>
</td>
</tr>
<tr><td><div style="height:20px"></div></td></tr>
<tr>
<td colspan="3">
<input name="btnSearch" id="btnSearch" value="Buscar" type="button" class="ui-button ui-widget ui-state-default ui-corner-all" role="button">
</td>
</tr>
</tbody>
</table>
</div>
<div id="results" class="boxShadow ui-corner-all borders" style="display: none; ">
<div style="margin:0;width:490px" class="ui-state-hover borders">
<span class="formatText" style="color:#373737;font-weight:bold;margin-left:20px">
Resultados de la Busqueda:
</span>
</div>
<table id="tblResult">
<tbody>
<tr></tr>
<tr><td>Uno</td></tr>
<tr><td>dos</td></tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Note: I'm using jQuery-UI to help me with the styles I don't know if that is part of the problem.
Just add vertical-align:top; to your cell.
The default table cell behaviour is to vertically align to the centre. The second cell looks correct to you because it fills the whole cell. But it isn’t technically aligned to the top at all.
Use: #tblButtonContainer td {vertical-align: top;}.
Don't use inline styles!
You can also consider adding:
#tblButtonContainer td div {
display: table;
height: 100%;
width: 100%;
}
But I can't vouch for that in all browsers.
Related
I'm looking to add some kind of separator within a table so I can apply a styling to a specific portion of the table. The table it divided into six columns which are two sets of the subject, the input box, and the marker.
When I add tags, they're thrown to the top when the html is rendered (inspect element on the jsfiddle). Can I add some kind of separator (div, span, or something else) such that each set of three has only one subject, one input box, and one marker.
I need this because when I add a check mark or x to a marker using jQuery, it bleeds over and styles the other marker in the same row the same way. Looking to make them independent.
https://jsfiddle.net/sLy9d67r/
<div class="conjugate-input-container ">
<table class="table table-striped conjugate-input">
<tbody>
<tr>
<div>
<td class="subject">je</td>
<td class="conj-input"><input type="text" id="conj1sg" autocomplete="off" spellcheck="false" tabindex="-1" ></td>
<td class="marker"><i class="fa "></i></td>
</div>
<div>
<td class="subject">nous</td>
<td class="conj-input"><input type="text" id="conj1pl" autocomplete="off" spellcheck="false" tabindex="4" ></td>
<td class="marker"><i class="fa "></i></td>
</div>
</tr>
<tr>
<div>
<td class="subject">tu</td>
<td class="conj-input"><input type="text" id="conj2sg" autocomplete="off" spellcheck="false" tabindex="2" ></td>
<td class="marker"><i class="fa "></i></td>
</div>
<div>
<td class="subject">vous </td>
<td class="conj-input"><input type="text" id="conj2pl" autocomplete="off" spellcheck="false" tabindex="5" ></td>
<td class="marker"><i class="fa "></i></td>
</div>
</tr>
<tr>
<div>
<td class="subject">il</td>
<td class="conj-input"><input type="text" id="conj3sg" autocomplete="off" spellcheck="false" tabindex="3" ></td>
<td class="marker"><i class="fa "></i></td>
</div>
<div>
<td class="subject">ils</td>
<td class="conj-input"><input type="text" id="conj3pl" autocomplete="off" spellcheck="false" tabindex="6" ></td>
<td class="marker"><i class="fa "></i></td>
</div>
</tr>
</tbody>
</table>
</div>
Within a table, you can only insert other elements (eg, span div) in the td. Div's are not allowed between two tr(s) or two td(s).
I have a <td> element with content and a button. The width of the content should be all except the width of the button which will be fixed. The button should be aligned to the right of the content. How can I achieve this, the following doesn't work:
<table border="1px">
<tr>
<td>
<div>
<div style="width: auto; overflow: auto;">
<span>
<form>
<textarea></textarea>
</form>
</span>
</div>
<div style="float: right; width: 32px;">
<button type="button" class="btn btn-primary">
Click
</button>
</div>
</div>
</td>
<td>Another cell</td>
</tr>
</table>
Use style="float: right;"
<table border="1px">
<tr>
<td>
<div style="display:inline-block">
<div style="display: inherit;width: calc(100% - 32px);overflow: auto;">
<span>
<form>
<textarea></textarea>
</form>
</span>
</div>
<div style="float: right; width: 32px;">
<button type="button" class="btn btn-primary" title="Select Financial Instrument" style="width:100%; word-wrap: break-word;">
Click
</button>
</div>
</div>
</td>
<td>Another cell</td>
</tr>
</table>
Based on Gerard's answer the following worked best for me:
<table border="1px">
<tr>
<td>
<div style="display: inline-flex; align-items: center; width: 100%;">
<div>
<span>
<form>
<textarea></textarea>
</form>
</span>
</div>
<div style="padding: 5px;">
<button type="button">
Click
</button>
</div>
</div>
</td>
<td>Another cell</td>
</tr>
</table>
Is this what you need?
<table border="1px">
<tr>
<td>
<div style="display: flex;">
<form>
<textarea></textarea>
</form>
<button type="button" class="btn btn-primary" title="Select Financial Instrument">
Click
</button>
</div>
</td>
<td>Another cell</td>
</tr>
</table>
you could decrease the font-size of the button so it fits inside the desired width (32px) you've set to the parent div
don't really understand your logic behind this html structure, but here is your solution
<table border="1px">
<tr>
<td>
<div>
<div style="width:calc(100% - 32px);overflow: auto;float:left">
<span>
<form>
<textarea></textarea>
</form>
</span>
</div>
<div style="float: right;">
<button type="button" class="btn btn-primary" style="width:32px;font-size:8px;" title="Select Financial Instrument">
Click
</button>
</div>
</div>
</td>
<td>Another cell</td>
</tr>
</table>
You can use a <table> and place the form in one <td> and the button in the other. Then you can fix the width of the <td> containing the button. This will force the first <td> to adjust its width according to the <table> width.
Check this jsFiddle, try to change the width of the main table and see how the <textarea> (and the <td>) adjust the width accordingly.
Update:
How about this, with no changes to your HTML structure:
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box }
<table border="1px" style="width: 450px">
<tr>
<td>
<div style="display: table; width: 100%">
<div style="display: table-row">
<div style="display: table-cell">
<span style="display: block; width: 100%">
<form style="display: block; width: 100%">
<textarea style="display: block; width: 100%"></textarea>
</form>
</span>
</div><!-- table-cell -->
<div style="display: table-cell; width: 32px;">
<button type="button" class="btn btn-primary">
Click
</button>
</div><!-- table-cell -->
</div><!-- table-row -->
</div><!-- table -->
</td>
<td>Another cell</td>
</tr>
</table>
Sorry for the title, I don't really know how to better phrase my question, but here is a more detailed description:
I have a table that has a bunch of rows that is used to keep track of tasks in a todo list sense, and the rows themselves can be clicked on to show a table embedded within one of their columns to keep track of sub-tasks. When I click on one of the tasks to show the subtasks, the width of the column changes. I have the following demonstration:
If you look closely at the first row and the table header, the colum width is changing. I checked this with inspector and it appears for "test shift input" it changes only 1px, whereas for "test shift input and button" the change is more drastic.
The relevant demo is here. And the code will be posted below. I want to know:
Why this happens - I suspect it is width related from the subtasks table? But please correct me if I'm mistaken.
How to fix this, keeping as much of the current structure as possible. I could probably rewrite the whole thing using divs instead of table but it would be nice to not have to do that.
Thanks in advance.
The HTML:
<div>
<table class="table">
<thead>
<tr>
<th><i class="glyphicon glyphicon-check"></i></th>
<th>Task</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td width="10%">
<input type="checkbox" ng-model="item.checked" class="ng-pristine ng-untouched ng-valid">
</td>
<td width="90%">
<input class="form-control ng-pristine ng-untouched ng-valid" ng-model="item.name">
</td>
<td>
<button class="btn btn-primary btn-responsive" ng-click="addItem()"><i class="glyphicon glyphicon-plus"></i></button>
</td>
</tr>
<tr>
<td colspan="3" style="padding:0">
<div class="dataTableContainer" style="height:460px;overflow:auto">
<table class="table">
<tbody>
<tr ng-repeat="thisTodo in todoList track by $index" class="ng-scope">
<td width="10%">
<input type="checkbox" ng-model="thisTodo.checked" ng-click="checked(thisTodo._id,thisTodo.checked)" class="ng-pristine ng-untouched ng-valid">
</td>
<td width="90%">
<div for="0" class="checked-false" onclick="$('#test1').toggle()">
Test shift input and button
</div>
<table id="test1" class="table">
<thead>
<tr>
<th width="10%"><i class="glyphicon glyphicon-check"></i></th>
<th>Subtask</th>
<th></th>
</tr>
</thead>
<tbody><tr>
<td>
<input type="checkbox" ng-model="thisTodo.subItem.checked" class="ng-pristine ng-untouched ng-valid">
</td>
<td>
<input class="form-control ng-valid ng-dirty ng-touched" ng-model="thisTodo.subItem.name">
</td>
<td>
<button class="btn btn-primary btn-responsive" ng-click="addSubItem(thisTodo)"><i class="glyphicon glyphicon-plus"></i></button>
</td>
</tr>
<!-- ngRepeat: subtask in thisTodo.subtasks --><tr ng-repeat="subtask in thisTodo.subtasks" class="ng-scope">
<td>
<input type="checkbox" ng-model="subtask.checked" ng-click="checkedSubtask(thisTodo._id,subtask._id,subtask.checked)" class="ng-pristine ng-untouched ng-valid">
</td>
<td>
<div class="checked-false">
Test
</div>
</td>
<td>
<button class="btn btn-danger btn-responsive" ng-click="removeSubItem(thisTodo._id,subtask._id)"><i class="glyphicon glyphicon-trash"></i></button>
</td>
</tr><!-- end ngRepeat: subtask in thisTodo.subtasks --><tr ng-repeat="subtask in thisTodo.subtasks" class="ng-scope">
<td>
<input type="checkbox" ng-model="subtask.checked" ng-click="checkedSubtask(thisTodo._id,subtask._id,subtask.checked)" class="ng-pristine ng-untouched ng-valid">
</td>
<td>
<div class="checked-false">
loalsdfjalskdjfalkjfaasdf
</div>
</td>
<td>
<button class="btn btn-danger btn-responsive" ng-click="removeSubItem(thisTodo._id,subtask._id)"><i class="glyphicon glyphicon-trash"></i></button>
</td>
</tr><!-- end ngRepeat: subtask in thisTodo.subtasks -->
</tbody></table>
</td>
<td>
<button class="btn btn-danger btn-responsive" ng-click="remove(thisTodo._id)"><i class="glyphicon glyphicon-trash"></i></button>
</td>
</tr><tr ng-repeat="thisTodo in todoList track by $index" class="ng-scope">
<td width="10%">
<input type="checkbox" ng-model="thisTodo.checked" ng-click="checked(thisTodo._id,thisTodo.checked)" class="ng-pristine ng-untouched ng-valid">
</td>
<td width="90%">
<div for="1" class="checked-false" onclick="$('#test2').toggle()">
Test shift input
</div>
<table id="test2" class="table">
<thead>
<tr>
<th width="10%"><i class="glyphicon glyphicon-check"></i></th>
<th>Subtask</th>
<th></th>
</tr>
</thead>
<tbody><tr>
<td>
<input type="checkbox" ng-model="thisTodo.subItem.checked" class="ng-pristine ng-untouched ng-valid">
</td>
<td>
<input class="form-control ng-pristine ng-valid ng-touched" ng-model="thisTodo.subItem.name">
</td>
<td>
<button class="btn btn-primary btn-responsive" ng-click="addSubItem(thisTodo)"><i class="glyphicon glyphicon-plus"></i></button>
</td>
</tr>
<!-- ngRepeat: subtask in thisTodo.subtasks -->
</tbody></table>
</td>
<td>
<button class="btn btn-danger btn-responsive" ng-click="remove(thisTodo._id)"><i class="glyphicon glyphicon-trash"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
The CSS:
.table{
width:100%;
table-layout: inherit;
}
.checked-false {
color: black;
background-color: rgba(255, 255, 0, 0.25);
border-radius: 10px;
margin: 5px
}
#test1, #test2 {
display:none;
}
I guess its problem with your td %
You have mentioned table 100% out of that 1st td is 10% and second td is of 90% now what about third td % it will be extra right?
So check your td % and try to match with total %.
I distribute 100% in 10% + 80% + 10%
<tr>
<td width="10%">
<input type="checkbox" ng-model="item.checked" class="ng-pristine ng-untouched ng-valid">
</td>
<td width="80%">
<input class="form-control ng-pristine ng-untouched ng-valid" ng-model="item.name">
</td>
<td>
<button class="btn btn-primary btn-responsive" ng-click="addItem()"><i class="glyphicon glyphicon-plus"></i></button>
</td>
</tr>
here is an updated sample.
https://jsfiddle.net/ccrwj998/1/
You just need to reduce the width of the 2nd <td> element with 90% width and assign width to the 3rd <td element> so that the total width of the three <td> elements sum up to 100%;
Here is the updated fiddle. I have set the width here to 5% for the 3rd <td> element, but you should set it equal to the width of the button.
<tr>
<td width="10%">
<input type="checkbox" ng-model="item.checked" class="ng-pristine ng-untouched ng-valid">
</td>
<td width="85%">
<input class="form-control ng-pristine ng-untouched ng-valid" ng-model="item.name">
</td>
<td width="5%">
<button class="btn btn-primary btn-responsive" ng-click="addItem()"><i class="glyphicon glyphicon-plus"></i></button>
</td>
</tr>
I am trying to make the form look as in the screenshot below. The textboxes should start immediately after the text and all of them should end at the same point.
My existing markup is below:
.txtbig {
width: 100%;
}
<table style="border: 1px solid black; border-image: none; width: 100%;">
<tbody>
<tr>
<td class="tableBody1" colspan="4">
<strong>Intended Recipient Information</strong>
</td>
</tr>
<tr>
<td>
Name and Title
</td>
<td colspan="2">
<input name="txtRecpNameTitle" class="txtbig" id="txtRecpNameTitle" type="text" maxlength="255">
</td>
<td style="width: 11px;">
<span id="RequiredFieldValidator23"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>
</td>
</tr>
<tr>
<td>
Company Name and Division</td>
<td colspan="2">
<input name="txtRecpCompanyNameDiv" class="txtbig" id="txtRecpCompanyNameDiv" type="text" maxlength="255">
</td>
<td>
<span id="RequiredFieldValidator24"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>
</td>
</tr>
<tr>
<td>
Complete Mailing Address</td>
<td colspan="2">
<input name="txtRecpCompleteMailAddress" class="txtbig" id="txtRecpCompleteMailAddress" type="text" maxlength="255">
</td>
<td>
<span id="RequiredFieldValidator25"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>
</td>
</tr>
<tr>
<td>
Direct Telephone No.</td>
<td colspan="2">
<input name="txtRecpDirectTelNo" class="txtbig" id="txtRecpDirectTelNo" type="text" maxlength="255">
</td>
<td>
<span id="RequiredFieldValidator26"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>
</td>
</tr>
<tr>
<td>
Email Address</td>
<td colspan="2">
<input name="txtRecpEmailAddress" class="txtbig" id="txtRecpEmailAddress" type="text" maxlength="255">
</td>
<td>
<span id="RequiredFieldValidator27"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>
</td>
</tr>
<tr>
<td>
Intended Application</td>
<td colspan="2">
<input name="txtRecpIntendedApp" class="txtbig" id="txtRecpIntendedApp" type="text" maxlength="255">
</td>
<td>
<span id="RequiredFieldValidator28"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>
</td>
</tr>
</tbody>
</table>
Appreciate your suggestions on the same.
Consider do this layout using bootstrap!
see this link:
http://getbootstrap.com/css/#forms-horizontal
Well use the following css:
table tr td:first-child{
width:20%; //editable as per your design requirement
}
this will set a fix width to all first td of table and other td will come in same width that means your textarea will come in same width
I also agree that using bootstrap is probably the way to go. Here's a generic example.
http://codepen.io/anon/pen/EKjzoV
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
You can use Display:flex and rewrite HTML or reset display values of table elements (see second snippet for this):
div {
border: solid;
}
p {
display: flex;
padding: 0.25em 0;
margin: 0;
}
input {
flex: 1;
margin: 0 0.5em;
}
/* fun */
p:nth-child(even) {
background: lightgray;
}
<div>
<h1>
<strong>Intended Recipient Information</strong>
</h1>
<p>
Name and Title
<input name="txtRecpNameTitle" class="txtbig" id="txtRecpNameTitle" type="text" maxlength="255"><span id="RequiredFieldValidator23"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>
</p>
<p>
Company Name and Division
<input name="txtRecpCompanyNameDiv" class="txtbig" id="txtRecpCompanyNameDiv" type="text" maxlength="255">
<span id="RequiredFieldValidator24"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>
</p>
<p>
Complete Mailing Address
<input name="txtRecpCompleteMailAddress" class="txtbig" id="txtRecpCompleteMailAddress" type="text" maxlength="255">
<span id="RequiredFieldValidator25"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>
</p>
<p>
Direct Telephone No.
<input name="txtRecpDirectTelNo" class="txtbig" id="txtRecpDirectTelNo" type="text" maxlength="255">
<span id="RequiredFieldValidator26"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>
</p>
<p>
Email Address
<input name="txtRecpEmailAddress" class="txtbig" id="txtRecpEmailAddress" type="text" maxlength="255">
<span id="RequiredFieldValidator27"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>
</p>
<p>
Intended Application
<input name="txtRecpIntendedApp" class="txtbig" id="txtRecpIntendedApp" type="text" maxlength="255">
<span id="RequiredFieldValidator28"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>
</p>
</div>
tr,
[colspan="2"] {
display:flex;
}
td {
display:inline-block;
padding: 0.25em 0;
}
[colspan],input {
flex:1;
margin:0 0.125em
}
/* fun */
tr:nth-child(even) {
background:lightgray;
}
<table style="border: 1px solid black; border-image: none; width: 100%;">
<tbody>
<tr>
<td class="tableBody1" colspan="4">
<strong>Intended Recipient Information</strong>
</td>
</tr>
<tr>
<td>
Name and Title
</td>
<td colspan="2">
<input name="txtRecpNameTitle" class="txtbig" id="txtRecpNameTitle" type="text" maxlength="255">
</td>
<td >
<span id="RequiredFieldValidator23"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>
</td>
</tr>
<tr>
<td>
Company Name and Division</td>
<td colspan="2">
<input name="txtRecpCompanyNameDiv" class="txtbig" id="txtRecpCompanyNameDiv" type="text" maxlength="255">
</td>
<td>
<span id="RequiredFieldValidator24"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>
</td>
</tr>
<tr>
<td>
Complete Mailing Address</td>
<td colspan="2">
<input name="txtRecpCompleteMailAddress" class="txtbig" id="txtRecpCompleteMailAddress" type="text" maxlength="255">
</td>
<td>
<span id="RequiredFieldValidator25"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>
</td>
</tr>
<tr>
<td>
Direct Telephone No.</td>
<td colspan="2">
<input name="txtRecpDirectTelNo" class="txtbig" id="txtRecpDirectTelNo" type="text" maxlength="255">
</td>
<td>
<span id="RequiredFieldValidator26"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>
</td>
</tr>
<tr>
<td>
Email Address</td>
<td colspan="2">
<input name="txtRecpEmailAddress" class="txtbig" id="txtRecpEmailAddress" type="text" maxlength="255">
</td>
<td>
<span id="RequiredFieldValidator27"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>
</td>
</tr>
<tr>
<td>
Intended Application</td>
<td colspan="2">
<input name="txtRecpIntendedApp" class="txtbig" id="txtRecpIntendedApp" type="text" maxlength="255">
</td>
<td>
<span id="RequiredFieldValidator28"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>
</td>
</tr>
</tbody>
</table>
I have been trying to use pure HTML on my page because I do not know jQuery and am very unfamiliar with JavaScript.
Is there a way to close a popup window with pure HTML?
<td colspan="4">
<div align="center">
<label>
<input type="checkbox" name="checkbox" value="checkbox">I Agree To The Terms & Conditions</label>
</div>
</td>
</tr>
<tr>
<td width="27%" height="28">
<div align="center">
<label></label>
</div>
</td>
<td width="22%">
<form action="LLH.html">
<div align="right">
<input type="submit" value="Agree">
</div>
</form>
</td>
<td width="21%">
<div align="left">
<form action="master.destroy(Terms.html)">
<input type="submit" value="Do Not Agree">
</form>
</div>
</td>
<td width="30%"> </td>
<input type="button" value="Close this window" onclick="self.close()">
In the body, does that help?