Align 2 tables horizontally HTML - html

i am trying to align my tables horizontally. i put them into a same div like so. i also tried to use: inline-block for each table but its does not work. The "colours" table always stay at the bottom and not on the same line as the "parts" table
<div id="tables">
<table class="parts">
<caption>CUSTOMISABLE PARTS</caption>
<tr>
<td>
<label>Frame Size:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">46cm 5'1" - 5'5"</option>
<option value="2">49cm 5'3" - 5'8"</option>
<option value="3">50cm 5'4" - 5'8"</option>
<option value="4">54cm 5'8" - 5'11"</option>
<option value="5">58cm 5'10" - 6'2"</option>
<option value="6">59cm 5'11" - 6'2"</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Battery Size:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Large battery</option>
<option value="2">Medium battery</option>
<option value="3">Large battery</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Speed Type:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Fix Cog</option>
<option value="2">Changable Cog</option>
<option value="3">Freewheel</option>
<option value="3">8-Speed</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Seats Size:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Small</option>
<option value="2">Medium</option>
<option value="3">Large</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Rear Break:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Rim type:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Standard</option>
<option value="2">Sport</option>
</select>
</div>
</td>
</tr>
</table>
<table class="colours">
<caption>CHOOSE YOUR COLOURS</caption>
<tr>
<td>
<label>Frame:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">46cm 5'1" - 5'5"</option>
<option value="2">49cm 5'3" - 5'8"</option>
<option value="3">50cm 5'4" - 5'8"</option>
<option value="4">54cm 5'8" - 5'11"</option>
<option value="5">58cm 5'10" - 6'2"</option>
<option value="6">59cm 5'11" - 6'2"</option>
</select>
</div>
</td>
</tr>
</table>
But it turned out like this
my CSS code:
.parts {
font-family: arial;
font-size: 20px;
margin-left: 20px;
width: 33.3%;
margin-bottom: 15px;
height: auto;
}
.parts caption {
margin-top: 10px;
font-family: arial;
font-size: 30px;
font-weight: bold;
border: 2px solid black;
padding-left: 4px;
text-align: center;
}
.Options select {
font-size: 15px;
border-color:#999;
float: left;
width: 200px;
}
.colours {
font-family: arial;
font-size: 20px;
margin-left: 36%;
position: relative;
margin-top: 0px;
}


You could use display: inline-table on the two child tables, as shown below.
You need to think about how best to deal with the table captions so get the styling
that you want.
.parts {
font-family: arial;
font-size: 20px;
margin-left: 20px;
width: 33.3%;
margin-bottom: 15px;
height: auto;
}
.parts caption {
margin-top: 10px;
font-family: arial;
font-size: 30px;
font-weight: bold;
border: 2px solid black;
padding-left: 4px;
text-align: center;
}
.Options select {
font-size: 15px;
border-color: #999;
float: left;
width: 200px;
}
.colours {
font-family: arial;
font-size: 20px;
margin-left: 20px; /* adjust as neeeded */
position: relative; /* not needed */
margin-top: 0px;
}
#tables {
border: 1px dotted blue; /* for demo only */
}
#tables table {
display: inline-table;
border: 1px dotted gray;
vertical-align: top; /* you need to decide how best to align the child tables */
}
<div id="tables">
<table class="parts">
<caption>CUSTOMISABLE PARTS</caption>
<tr>
<td>
<label>Frame Size:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">46cm 5'1" - 5'5"</option>
<option value="2">49cm 5'3" - 5'8"</option>
<option value="3">50cm 5'4" - 5'8"</option>
<option value="4">54cm 5'8" - 5'11"</option>
<option value="5">58cm 5'10" - 6'2"</option>
<option value="6">59cm 5'11" - 6'2"</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Battery Size:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Large battery</option>
<option value="2">Medium battery</option>
<option value="3">Large battery</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Speed Type:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Fix Cog</option>
<option value="2">Changable Cog</option>
<option value="3">Freewheel</option>
<option value="3">8-Speed</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Seats Size:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Small</option>
<option value="2">Medium</option>
<option value="3">Large</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Rear Break:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Rim type:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Standard</option>
<option value="2">Sport</option>
</select>
</div>
</td>
</tr>
</table>
<table class="colours">
<caption>CHOOSE YOUR COLOURS</caption>
<tr>
<td>
<label>Frame:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">46cm 5'1" - 5'5"</option>
<option value="2">49cm 5'3" - 5'8"</option>
<option value="3">50cm 5'4" - 5'8"</option>
<option value="4">54cm 5'8" - 5'11"</option>
<option value="5">58cm 5'10" - 6'2"</option>
<option value="6">59cm 5'11" - 6'2"</option>
</select>
</div>
</td>
</tr>
</table>
</div>

