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>
Related
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'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>
I wonder why is there a padding on top and bottom. I want the border around "Reviewed by" and "date" without any padding. I have set cellspacing and cellpadding to zero. Is there any way to remove it using css?
<table width="100%" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td width="46%" rowspan="2"> </td>
<td width="1%" height="39"> </td>
<td width="19%"> </td>
<td width="22%">
<p>
<label for="Reviewd by"><br />
</label>
<p>
</p>
</td>
<td width="10%"> </td>
<td width="10%"><br></td>
<td width="2%" rowspan="2"> </td>
</tr>
<tr>
<td width="1%" height="81" style="border:3px solid black; border-right:hidden;"> </td>
<td width="19%" style="border:3px solid black; border-right:hidden; border-left:hidden;">
<p>Reviewed by<br />
<label for="Reviewd by5"></label>
<input type="text" name="Reviewd by" id="Reviewd by5" />
</p>
</td>
<td style="border: 3px solid black; border-left: hidden; font-size: 6pt;">
<p> </p>
<p>
<select name="month6">
<option value="1">January </option>
<option value="2">February </option>
<option value="3">March </option>
<option value="4">April </option>
<option value="5">May </option>
<option value="6">June </option>
<option value="7">July </option>
<option value="8">August </option>
<option value="9">September </option>
<option value="10">October </option>
<option value="11">November </option>
<option value="12">December </option>
</select>
<select name="day6">
<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>
<option value="11">11 </option>
<option value="12">12 </option>
<option value="13">13 </option>
<option value="14">14 </option>
<option value="15">15 </option>
<option value="16">16 </option>
<option value="17">17 </option>
<option value="18">18 </option>
<option value="19">19 </option>
<option value="20">20 </option>
<option value="21">21 </option>
<option value="22">22 </option>
<option value="23">23 </option>
<option value="24">24 </option>
<option value="25">25 </option>
<option value="26">26 </option>
<option value="27">27 </option>
<option value="28">28 </option>
<option value="29">29 </option>
<option value="30">30 </option>
<option value="31">31 </option>
</select>
<select name="year6">
<option value="2002">2002 </option>
<option value="2003">2003 </option>
<option value="2004">2004 </option>
<option value="2005">2005 </option>
<option value="2006">2006 </option>
<option value="2007">2007 </option>
<option value="2008">2008 </option>
<option value="2009">2009 </option>
<option value="2010">2010 </option>
<option value="2011">2011 </option>
<option value="2012">2012 </option>
<option value="2013">2013 </option>
<option value="2014">2014 </option>
</select>
</p>
</td>
<td width="10%"> </td>
<td width="10%"><img src="images/EQUALHOUSING.PNG" width="79" height="76" /></td>
</tr>
</table>
It is not a padding. Cells in row have always the same height. In your example "padding is caused by cell that is previous to "Reviewed by" - it has height set to 81px. If browser window is small "padding" is coming from word wrap in "date" cell
In addition to the answer above, chances are there is an element, button, or image, perhaps such that is only invisible on hover, that has a larger height, which is preventing the row from shrinking vertically.
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>
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.