I have an html table
For some reason, in the second row, the two cells are not horizontally aligned. What is the cause of this?
<input type="checkbox" id="3" onClick="change(this)" checked="">
<label for="2"><font color="800080"> Ice Cover (Days)</font></label></p>
In this cell you have label for input with id="2" but in cell is input id="3" change with <label for="3">
this should fix it. you had an extra td tag and an extra br tag in there, and I also gave the title of the table its own row.
<div id="menu" STYLE="position:absolute; left:25px">
<!--toggles visibility of graph lines-->
<table>
<tr>
<td>
<p><b>Display: </b>
</td>
</tr>
<tr>
<td><input type="checkbox" id="0"
onClick="change(this)" checked="">
<label for="0"> <font color="556b2f">Freeze up (Julian Days)</font></label>
</td>
<td><input type="checkbox" id="1"
onClick="change(this)" checked="">
<label for="1"> <font color="000080">Break up (Julian Days)</font></label>
</td>
</tr>
<tr>
<td><input type="checkbox" id="2"
onClick="change(this)" checked="">
<label for="2"><font color="2e8b57"> Max Ice Thickness (cm)</font></label>
</td>
<td><input type="checkbox" id="3"
onClick="change(this)" checked="">
<label for="2"><font color="800080"> Ice Cover (Days)</font></label></p>
</td>
</tr>
</table>
</div>
Related
I need your help. Here is my screenshot.
Screenshot here.
I am having trouble looking for a solution, the case is this. When the user types in the sprinkler duty requirement textbox L/MIN. I should have a code that will search in my table for the nearest value of that label and will show check marks on labels.
Here is my html code for sprinkler duty:
<div class="row g-0" id="chartNine" style="display:none;">
<h4 class="card-title">TOWN'S MAIN FED - SPRINKLER ANNUBAR FLOW TEST</h4>
<table id="dataTable2">
<thead>
<tr>
<th style="width: 750px;">SPRINKLER DUTY REQUIREMENT/S</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label></label>
<input type="text6" class="randomColor" value="0" />
<label> L/MIN # </label>
<input type="text6" value="0" />
<label> KPA </label>
</td>
</tr>
</tbody>
</table>
<button onclick="addTable('dataTable2');">+</button>
<br>
and here is my code for the labels:
<tr>
<td>
<label>
0
</label>
</td>
<td>
<label id="dnValue0" style="display:none;">0.00</label>
<label id="dnValue1" style="display:none;">0.00</label>
<label id="dnValue2" style="display:none;">0.00</label>
<label id="dnValue3" style="display:none;">0.00</label>
<label id="dnValue4" style="display:none;">0.00</label>
<label id="dnValue5" style="display:none;">0.00</label>
<label id="dnValue6" style="display:none;">0.00</label>
</td>
<td>
<input type="text3" value="0" />
</td>
</tr>
<tr>
<td>
<label>
1
</label>
</td>
<td>
<label id="dnValue7" style="display:none;">220.77</label>
<label id="dnValue8" style="display:none;">359.46</label>
<label id="dnValue9" style="display:none;">534.13</label>
<label id="dnValue10" style="display:none;">710.70</label>
<label id="dnValue11" style="display:none;">914.45</label>
<label id="dnValue12" style="display:none;">1385.27</label>
<label id="dnValue13" style="display:none;">2084.30</label>
</td>
<td>
<input type="text3" value="0" />
</td>
</tr>
Thank you, guys!
So I have written the following code and I cannot make same response as I was asked to. the text does not align properly in form. The text isn't like aligned right and feilds on left. I Please suggest a fix as simple as you can.
<form align="center">
<p>Name:
<input type="text">
</p>
<p>Address
<input type="text">
</p>
<p>Email ID:
<input type="text">
</p>
<p>How many Peices of fruit<br>
do you eat per day?
<input type="radio" name="rdbGender" id="rdbGender"> 0
<input type="radio" name="rdbGender" id="rdbGender">1
<input type="radio" name="rdbGender" id="rdbGender">2<br>
<input type="radio" name="rdbGender" id="rdbGender">More than 2<br>
</p>
<label>Degree:</label>
<select multiple>
<option selected>apple</option>
<option>banana</option>
<option>plum</option>
<option>pomegranate</option>
</select>
<p>Would you like a <br /> brochure?
<input type="checkbox" align="right">
</p>
<input type="submit">
</form>
How it was supposed to look like
How it looks like
I had a hard time understand how you had been writing this code:
<form align="center">
and
<input type="checkbox" align="right"/>
As align is not a valid attribute of an input or form tag.
But what it looks like is that it used, and has long since been removed.
https://www.w3.org/TR/html401/present/graphics.html#adef-align
Note that on my browser (Firefox 81.0) your code doesn't center align like it does in your picture:
So that suggests to me that you are using an old browser.
I recommend using the MDN documentation to see what is elements are supported.
However, if you are supporting outdated then that's a whole discipline in itself.
This page lists all available HTML attributes:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
To give you a useful answer though - judging on the 'supposed to look like' image, it looks like you want to be using a table.
<form>
<table>
<tr>
<td align="right">Name:</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">Address</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right"> Email ID:</td>
<td> <input type="text"></td>
</tr>
<tr>
<td align="right"> How many Peices of fruit do you eat per day?</td>
<td>
<input type="radio" name="rdbGender" id="rdbGender"> 0
<input type="radio" name="rdbGender" id="rdbGender">1
<input type="radio" name="rdbGender" id="rdbGender">2<br>
<input type="radio" name="rdbGender" id="rdbGender">More than 2 </td>
</tr>
<tr>
<td align="right">
Degree:
</td>
<td>
<select multiple>
<option selected>apple</option>
<option>banana</option>
<option>plum</option>
<option>pomegranate</option>
</select>
</td>
</tr>
<tr align="right">
<td> Would you like a brochure</td>
<td align="left"> <input type="checkbox"></td>
</tr>
<tr>
<td></td>
<td> <input type="submit"></td>
</table>
</form>
Note here, we do use the align attribute. As you can see, according to the MDN documentation, align is supported on a td element, but is deprecated, meaning that it's not advisable to use it.
Do you want like this? Only html:
<form>
<table align="center">
<tr>
<td align="right">Name </td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right"><br>Address </td>
<td><br><input type="text"></td>
</tr>
<tr>
<td align="right"><br>Email ID </td>
<td><br><input type="text"></td>
</tr>
<tr>
<td>
<label for="rdbGender">
<br>
How many Peices of fruit <br> do you eat per day?<br><br><br><br>
</label>
</td>
<td>
<input type="radio" name="rdbGender" id="rdbGender">0<br>
<input type="radio" name="rdbGender" id="rdbGender">1<br>
<input type="radio" name="rdbGender" id="rdbGender">2<br>
<input type="radio" name="rdbGender" id="rdbGender">More than 2
</td>
</tr>
<tr>
<td align="right">
<br>
<label for="degree">
My favourite fruit <br><br><br><br><br>
</label>
</td>
<td>
<select id="degree" multiple>
<option selected>apple</option>
<option>banana</option>
<option>plum</option>
<option>pomegranate</option>
</select>
</td>
</tr>
<tr align="right">
<td> Would you like a <br>
brochure
</td>
<td align="left"> <input type="checkbox"></td>
</tr>
<tr>
<td></td>
<td>
<br>
<input type="submit">
</td>
</table>
</form>
I suggest you to use CSS Grid to accomplish this job:
form {
display: grid;
grid-template-columns: 150px 200px;
text-align: center;
}
.first-column {
text-align: right;
}
input, select {
margin-left: 5px;
margin-bottom: 5px;
}
.check-area label {
display: block;
text-align: left;
}
.submit-button {
grid-column-start: 2;
text-align: left;
}
<form>
<label class="first-column">Name:</label><input type="text">
<label class="first-column">Address</label><input type="text">
<label class="first-column">Email ID:</label><input type="text">
<div class="first-column">
How many Peices of fruit<br>do you eat per day?
</div>
<div class="check-area">
<label>
<input type="radio" name="rdbGender" id="rdbGender">0
</label>
<label>
<input type="radio" name="rdbGender" id="rdbGender">1
</label>
<label>
<input type="radio" name="rdbGender" id="rdbGender">2
</label>
<label>
<input type="radio" name="rdbGender" id="rdbGender">More than 2
</label>
</div>
<label class="first-column">Degree:</label>
<select multiple>
<option selected>apple</option>
<option>banana</option>
<option>plum</option>
<option>pomegranate</option>
</select>
<label class="first-column">Would you like a<br>brochure?</label>
<input type="checkbox" align="right">
<div class="submit-button"><input type="submit"></div>
</form>
I'm wondering if possible to arrange two checkbox input fields vertically in same td cell? Below is example, there both of input fields are next to each other.
<table>
<tr>
<td>
<input type="number" />
<input type="checkbox" name="ck1" id="ck1">A
<input type="checkbox" name="ck2" id="ck2">B
</td>
</tr>
</table>
How about using a simple <br> with using text-align:right on the <td>?
<table>
<tr>
<td style='text-align:right'>
<input type="number">
<input type="checkbox" name="ck1" id="ck1">A<br>
<input type="checkbox" name="ck2" id="ck2">B
</td>
</tr>
</table>
<html>
<table width="45%"><tr><td>
<input type="checkbox" name="mahesh" value="mahesh">Mahesh</td>
<td>
<input type="checkbox" name="mahesh" value="mahesh">Mahesh kunenaddsfsdfasdfasdfa</td></tr>
<tr><td>
<input type="checkbox" name="mahesh" value="mahesh">Mahesh</td>
<td>
<input type="checkbox" name="mahesh" value="mahesh">Mahesh kunenaddsfsdfasdfasdfa</td></tr>
</table></html>
I want second check box name is to large, it should align properly below the name .
It should start from the name not form checkbox
you can use additional element - label, like this:
HTML:
<table width="45%">
<tr>
<td>
<input type="checkbox" name="mahesh1" value="mahesh"/>Mahesh
</td>
<td>
<input type="checkbox" id="maesh1" name="mahesh1" value="mahesh"/>
<label for="maesh1"> Mahesh kunenaddsfsdfasdfasdfa</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mahesh2" value="mahesh"/>Mahesh
</td>
<td>
<input type="checkbox" id="maesh2" name="mahesh2" value="mahesh"/>
<label for="maesh2"> Mahesh kunenaddsfsdfasdfasdfa</label>
</td>
</tr>
css:
label {
display: block;
white-space: nowrap;
}
fiddle:
http://jsfiddle.net/ywg632c3/2/
I have the following HTML:
<tr>
<td class=tabTwo vAlign=top>
<table border=0 cellPadding=0 cellSpacing=0 width=100%>
<tr>
<td vAlign=top width=5%>4.</td>
<td>Test 1?</td>
</tr>
<tr>
<td width=5%></td>
<td colSpan=2>a) <input type="radio" name="S1Q4" value="a" id="s1q4a" /> <label for="s1q4a">A</label></td>
</tr>
<tr>
<td width=5%></td>
<td colSpan=2>b) <input type="radio" name="S1Q4" value="b" id="s1q4b" /> <label for="s1q4b">B</label></td>
</tr>
<tr>
<td width=5%></td>
<td colSpan=2>c) <input type="radio" name="S1Q4" value="c" id="s1q4c" /> <label for="s1q4c">C</label></td>
</tr>
<tr>
<td width=5%></td>
<td colSpan=2>d) <input type="radio" name="S1Q4" value="d" id="s1q4d" /> <label for="s1q4d">D</label></td>
</tr>
</table>
</td>
</tr>
Produces:
How do I made the radio buttons align in a straight line? B & C seem crooked.
If you are going to use a table. Put the inputs in their own cell. The letter width of a),b) etc. is what is throwing of the alignment.
I would not use a table though. Your choice.
Your question seemed a little vague but to best my knowledge, the presence of bullets a) b) c) in the same cell is causing the problem. Here's my fiddle: http://jsfiddle.net/bTNvA/
I have tried to resolve this by moving bullets to other cell:
<tr>
<td width=5%> a) </td>
<td colSpan=2> <input type="radio" name="S1Q4" value="a" id="s1q4a" /> <label for="s1q4a">A</label></td>
</tr>
HTML
<div class="form-wrapper">
<div class="radio-choice">
<span>a) </span>
<input id="option1" type="radio" name="opt1"/>
<label for="option1">Option 1</label>
</div>
<div class="radio-choice">
<span>b) </span>
<input id="option2" type="radio" name="opt2"/>
<label for="option2">Option 2</label>
</div>
<div class="radio-choice">
<span>c) </span>
<input id="option3" type="radio" name="opt3"/>
<label for="option3">Option 3</label>
</div>
</div>
CSS
.radio-choice * {
vertical-align: middle;
}
.form-wrapper div{
float: left;
clear: both;
}
.form-wrapper span {
display: inline-block;
width: 10px;
}
http://jsfiddle.net/NewwV/1/