Related

Table - Update cell on current row

I am trying to update cell 1 of current row with the value from Select.
I know if I change the $(this).closest('tr') with a number, it will affect that row, but it would not trigger for that current row.
function currentrow(number) {
document.getElementById('mytable').rows[$(this).closest('tr')].cells[1].innerHTML = number;
}
<table id="mytable">
<tr>
<td>
<select name="column()" onchange="currentrow(this.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
</select>
</td>
<td>
3
</td>
</tr>
<tr>
<td>
<select name="column()" onchange="currentrow(this.value)">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
</td>
<td>
2
</td>
</tr>
</table>

I hope following Answers Will help you
function currentrow(element) {
element.parentNode.nextElementSibling.innerHTML = element.value;
}
<table id="mytable">
<tr>
<td>
<select name="column()" onchange="currentrow(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
</select>
</td>
<td>
3
</td>
</tr>
<tr>
<td>
<select name="column()" onchange="currentrow(this)">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
</td>
<td>
2
</td>
</tr>
</table>
Detail View
Here I split above mentioned JS code into multiple line.
function currentrow(element) {
var selectedValue = element.value, // get selected value
parentCell = element.parentNode, // get parent td element
nextTargetCell = parentCell.nextElementSibling; // get next td element
// set next td element value with selected value
nextTargetCell.innerHTML = selectedValue;
}
<table id="mytable">
<tr>
<td>
<select name="column()" onchange="currentrow(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
</select>
</td>
<td>
3
</td>
</tr>
<tr>
<td>
<select name="column()" onchange="currentrow(this)">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
</td>
<td>
2
</td>
</tr>
</table>

Change alignment and remove spaces in between tr and td

Hi am designing a form where I have a table and inside that table, I have a nested table too.
Let me show you the code,
<table class="quiz-template-table">
<tbody>
<tr>
<td class="title">Header Text</td>
<td class="title-data">
<input type="text" name="name" id="txt01"/>
</td>
</tr>
<tr>
<td>
<table id="tblHeaderPosition">
<tr class="header-position">
<td colspan="2">Specify Position And Styles</td>
</tr>
<tr class="position members">
<td>Position </td>
<td>
<select name="Position">
<option value="Top-Left">Top-Left</option>
<option value="Top-Center">Top-Center</option>
<option value="Top-Right">Top-Right</option>
<option value="Middle-Left">Middle-Left</option>
<option value="Middle-Center">Middle-Center</option>
<option value="Middle-Right">Middle-Right</option>
<option value="Middle-Left">Bottom-Left</option>
<option value="Middle-Center">Bottom-Center</option>
<option value="Middle-Right">Bottom-Right</option>
</select>
</td>
</tr>
<tr class="position members">
<td>Font Name</td>
<td>
<select name="Font">
<option value="1">Font-1</option>
<option value="2">Font-2</option>
<option value="3">Font-3</option>
<option value="4">Font-4</option>
<option value="5">Font-5</option>
</select>
</td>
</tr>
<tr class="position members">
<td>Font Style</td>
<td style="width: 2%">
<select name="Font-Style">
<option value="bold">Bold</option>
<option value="italics">Italics</option>
<option value="italics">Combine</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="title">Sub Header Text</td>
<td class="title-data">
<input type="text" name="name1" id="txt02"/>
</td>
</tr>
<tr>
<td class="title">Subject</td>
<td class="title-data">
<input type="text" name="name1" id="txt03" />
</td>
</tr>
</tbody>
</table>
Now, If I remove the nested table then all the alignment and spacing between <td> s are displaying as expected
let me show you that,
Now If I put the nested table then, there are some spaces are there in between them,
as you could see there are alot of spaces between these <td> s are there and also ,
If you hide the nested table then,
as you could see there are some spaces in between Specify Position and styles and Subheader Text..
What I want to achieve:
Please also note that, I have posted this problem over here.
Please have a look at it and it would be nice If I get any solution regarding this.
Update :
As You could see there is a huge gap between label and textbox
I want to minimize the gap just like this
Thanks and Regards

