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> FIELD 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> FIELD 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> FIELD 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> FIELD 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> FIELD 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> FIELD 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> FIELD 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> FIELD 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> FIELD 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.
Related
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>
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>
I have 7 dropdowns in my webpage, I want to display lable tag side by and the dropdown below the respective lable.How to do this.
For example,
Filename
<option>1..</option>
<option>2..</option>
<option>3..</option>
<option>4..</option>
<select>
Browser
<option>chrome</option>
<option>firefox</option>
<option>...</option>
<option>...</option>
Here, I want to display as below,
Filename Browser .. .. ..
dropdown dropdown dropdown .. ..
how to do this?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Filename</th>
<th>Browser</th>
<th>Value3</th>
<th>Value4</th>
<th>Value5</th>
<th>Value6</th>
<th>Value7</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
<td>
<select name="browser">
<option>Chrome</option>
<option>Firefox</option>
<option>IE</option>
</select>
</td>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Filename</th>
<th>Browser</th>
<th>Value3</th>
<th>Value4</th>
<th>Value5</th>
<th>Value6</th>
<th>Value7</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
<td>
<select name="browser">
<option>Chrome</option>
<option>Firefox</option>
<option>IE</option>
</select>
</td>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
You just need to wrap your selectelement inside a label. Then to put them side by side you need to use display: inline-block for <label>tags, and display: block for <select> tags.
label { display: inline-block }
select { display: block }
<label>Filename
<select>
<option>option one</option>
<option>option two</option>
</select>
</label>
<label>Browser
<select>
<option>option one</option>
<option>option two</option>
</select>
</label>
Try putting everything inside a table like shown below. The reason I am not using a table element but a div styled like a table is for possible responsive purposes.
HTML:
<div class="table">
<div class="cell">
<label>Filename</label>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
<div class="cell">
<label>Browser</label>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
...
</div>
CSS:
.table {
display:table;
table-layout:fixed; /* this will make all your cells equal*/
}
.cell {
display:table-cell;
}
Here is a working jsfiddle: https://jsfiddle.net/scooterlord/19pbq1cc/
Depending on your label sizes you might want to add to the .cell css:
.cell {
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
Also, for the select styling to make them all equal:
select {
display:block;
width:100%;
}
Updated fiddle here: https://jsfiddle.net/scooterlord/19pbq1cc/1/
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>
I am trying to add a drop down box in a table as a part of registration form.
Here is my code below :-
<html>
<body></body>
<h1>Cab</h1>
<TABLE BORDER="0">
<TR>
<TD>Name</TD>
<TD ALIGN="left"><INPUT TYPE="text" SIZE="25" NAME="fname">
</TD>
</TR>
<TR>
<TD>Phone Number</TD>
<TD ALIGN="left"><INPUT TYPE="text" SIZE="25" NAME="phnnum">
</TD>
</TR>
<TR>
<TD class = "select">Online Password (Repeated)
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<TD ALIGN="center"></TD>
</TD>
</TR>
</TABLE>
<INPUT TYPE="submit" VALUE="Submit">
<INPUT TYPE="reset" VALUE="Clear">
</html>
When I do this the drop down box doesn't come in a format as the other fields come.
I want the drop down box right below the Text Field above it.
its because you have put "Online Password (Repeated)" text and drop down in a same column td
and the second TD is blank..
<TR>
<TD class = "select">Online Password (Repeated)
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<TD ALIGN="center"></TD>
</TD>
</TR>
replace above code with below
<TR>
<TD class = "select">Online Password (Repeated)
</TD>
<TD ALIGN="center">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</TD>
</TR>
I hope u can now find where u made mistake
check the jsfiddle
<html>
<body>
<h1>Cab</h1>
<TABLE BORDER="0">
<TR>
<TD>Name</TD>
<TD ALIGN="left">
<INPUT TYPE="text" SIZE="25" NAME="fname">
</TD>
</TR>
<TR>
<TD>Phone Number</TD>
<TD ALIGN="left">
<INPUT TYPE="text" SIZE="25" NAME="phnnum">
</TD>
</TR>
<TR>
<TD>Online Password (Repeated)</TD>
<TD ALIGN="left">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</TD>
</TR>
</TABLE>
<INPUT TYPE="submit" VALUE="Submit">
<INPUT TYPE="reset" VALUE="Clear">
</body>
</html>