I have a table :
https://codepen.io/greg59650/pen/GROajNp
<table role="table"><tbody>
<tr>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
<span><button>Logout</button></span>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
</tr></tbody></table>
if I add an element in the content of my td I would like all my selects to be aligned on the same level and the button below.
like this :
but currently I get this display :
would there be a simple solution to be able to align the selects on the same level ?
You can add vertical-align: top to your td.
td {
vertical-align: top;
}
table {border:1px solid black; }
td {
vertical-align: top;
}
<table role="table"><tbody>
<tr>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td> <td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
<span><button>Logout</button></span>
</form>
</td> <td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
</tr></tbody></table>
Simplest Solution. You can just create another row for it.
table {
border: 1px solid black;
}
<table role="table">
<tbody>
<tr>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
</tr>
<tr>
<td></td>
<td><span><button>Logout</button></span></td>
</tr>
</tbody>
</table>
You can do this by following ways,
by doing td {vertical-align: top;}
by adding logout button in another row
by using id or class of the button you can set its margin and other attributes.
Related
What I'm trying to do is to align the label at top left form box and Radio button next to label. So it looks more clean. I've messed around with the CSS but still couldn't get it right.
This is the CSS I'm using:
input{
width:190px;
border:1px solid #ccc;
}
select{
width:190px;
border:1px solid #ccc;
}
https://jsfiddle.net/4tdcbvkg/1/
i did some improvements in your css:
input[type="text"]{
width:190px;
border:1px solid #ccc;
}
select{
width:190px;
border:1px solid #ccc;
}
label{
display: block;
}
td{
padding-bottom: 0;
vertical-align: bottom;
}
You could do this by simply adding a little more CSS:
input {
width: 190px;
border: 1px solid #ccc;
}
select {
width: 190px;
border: 1px solid #ccc;
}
td {
vertical-align: bottom;
}
input[type="radio"] {
width: auto;
display: inline-block;
vertical-align: bottom;
}
<table cellpadding="8" class="begoneee" width="100%">
<tr>
<td class="begoneee"> <span class="merah">*</span> Project ID</td>
<td class="begoneee"> <span class="merah">*</span>Project Name</td>
<td class="begoneee">Category</td>
<td class="begoneee">Project Status</td>
<td><label>Project Type:</label><br/>
<input type="radio" name="input3" onclick="streamverify(0)">Upstream<br/>
<input type="radio" name="input3" onclick="streamverify(1)">Downstream<br/>
</td>
</tr>
<tr>
<td class="begoneee"><input type="text" id="proj_id" style="background-color:#f2f2f2" readonly></td>
<td class="begoneee"><input type="text" id="proj_name"></td>
<td class="begoneee">
<select id="category">
<option value="blank"> </option>
<option value="pcd">PCD</option>
<option value="ons">Onshore</option>
<option value="offs">Offshore</option>
<option value="fip">FIP</option>
</select></td>
<td class="begoneee">
<select id="proj_status">
<option value="blank"> </option>
<option value="inpg">In Progress</option>
<option value="comp">Completed</option>
<option value="canc">Cancelled</option>
<option value="oh">On Hold</option>
<option value="exo">Expense Off</option>
<option value="op">Open</option>
<option value="arc">Archived</option></td>
</tr>
<tr>
<td class="begoneee">Region</td>
<td class="begoneee">OPU</td>
<td class="begoneee">Operator/Asset owner</td>
<td class="begoneee">Project Status</td>
<td class="begoneee">Project Phase/Delivery</td>
<td class="begoneee">Project Start Date</td>
<td class="begoneee">Project End Date</td>
</tr>
<tr>
<td class="begoneee">
<select id="region" >
<option value="blank"> </option>
<option value="jda">Joint Development Area</option>
<option value="pm">Pen 2332EDQWSWACF</option>
<option value="sbh">Sabah</option>
<option value="srwk">sarawak</option>
<option value="na">N/A</option>
</select></td>
<td class="begoneee">
<select id="opu">
<option value="blank"> </option>
<option value="pchemical_g">APDAOCIJCMICAC Chemicals Group</option>
<option value="asean">Asean Bintulu Fertiliser Sdn Bhd</option>
<option value="fertilizer">APDAOCIJCMICAC Chemicals Fertilizer Kedah Sdn Bhd</option>
<option value="pchemical_m">APDAOCIJCMICAC Chemicals Marketing (LABUAN) Ltd </option>
<option value="pmetha">APDAOCIJCMICAC Chemicals Methanol Sdn Bhd</option>
<option value="pmtbe">APDAOCIJCMICAC Chemicals MTBE Sdn Bhd</option>
<option value="pmp">Polypropylene (M) Sdn Bhd</option>
<option value="pchemical_e">APDAOCIJCMICAC Chemicals Ethylene Sdn Bhd</option>
<option value="kertih">Kertih Port Sdn. Bhd</option>
<option value="aromatic"> Aromatics 2332EDQWSWACF Sdn Bhd</option>
<option value="pchemical_a">APDAOCIJCMICAC Chemicals Ammonia Sdn Bhd</option>
<option value="pchemical_f"> APDAOCIJCMICAC Chemicals Fertiliser Sabah Sdn Bhd</option>
<option value="pchemical_o"> APDAOCIJCMICAC Chemicals Olefins Sdn Bhd</option>
<option value="pchemical_d">APDAOCIJCMICAC Chemicals Derivatives Sdn Bhd</option>
<option value="pchemical_gg"> APDAOCIJCMICAC Chemicals Glycols Sdn Bhd </option>
<option value="pchemical_ldpe"> APDAOCIJCMICAC Chemicals LDPE Sdn Bhd</option>
<option value="pchemical_cgbp">APDAOCIJCMICAC Chemicals Group Berhad </option>
<option value="p_trg">APDAOCIJCMICAC Penapisan Terengganu Sdn Bhd </option>
<option value="pgb">PGB </option>
<option value="mlng"> MLNG</option>
<option value="pdagangan"> APDAOCIJCMICAC Dagangan Berhad</option>
<option value="my-refining">2332EDQWSWACFn Refining Company Sdn Bhd (MRCSB) </option>
<option value="penapisan">APDAOCIJCMICAC Penapisan (Melaka) Sdn Bhd (PP(M)SB) </option>
<option value="2QEDFCACFZCZ-ober-sea"> APDAOCIJCMICAC 2QEDFCACFZCZ Oversea Sdn Bhd (subsidiaries)</option>
<option value="2QEDFCACFZCZ-sdn"> APDAOCIJCMICAC 2QEDFCACFZCZ Sdn Bhd</option>
<option value="pflng"> PFLNG</option>
</select></td>
<td class="begoneee"><input type="text" name="ccc"></td>
<td class="begoneee"><input type="text" name="proj_status"></td>
<td class="begoneee"><select id="proj_delivery">
<option value="blank"> </option>
<option value="framing">Framing</option>
<option value="fel1">FEL-1</option>
<option value="fel2">FEL-2</option>
<option value="fel3">FEl-3</option>
<option value="fid">FID</option>
<option value="exec">Execution</option>
<option value="stp">Start-up/Cost</option>
<option value="closure">Closure</option>
<option value="abd">Abandonment & Decommissioning</option>
<option value="dev">Development</option>
<option value="exp">Exploration</option>
<option value="intv">Intervation</option>
</td>
<td class="begoneee"><input type="text"></td>
<td class="begoneee"><input type="text"></td>
</tr>
<tr>
<td class="begoneee">Cost Category</td>
<td class="begoneee">Currency</td>
</tr>
<tr>
<td class="begoneee">
<select id="cost_category">
<option value="blank"> </option>
<option value="opex">OPEX</option>
<option value="capex">CAPEX</option>
</td>
</select>
<td class="begoneee">
<select id="currency">
<option value="blank"> </option>
<option value="opex">MYR</option>
<option value="capex">USD</option>
<option value="capex">SGD</option>
<option value="capex">Yen</option>
</td>
</select>
</tr>
</table>
I want to put every dropdown under the th title.
What are my options?
My code is below:
tr {
float: left
}
table {
width: 600px;
}
<table id="CustomerTable">
<thead>
<tr>
<th>No of Puffs </th>
<th>No Per Day </th>
</tr>
</thead>
<tbody>
<td class="dropdown">
<form action="" name="FILTER">
<select name="filter_for_No_of_Puffs">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</form>
</td>
<td class="dropdown">
<form action="" name="FILTER">
<span style="display:inline-block; width: 30px;">
<select name="filter_for_No_Per_Day" >
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</span>
</form>
</td>
</tbody>
</table>
Your css was causing the problem.
float: left on all <td> tags was causing the issue and moving all content to the left irrespective of the table layout.
You have also missed <tr> tags in your <tbody>
P.S. Not sure if the table width of 600px is needed for two columns. So basically removing all your css will fix it.
<body>
<table id="CustomerTable">
<thead>
<tr>
<th>No of Puffs </th>
<th>No Per Day </th>
</tr>
</thead>
<tbody>
<tr>
<td class="dropdown">
<form action="" name="FILTER">
<select name="filter_for_No_of_Puffs" >
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</form>
</td>
<td class="dropdown">
<form action="" name="FILTER">
<span style="display:inline-block; width: 30px;">
<select name="filter_for_No_Per_Day" >
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</span>
</form>
</td>
</tr>
</tbody>
</table>
</body>
I am newbie in this field and in learning stage, I created a HTML form it working great on Desktop and PC. But when i go to mobile devices and talblet the form submit button is not working. Can anybody help me on this. Please see the code below.
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: Please add the following <META> element to your page <HEAD>. -->
<!-- If necessary, please modify the charset parameter to specify the -->
<!-- character set of your HTML page. -->
<!-- ---------------------------------------------------------------------- -->
<!DOCTYPE html>
<html>
<head>
<title>Register Your Interest</title>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<style type="text/css">
.auto-style1 {
color: #FF0000;
}
</style>
</head>
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: Please add the following <FORM> element to your page. -->
<!-- ---------------------------------------------------------------------- -->
<body>
<center>
<form action="https://cs85.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<input type=hidden name="oid" value="00D6E000000D1aw">
<input type="hidden" name="debugEmail" value="jishad.mohamed#reedexpo.ae">
<input type=hidden name="retURL" value="http://www.energyefficiencyexpo.com/">
<input type=hidden name="recordType" value="012200000009ANN">
<!-- RX Industry -->
<input type=hidden name="00N20000001SJtF" value="Other">
<!-- Zip/Postal Code -->
<input type=hidden name="00N20000001PeCx" value="-">
<input type=hidden name="lead_source" value="Web to Lead">
<!-- Data Source -->
<input type=hidden name="00N20000001kiBU" value="Register Your Interest">
<!-- Interest -->
<input type=hidden name="00N20000001Pe42" value="ENEF">
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: These fields are optional debugging elements. Please uncomment -->
<!-- these lines if you wish to test in debug mode. -->
<!-- <input type="hidden" name="debug" value=1> -->
<!-- <input type="hidden" name="debugEmail" -->
<!-- value="jishad.mohamed#reedexpo.ae"> -->
<!-- ---------------------------------------------------------------------- -->
<!--
<tr> <td> </td><td width="5"> </td> <td> </td> </tr>
<tr> <td> </td><td width="5"> </td> <td> </td> </tr>
<tr> <td> </td><td width="5"> </td> <td> </td> </tr>
<tr> <td> </td><td width="5"> </td> <td> </td> </tr>
<tr> <td> </td><td width="5"> </td> <td> </td> </tr>
<tr> <td> </td><td width="5"> </td> <td> </td> </tr>
-->
<table style="font-family:Verdana, Geneva, Tahoma, sans-serif; font-size:14" >
<tr> <td> First Name:<span class="auto-style1">* </span> </td><td width="5"> </td> <td align="left" style="width: 400px"> <input id="first_name" maxlength="40" name="first_name" size="20" type="text" style="width: 250px" required/><br> </td> </tr>
<tr> <td> Last Name:<span class="auto-style1">* </span> </td><td width="5"> </td> <td align="left" style="width: 400px"> <input id="last_name" maxlength="80" name="last_name" size="20" type="text" style="width: 250px" required/><br></td> </tr>
<tr> <td> Title: </td><td width="5"> </td> <td align="left" style="width: 400px"> <input id="title" maxlength="40" name="title" size="20" type="text" style="width: 250px" /><br> </td> </tr>
<tr> <td> Company:<span class="auto-style1">* </span> </td><td width="5"> </td> <td align="left" style="width: 400px"> <input id="company" maxlength="40" name="company" size="20" type="text" style="width: 250px" required /><br></td> </tr>
<tr> <td> Email:<span class="auto-style1">* </span> </td><td width="5"> </td> <td align="left" style="width: 400px"> <input id="email" maxlength="80" name="email" size="20" type="email" style="width: 250px" required/><br></td> </tr>
<tr> <td style="height: 26px"> Phone:<span class="auto-style1">* </span> </td> <td width="5" style="height: 26px"> </td> <td align="left" style="width: 400px; height: 26px;"> <input id="phone" maxlength="40" name="phone" size="20" type="text" style="width: 250px" required/><br></td> </tr>
<tr> <td> Mobile:</td><td width="5"> </td> <td align="left" style="width: 400px"> <input id="mobile" maxlength="40" name="mobile" size="20" type="text" style="width: 250px" /><br></td> </tr>
<tr> <td> City:</td><td width="5"> </td> <td align="left" style="width: 400px"> <input id="00N20000001PeDN" maxlength="120" name="00N20000001PeDN" size="20" type="text" style="width: 250px" /><br></td> </tr>
<tr> <td>Sector:</td><td width="5"> </td> <td align="left" style="width: 250px"> <select style="width:250px; !important; min-width: 250px; max-width: 250px;" id="Sectors__c" name="Sectors__c" title="Sectors">
<option value="">Please Select</option>
<option value="ENEF-Building Env&Material Conduct Perf">Building Envelop and Materials Conductive Performance</option>
<option value="ENEF-Efficient Power Generation">Efficient Power Generation</option>
<option value="ENEF-Elevators and Escalators">Elevators and Escalators</option>
<option value="ENEF-Energy Eff. Building Eng. Prod&Sol">Energy Efficient Building Engineering Products and Solutions</option>
<option value="ENEF-Energy Monitoring Systems">Energy Monitoring Systems</option>
<option value="ENEF-Financial and Building Services">Financial and Building Services</option>
<option value="ENEF-Glazing-Reduced Heat Gain Coeff.">Glazing with Reduced Heat Gain Coefficient</option>
<option value="ENEF-High Efficiency Lighting">High Efficiency Lighting</option>
<option value="ENEF-HVAC Equipment and Systems">HVAC Equipment and Systems</option>
<option value="ENEF-Intelligent Building Management">Intelligent Building Management</option>
<option value="ENEF-Lighting Controls">Lighting Controls</option>
<option value="ENEF-Reduce-Cooling Demand-Passive Strat">Reduced Building Air Leakage Rates</option>
<option value="ENEF-Reduced Building Air Leakage Rates">Reduction of the Cooling Demand Using Passive Strategies</option>
<option value="ENEF-Service Water Heating">Service Water Heating</option>
<option value="ENEF-Smart Grids">Smart Grids</option>
</select><br></td> </tr>
<tr> <td style="height: 26px"> Country:</td><td width="5" style="height: 26px"> </td>
<td align="left" style="width: 250px; height: 26px;"> <select style="width:250px; !important; min-width: 250px; max-width: 250px;" id="00N20000001PeDG" name="00N20000001PeDG" title="Country">
<option value="">Please Select</option>
<option value="AFGHANISTAN">AFGHANISTAN</option>
<option value="ALAND ISLANDS">ALAND ISLANDS</option>
<option value="ALBANIA">ALBANIA</option>
<option value="ALGERIA">ALGERIA</option>
<option value="AMERICAN SAMOA">AMERICAN SAMOA</option>
<option value="ANDORRA">ANDORRA</option>
<option value="ANGOLA">ANGOLA</option>
<option value="ANGUILLA">ANGUILLA</option>
<option value="ANTARCTICA">ANTARCTICA</option>
<option value="ANTIGUA AND BARBUDA">ANTIGUA AND BARBUDA</option>
<option value="ARGENTINA">ARGENTINA</option>
<option value="ARMENIA">ARMENIA</option>
<option value="ARUBA">ARUBA</option>
<option value="AUSTRALIA">AUSTRALIA</option>
<option value="AUSTRIA">AUSTRIA</option>
<option value="AZERBAIJAN">AZERBAIJAN</option>
<option value="BAHAMAS">BAHAMAS</option>
<option value="BAHRAIN">BAHRAIN</option>
<option value="BANGLADESH">BANGLADESH</option>
<option value="BARBADOS">BARBADOS</option>
<option value="BELARUS">BELARUS</option>
<option value="BELGIUM">BELGIUM</option>
<option value="BELIZE">BELIZE</option>
<option value="BENIN">BENIN</option>
<option value="BERMUDA">BERMUDA</option>
<option value="BHUTAN">BHUTAN</option>
<option value="BOLIVIA">BOLIVIA</option>
<option value="BOSNIA AND HERZEGOVINA">BOSNIA AND HERZEGOVINA</option>
<option value="BOTSWANA">BOTSWANA</option>
<option value="BOUVET ISLAND">BOUVET ISLAND</option>
<option value="BRAZIL">BRAZIL</option>
<option value="BRITISH INDIAN OCEAN TERRITORY">BRITISH INDIAN OCEAN TERRITORY</option>
<option value="BRUNEI DARUSSALAM">BRUNEI DARUSSALAM</option>
<option value="BULGARIA">BULGARIA</option>
<option value="BURKINA FASO">BURKINA FASO</option>
<option value="BURUNDI">BURUNDI</option>
<option value="CAMBODIA">CAMBODIA</option>
<option value="CAMEROON">CAMEROON</option>
<option value="CANADA">CANADA</option>
<option value="CAPE VERDE">CAPE VERDE</option>
<option value="CAYMAN ISLANDS">CAYMAN ISLANDS</option>
<option value="CENTRAL AFRICAN REPUBLIC">CENTRAL AFRICAN REPUBLIC</option>
<option value="CHAD">CHAD</option>
<option value="CHILE">CHILE</option>
<option value="CHINA">CHINA</option>
<option value="CHRISTMAS ISLAND">CHRISTMAS ISLAND</option>
<option value="COCOS (KEELING) ISLANDS">COCOS (KEELING) ISLANDS</option>
<option value="COLOMBIA">COLOMBIA</option>
<option value="COMOROS">COMOROS</option>
<option value="CONGO">CONGO</option>
<option value="CONGO, THE DEMOCRATIC REPUBLIC OF THE">CONGO, THE DEMOCRATIC REPUBLIC OF THE</option>
<option value="COOK ISLANDS">COOK ISLANDS</option>
<option value="COSTA RICA">COSTA RICA</option>
<option value="COTE D'IVOIRE">COTE D'IVOIRE</option>
<option value="CROATIA">CROATIA</option>
<option value="CUBA">CUBA</option>
<option value="CURACAO">CURACAO</option>
<option value="CYPRUS">CYPRUS</option>
<option value="CZECH REPUBLIC">CZECH REPUBLIC</option>
<option value="DENMARK">DENMARK</option>
<option value="DJIBOUTI">DJIBOUTI</option>
<option value="DOMINICA">DOMINICA</option>
<option value="DOMINICAN REPUBLIC">DOMINICAN REPUBLIC</option>
<option value="ECUADOR">ECUADOR</option>
<option value="EGYPT">EGYPT</option>
<option value="EL SALVADOR">EL SALVADOR</option>
<option value="EQUATORIAL GUINEA">EQUATORIAL GUINEA</option>
<option value="ERITREA">ERITREA</option>
<option value="ESTONIA">ESTONIA</option>
<option value="ETHIOPIA">ETHIOPIA</option>
<option value="FALKLAND ISLANDS (MALVINAS)">FALKLAND ISLANDS (MALVINAS)</option>
<option value="FAROE ISLANDS">FAROE ISLANDS</option>
<option value="FIJI">FIJI</option>
<option value="FINLAND">FINLAND</option>
<option value="FRANCE">FRANCE</option>
<option value="FRENCH GUIANA">FRENCH GUIANA</option>
<option value="FRENCH POLYNESIA">FRENCH POLYNESIA</option>
<option value="FRENCH SOUTHERN TERRITORIES">FRENCH SOUTHERN TERRITORIES</option>
<option value="GABON">GABON</option>
<option value="GAMBIA">GAMBIA</option>
<option value="GEORGIA">GEORGIA</option>
<option value="GERMANY">GERMANY</option>
<option value="GHANA">GHANA</option>
<option value="GIBRALTAR">GIBRALTAR</option>
<option value="GREECE">GREECE</option>
<option value="GREENLAND">GREENLAND</option>
<option value="GRENADA">GRENADA</option>
<option value="GUADELOUPE">GUADELOUPE</option>
<option value="GUAM">GUAM</option>
<option value="GUATEMALA">GUATEMALA</option>
<option value="GUERNSEY">GUERNSEY</option>
<option value="GUINEA">GUINEA</option>
<option value="GUINEA-BISSAU">GUINEA-BISSAU</option>
<option value="GUYANA">GUYANA</option>
<option value="HAITI">HAITI</option>
<option value="HEARD ISLAND AND MCDONALD ISLANDS">HEARD ISLAND AND MCDONALD ISLANDS</option>
<option value="HOLY SEE (VATICAN CITY STATE)">HOLY SEE (VATICAN CITY STATE)</option>
<option value="HONDURAS">HONDURAS</option>
<option value="HONG KONG">HONG KONG</option>
<option value="HUNGARY">HUNGARY</option>
<option value="ICELAND">ICELAND</option>
<option value="INDIA">INDIA</option>
<option value="INDONESIA">INDONESIA</option>
<option value="IRAN, ISLAMIC REPUBLIC OF">IRAN, ISLAMIC REPUBLIC OF</option>
<option value="IRAQ">IRAQ</option>
<option value="IRELAND">IRELAND</option>
<option value="ISLE OF MAN">ISLE OF MAN</option>
<option value="ISRAEL">ISRAEL</option>
<option value="ITALY">ITALY</option>
<option value="JAMAICA">JAMAICA</option>
<option value="JAPAN">JAPAN</option>
<option value="JERSEY">JERSEY</option>
<option value="JORDAN">JORDAN</option>
<option value="KAZAKHSTAN">KAZAKHSTAN</option>
<option value="KENYA">KENYA</option>
<option value="KIRIBATI">KIRIBATI</option>
<option value="KOREA, DEMOCRATIC PEOPLE'S REPUBLIC OF">KOREA, DEMOCRATIC PEOPLE'S REPUBLIC OF</option>
<option value="KOSOVO">KOSOVO</option>
<option value="KUWAIT">KUWAIT</option>
<option value="KYRGYZSTAN">KYRGYZSTAN</option>
<option value="LAO PEOPLE'S DEMOCRATIC REPUBLIC">LAO PEOPLE'S DEMOCRATIC REPUBLIC</option>
<option value="LATVIA">LATVIA</option>
<option value="LEBANON">LEBANON</option>
<option value="LESOTHO">LESOTHO</option>
<option value="LIBERIA">LIBERIA</option>
<option value="LIBYA">LIBYA</option>
<option value="LIECHTENSTEIN">LIECHTENSTEIN</option>
<option value="LITHUANIA">LITHUANIA</option>
<option value="LUXEMBOURG">LUXEMBOURG</option>
<option value="MACAO">MACAO</option>
<option value="MACEDONIA, THE FORMER YUGOSLAV REPUBLIC OF">MACEDONIA, THE FORMER YUGOSLAV REPUBLIC OF</option>
<option value="MADAGASCAR">MADAGASCAR</option>
<option value="MALAWI">MALAWI</option>
<option value="MALAYSIA">MALAYSIA</option>
<option value="MALDIVES">MALDIVES</option>
<option value="MALI">MALI</option>
<option value="MALTA">MALTA</option>
<option value="MARSHALL ISLANDS">MARSHALL ISLANDS</option>
<option value="MARTINIQUE">MARTINIQUE</option>
<option value="MAURITANIA">MAURITANIA</option>
<option value="MAURITIUS">MAURITIUS</option>
<option value="MAYOTTE">MAYOTTE</option>
<option value="MEXICO">MEXICO</option>
<option value="MICRONESIA, FEDERATED STATES OF">MICRONESIA, FEDERATED STATES OF</option>
<option value="MOLDOVA, REPUBLIC OF">MOLDOVA, REPUBLIC OF</option>
<option value="MONACO">MONACO</option>
<option value="MONGOLIA">MONGOLIA</option>
<option value="MONTENEGRO">MONTENEGRO</option>
<option value="MONTSERRAT">MONTSERRAT</option>
<option value="MOROCCO">MOROCCO</option>
<option value="MOZAMBIQUE">MOZAMBIQUE</option>
<option value="MYANMAR">MYANMAR</option>
<option value="NAMIBIA">NAMIBIA</option>
<option value="NAURU">NAURU</option>
<option value="NEPAL">NEPAL</option>
<option value="NETHERLANDS">NETHERLANDS</option>
<option value="NETHERLANDS ANTILLES">NETHERLANDS ANTILLES</option>
<option value="NEW CALEDONIA">NEW CALEDONIA</option>
<option value="NEW ZEALAND">NEW ZEALAND</option>
<option value="NICARAGUA">NICARAGUA</option>
<option value="NIGER">NIGER</option>
<option value="NIGERIA">NIGERIA</option>
<option value="NIUE">NIUE</option>
<option value="NORFOLK ISLAND">NORFOLK ISLAND</option>
<option value="NORTHERN MARIANA ISLANDS">NORTHERN MARIANA ISLANDS</option>
<option value="NORWAY">NORWAY</option>
<option value="OMAN">OMAN</option>
<option value="PAKISTAN">PAKISTAN</option>
<option value="PALAU">PALAU</option>
<option value="PALESTINIAN TERRITORIES">PALESTINIAN TERRITORIES</option>
<option value="PANAMA">PANAMA</option>
<option value="PAPUA NEW GUINEA">PAPUA NEW GUINEA</option>
<option value="PARAGUAY">PARAGUAY</option>
<option value="PERU">PERU</option>
<option value="PHILIPPINES">PHILIPPINES</option>
<option value="PITCAIRN">PITCAIRN</option>
<option value="POLAND">POLAND</option>
<option value="PORTUGAL">PORTUGAL</option>
<option value="PUERTO RICO">PUERTO RICO</option>
<option value="QATAR">QATAR</option>
<option value="REUNION">REUNION</option>
<option value="ROMANIA">ROMANIA</option>
<option value="RUSSIAN FEDERATION">RUSSIAN FEDERATION</option>
<option value="RWANDA">RWANDA</option>
<option value="SAINT BARTHELEMY">SAINT BARTHELEMY</option>
<option value="SAINT HELENA">SAINT HELENA</option>
<option value="SAINT KITTS AND NEVIS">SAINT KITTS AND NEVIS</option>
<option value="SAINT LUCIA">SAINT LUCIA</option>
<option value="SAINT MARTIN">SAINT MARTIN</option>
<option value="SAINT PIERRE AND MIQUELON">SAINT PIERRE AND MIQUELON</option>
<option value="SAINT VINCENT AND THE GRENADINES">SAINT VINCENT AND THE GRENADINES</option>
<option value="SAMOA">SAMOA</option>
<option value="SAN MARINO">SAN MARINO</option>
<option value="SAO TOME AND PRINCIPE">SAO TOME AND PRINCIPE</option>
<option value="SAUDI ARABIA">SAUDI ARABIA</option>
<option value="SENEGAL">SENEGAL</option>
<option value="SERBIA">SERBIA</option>
<option value="SEYCHELLES">SEYCHELLES</option>
<option value="SIERRA LEONE">SIERRA LEONE</option>
<option value="SINGAPORE">SINGAPORE</option>
<option value="SLOVAKIA">SLOVAKIA</option>
<option value="SLOVENIA">SLOVENIA</option>
<option value="SOLOMON ISLANDS">SOLOMON ISLANDS</option>
<option value="SOMALIA">SOMALIA</option>
<option value="SOUTH AFRICA">SOUTH AFRICA</option>
<option value="SOUTH GEORGIA AND THE SOUTH SANDWICH ISLANDS">SOUTH GEORGIA AND THE SOUTH SANDWICH ISLANDS</option>
<option value="SOUTH KOREA">SOUTH KOREA</option>
<option value="SPAIN">SPAIN</option>
<option value="SRI LANKA">SRI LANKA</option>
<option value="SUDAN">SUDAN</option>
<option value="SURINAME">SURINAME</option>
<option value="SVALBARD AND JAN MAYEN">SVALBARD AND JAN MAYEN</option>
<option value="SWAZILAND">SWAZILAND</option>
<option value="SWEDEN">SWEDEN</option>
<option value="SWITZERLAND">SWITZERLAND</option>
<option value="SYRIAN ARAB REPUBLIC">SYRIAN ARAB REPUBLIC</option>
<option value="TAIWAN">TAIWAN</option>
<option value="TAJIKISTAN">TAJIKISTAN</option>
<option value="TANZANIA, UNITED REPUBLIC OF">TANZANIA, UNITED REPUBLIC OF</option>
<option value="THAILAND">THAILAND</option>
<option value="TIMOR-LESTE">TIMOR-LESTE</option>
<option value="TOGO">TOGO</option>
<option value="TOKELAU">TOKELAU</option>
<option value="TONGA">TONGA</option>
<option value="TRINIDAD AND TOBAGO">TRINIDAD AND TOBAGO</option>
<option value="TUNISIA">TUNISIA</option>
<option value="TURKEY">TURKEY</option>
<option value="TURKMENISTAN">TURKMENISTAN</option>
<option value="TURKS AND CAICOS ISLANDS">TURKS AND CAICOS ISLANDS</option>
<option value="TUVALU">TUVALU</option>
<option value="UGANDA">UGANDA</option>
<option value="UKRAINE">UKRAINE</option>
<option value="UNITED ARAB EMIRATES">UNITED ARAB EMIRATES</option>
<option value="UNITED KINGDOM">UNITED KINGDOM</option>
<option value="UNITED STATES">UNITED STATES</option>
<option value="UNITED STATES MINOR OUTLYING ISLANDS">UNITED STATES MINOR OUTLYING ISLANDS</option>
<option value="URUGUAY">URUGUAY</option>
<option value="UZBEKISTAN">UZBEKISTAN</option>
<option value="VANUATU">VANUATU</option>
<option value="VENEZUELA">VENEZUELA</option>
<option value="VIETNAM">VIETNAM</option>
<option value="VIRGIN ISLANDS, BRITISH">VIRGIN ISLANDS, BRITISH</option>
<option value="VIRGIN ISLANDS, U.S.">VIRGIN ISLANDS, U.S.</option>
<option value="WALLIS AND FUTUNA">WALLIS AND FUTUNA</option>
<option value="WESTERN SAHARA">WESTERN SAHARA</option>
<option value="YEMEN">YEMEN</option>
<option value="ZAMBIA">ZAMBIA</option>
<option value="ZIMBABWE">ZIMBABWE</option>
</select><br></td> </tr>
</table>
<input type="submit" name="submit" value="Submit">
</form>
</center>
</body>
</html>
I am trying to align a table next to image, which has text aligned with it currently. I want to have the dropdowns align with the lower edge of the image, can anyone assist me with this? Here is my code.
<input type="image" src="image.jpg" name="tee" width="180" height="180" ALIGN="center">xxxxxx
<table>
<tr><td><input type="hidden" name="on0" value="Color">Color</td><td><input type="hidden" name="on1" value="Size">Size</td></tr>
<tr>
<td><select name="os0">
<option value="White">White</option>
<option value="Black">Black</option>
<option value="Grey">Grey</option>
</select> </td>
<td><select name="os1">
<option value="S">S </option>
<option value="M">M </option>
<option value="L">L </option>
<option value="XL">XL </option>
</select> </td>
</tr>
Based on your description, this is the best I could come up with using CSS to style it.
<style>
div {height: 180px;
width: 300px;}
#image {
float:left;
}
table { float:right;
margin-top: 130px;
}
</style>
<div>
<input id="image" type="image" src="image.jpg" name="tee" width="180" height="180" ALIGN="center">
<table>
<tr><td><input type="hidden" name="on0" value="Color">Color</td><td><input type="hidden" name="on1" value="Size">Size</td></tr>
<tr>
<td><select name="os0">
<option value="White">White</option>
<option value="Black">Black</option>
<option value="Grey">Grey</option>
</select> </td>
<td><select name="os1">
<option value="S">S </option>
<option value="M">M </option>
<option value="L">L </option>
<option value="XL">XL </option>
</select> </td>
</tr></table></div>
But you can also fix the issue by using a table and then vertically aligning the contents of the second cell in the row to the bottom.
<table><tr><td>
<input id="image" type="image" src="image.jpg" name="tee" width="180" height="180" ALIGN="center"></td>
<td valign="bottom"> <!-- This line right here is what does the trick -->
<table>
<tr><td><input type="hidden" name="on0" value="Color">Color</td><td><input type="hidden" name="on1" value="Size">Size</td></tr>
<tr>
<td><select name="os0">
<option value="White">White</option>
<option value="Black">Black</option>
<option value="Grey">Grey</option>
</select> </td>
<td><select name="os1">
<option value="S">S </option>
<option value="M">M </option>
<option value="L">L </option>
<option value="XL">XL </option>
</select> </td>
</tr></table>
</td></tr>
</table>
hope this helps!
Maybe you should go for the CSS3 , It has a lot properties like left , right or top .
I do not know css completely but their are a lot of tutorials on the internet.
I am trying to align two text fields for a t-shirt website, I would like the select fields to be side-by-side and they appear on top of each other. Any help would be appreciated.
<table>
<tr><td><input type="hidden" name="on0" value="Color">Color</td></tr><tr><td><select name="os0">
<option value="White">White</option>
<option value="Black">Black</option>
<option value="Grey">Grey</option>
</select> </td></tr>
<tr><td><input type="hidden" name="on1" value="Size">Size</td></tr><tr><td><select name="os1">
<option value="S">S </option>
<option value="M">M </option>
<option value="L">L </option>
<option value="XL">XL </option>
</select> </td></tr>
</table>
You mixed up the use of <tr> and <td>. The way I always remember is <tr> is TABLE ROW ... Rows are always horizontal and columns hold things, like Greek Towers, up vertically. Hope this helps.
<table>
<tr><td><input type="hidden" name="on0" value="Color">Color</td><td><input type="hidden" name="on1" value="Size">Size</td></tr>
<tr>
<td><select name="os0">
<option value="White">White</option>
<option value="Black">Black</option>
<option value="Grey">Grey</option>
</select> </td>
<td><select name="os1">
<option value="S">S </option>
<option value="M">M </option>
<option value="L">L </option>
<option value="XL">XL </option>
</select> </td>
</tr>
</table>