I'm not very much clear with your question but are looking for something like this:
$('.header-position').click(function () {
if ($(this).hasClass("collapsed")) {
$(this).nextUntil('tr.header-position')
.find('td')
.parent()
.find('td > div')
.slideDown("fast", function () {
var $set = $(this);
$set.replaceWith($set.contents());
});
$(this).removeClass("collapsed");
} else {
$(this).nextUntil('tr.header-position')
.find('td')
.wrapInner('<div style="display: block;" />')
.parent()
.find('td > div')
.slideUp("fast");
$(this).addClass("collapsed");
}
});
table {
border-collapse: collapse;
}
.title{
color: #8f8f8f;
font-size: 10px;
margin: 20px 0 5px;
letter-spacing: .7px;
text-transform: uppercase;
}
.quiz-template-table td {
border: 1px solid #f5f5f5;
padding: 10px;
vertical-align: top;
}
.header-position {
font-size: 25px;
font-family: cursive;
background-color: lightgray;
cursor: pointer;
}
.members {
font-family: helvetica;
}
tr.header-position.collapsed ~ .members > td {
padding: 0;
border: 0;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<table class="quiz-template-table">
<tbody>
<tr>
<td class="title">Header Text</td>
<td class="title-data">
<input type="text" name="name" id="txt01"/>
</td>
</tr>
<tr>
<td colspan="2">
<table id="tblHeaderPosition">
<tr class="header-position">
<td colspan="2">Specify Position And Styles</td>
</tr>
<tr class="position members">
<td>Position </td>
<td>
<select name="Position">
<option value="Top-Left">Top-Left</option>
<option value="Top-Center">Top-Center</option>
<option value="Top-Right">Top-Right</option>
<option value="Middle-Left">Middle-Left</option>
<option value="Middle-Center">Middle-Center</option>
<option value="Middle-Right">Middle-Right</option>
<option value="Middle-Left">Bottom-Left</option>
<option value="Middle-Center">Bottom-Center</option>
<option value="Middle-Right">Bottom-Right</option>
</select>
</td>
</tr>
<tr class="position members">
<td>Font Name</td>
<td>
<select name="Font">
<option value="Top-Left">Top-Left</option>
<option value="Top-Center">Top-Center</option>
<option value="Top-Right">Top-Right</option>
<option value="Middle-Left">Middle-Left</option>
<option value="Middle-Center">Middle-Center</option>
<option value="Middle-Right">Middle-Right</option>
<option value="Middle-Left">Bottom-Left</option>
<option value="Middle-Center">Bottom-Center</option>
<option value="Middle-Right">Bottom-Right</option>
</select>
</td>
</tr>
<tr class="position members">
<td>Font Style</td>
<td style="width: 2%">
<select name="Font-Style">
<option value="bold">Bold</option>
<option value="italics">Italics</option>
<option value="italics">Combine</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="title">Sub Header Text</td>
<td class="title-data">
<input type="text" name="name1" id="txt02"/>
</td>
</tr>
<tr>
<td class="title">Subject</td>
<td class="title-data">
<input type="text" name="name1" id="txt03" />
</td>
</tr>
</tbody>
</table>

Try this:
<td colspan="2">
<table id="tblHeaderPosition" >
<tr class="header-position"></tr></table></td>
Where you are starting new table there in the td tag, add colspan=2.

You can achieve this using css. Please review my code carefully.
I'm just added this css
tr.header-position.collapsed ~ .members > td {padding: 0; border: 0;}
When your collapsed is open then we need to hide padding and border. Let me know if you have further clarification.
$('.header-position').click(function () {
if ($(this).hasClass("collapsed")) {
$(this).nextUntil('tr.header-position')
.find('td')
.parent()
.find('td > div')
.slideDown("fast", function () {
var $set = $(this);
$set.replaceWith($set.contents());
});
$(this).removeClass("collapsed");
} else {
$(this).nextUntil('tr.header-position')
.find('td')
.wrapInner('<div style="display: block;" />')
.parent()
.find('td > div')
.slideUp("fast");
$(this).addClass("collapsed");
}
});
.title{
color: #8f8f8f;
font-size: 10px;
margin: 20px 0 5px;
letter-spacing: .7px;
text-transform: uppercase;
}
.quiz-template-table td {
border: 1px solid #f5f5f5;
padding: 10px;
vertical-align: top;
}
.header-position {
font-size: 25px;
font-family: cursive;
background-color: lightgray;
cursor: pointer;
}
.members {
font-family: helvetica;
}
tr.header-position.collapsed ~ .members > td {
padding: 0;
border: 0;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<table class="quiz-template-table">
<tbody>
<tr>
<td class="title">Header Text</td>
<td class="title-data">
<input type="text" name="name" id="txt01"/>
</td>
</tr>
<tr>
<td>
<table id="tblHeaderPosition">
<tr class="header-position">
<td colspan="2">Specify Position And Styles</td>
</tr>
<tr class="position members">
<td>Position </td>
<td>
<select name="Position">
<option value="Top-Left">Top-Left</option>
<option value="Top-Center">Top-Center</option>
<option value="Top-Right">Top-Right</option>
<option value="Middle-Left">Middle-Left</option>
<option value="Middle-Center">Middle-Center</option>
<option value="Middle-Right">Middle-Right</option>
<option value="Middle-Left">Bottom-Left</option>
<option value="Middle-Center">Bottom-Center</option>
<option value="Middle-Right">Bottom-Right</option>
</select>
</td>
</tr>
<tr class="position members">
<td>Font Name</td>
<td>
<select name="Font">
<option value="Top-Left">Top-Left</option>
<option value="Top-Center">Top-Center</option>
<option value="Top-Right">Top-Right</option>
<option value="Middle-Left">Middle-Left</option>
<option value="Middle-Center">Middle-Center</option>
<option value="Middle-Right">Middle-Right</option>
<option value="Middle-Left">Bottom-Left</option>
<option value="Middle-Center">Bottom-Center</option>
<option value="Middle-Right">Bottom-Right</option>
</select>
</td>
</tr>
<tr class="position members">
<td>Font Style</td>
<td style="width: 2%">
<select name="Font-Style">
<option value="bold">Bold</option>
<option value="italics">Italics</option>
<option value="italics">Combine</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="title">Sub Header Text</td>
<td class="title-data">
<input type="text" name="name1" id="txt02"/>
</td>
</tr>
<tr>
<td class="title">Subject</td>
<td class="title-data">
<input type="text" name="name1" id="txt03" />
</td>
</tr>
</tbody>
</table>

Align Label at top left input form

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>

Centering table within CSS

I am trying to center tables within my form and ran into a stumbling block. I finally have the tables on 1 row, but now need to get them centered without success. I am not sure whether the problem starts with the fact that I have display: none. Please help me with this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="en"/>
<style type="text/css">
table { border: 1px solid white; width: 100%; }
#tabler1
{
border: 1px solid cyan;
width: 30%;
float: left;
}
#tabler2
{
border: 1px solid yellow;
width: 30%;
float: left;
}
#tabler3
{
border: 1px solid blue;
width: 30%;
float: left;
}
</style>
<title>Test Page</title>
</head>
<body>
<form method="POST" action="--WEBBOT-SELF--">
<table border="1" width="100%" bordercolor="#008000" id="table1">
<tr>
<td>
<input type=button VALUE="ADVANCED SEARCH">
</td>
</tr>
<tr>
<td id="tabler1">
<table width="100%" name="police_response1" >
<tr>
<th colspan="2">Table1</th>
</tr>
<td>&nbspFIELD TEXT11</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
<tr>
<td>&nbspFIELD TEXT12</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
<tr>
<td>&nbspFIELD TEXT13</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
</table>
</td>
<td id="tabler2">
<table width="100%" name="police_response1" >
<tr>
<th colspan="2">Table2</th>
</tr>
<td>&nbspFIELD TEXT21</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
<tr>
<td>&nbspFIELD TEXT22</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
<tr>
<td>&nbspFIELD TEXT23</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
</table>
</td>
<td id="tabler3">
<table width="100%" name="police_response1" >
<tr>
<th colspan="2">Table3</th>
</tr>
<td>&nbspFIELD TEXT31</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
<tr>
<td>&nbspFIELD TEXT32</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
<tr>
<td>&nbspFIELD TEXT33</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div style="clear:both;"></div>
</form>
</body></html>
http://jsfiddle.net/pepelepe/CyqBn/5/

Depends on what you really want to get centered.
You can center content of those 3 tables with adding text-align: center; into the table in css style like this:
table {
border: 1px solid white;
width: 100%;
text-align: center;
}
This will center everything inside every of those 3 tables.
Or you can center the whole form - for example put <div class="master"> just after <body> tag and </div> after the </form> tag. Then into your stylesheet put this:
.master {
margin: 0px auto;
}
This should center the form itself in the document.

Aligning table with an image 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.