Tables inside a form - placing elements vertically instead of horizontally - html

I'm working on an assignment in which the desired output is something along the lines of:
I have been told we are to use a table to do this.
Mine (yet to apply any CSS) looks like:
My code looks like this:
<table>
<tr>
<td>
<table border="0">
<td>
<select name="Continent">
<option value="North America">North America</option>
<option value="South America">South America</option>
<option value="Asia">Asia</option>
</select>
</td>
<td>
<select name="Country">
<option value="Canada">Canada</option>
<option value="Other">Other</option>
</select>
</td>
<td>
<select name="City">
<option value="Ottawa">Ottawa</option>
<option value="New York">New York</option>
<option value="Sydney">Sydney</option>
</select>
</td>
</table>
</td>
<td>
<table>
<td>Checkboxes</td>
</table>
</td>
</tr>
</table>
So I guess my question is: How do I get the drop-down lists to stack vertically? I have tried putting them in their own <tr> elements, but that does nothing, it just changes the spacing between them slightly.
Do I need to go with the two table approach with two tables within a table?
Is this done in CSS, or do I have to get it somewhat right in html first?


do you mean like this?
<table border="1px solid">
<tr>
<td><select name="Continent">
<option value="North America">North America</option>
<option value="South America">South America</option>
<option value="Asia">Asia</option>
</select></td>
<td rowspan="3">Chexbox</td>
</tr>
<tr>
<td><select name="Country">
<option value="Canada">Canada</option>
<option value="Other">Other</option>
</select></td>
</tr>
<tr>
<td><select name="City">
<option value="Ottawa">Ottawa</option>
<option value="New York">New York</option>
<option value="Sydney">Sydney</option>
</select></td>
</tr>
</table>

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>

Space between td classes in HTML not working

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>

<td> doesn't work with <select>

I'm having a weird problem.
Here's my code :-
<table>
<tr>
<td>Ports to be opened(<em><small>Shift Select Multiple Options</em></small>:</td>
</tr>
<td><select name="portoptions[]" multiple="multiple"></td>
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
<option value="protocol">Protocol</option>
</select>
</table>
The problem :- The options doesn't get listed down, it's completely blank..show's nothing.
How do I fix it so that options are viewable as well ?
Thanks.

Your <td> closes before the select does. The <select> should be nested inside your <td>.
E.g.
<td>
<select name="portoptions[]" multiple="multiple">
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
<option value="protocol">Protocol</option>
</select>
</td>

two issues are here.
1. You should put </td> after </select>.
2. You should put one <tr> before <td>.
So your final code will be
<table>
<tr>
<td>Ports to be opened(<em><small>Shift Select Multiple Options</em></small>:</td>
</tr>
<tr>
<td>
<select name="portoptions[]" multiple="multiple">
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
<option value="protocol">Protocol</option>
</select>
</td>
</tr>
</table>

use,
<table>
<td>Ports to be opened(<em><small>Shift Select Multiple Options</em></small>:</td>
</tr>
<tr>
<td><select name="portoptions[]" multiple="multiple">
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
<option value="protocol">Protocol</option>
</select></td>
</tr>

Replace:
<td><select name="portoptions[]" multiple="multiple"></td>
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
<option value="protocol">Protocol</option>
</select>
To:
<td>
<select name="portoptions[]" multiple="multiple">
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
<option value="protocol">Protocol</option>
</select>
</td>

All the control must be ended before closing the </td>
By writing in your way, browser doesn't know about the options.
So you need to write in between <td> <select><option>...</option></select></td>
by writing on the above way your code looks like,
<td>
<select name="portoptions[]" multiple="multiple">
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
<option value="protocol">Protocol</option>
</select>
</td>

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.

HTML aligning select field

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>