I have to insert a check box and one more field into an existing <td>. However, these fields are currently not showing on one line. Please find the html below:
<!DOCTYPE html>
<html>
<body>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>
<p>Timer<p/>
<input type="checkbox" id="checkBox" name="checkBox" size="30"/>
</td>
<td>
Please check the box
<td>
</tr>
</table>
</body>
</html>
This outputs something like this:
Jill Smith
Timer Please check the box
[]
Here "Timer" and check box aren't on the same line (inside the same <td>).
Can anybody please help me out?
PS: I can't change the already available table format.
Reason for timer inside p:
Timer is a dynamic filed which have the count start from 20 to 0.
So I have to use <p> element id inside JavaScript which I didn't mention here.
td p,td input{float:left}
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>
<p>Timer<p/>
<input type="checkbox" id="checkBox" name="checkBox" size="30"/>
</td>
<td>
Please check the box
<td>
</tr>
</table>
td p,td input{display:inline}
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>
<p>Timer<p/>
<input type="checkbox" id="checkBox" name="checkBox" size="30"/>
</td>
<td>
Please check the box
<td>
</tr>
</table>
td p,td input{display:inline-block}
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>
<p>Timer<p/>
<input type="checkbox" id="checkBox" name="checkBox" size="30"/>
</td>
<td>
Please check the box
<td>
</tr>
</table>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>
<p>Timer<input type="checkbox" id="checkBox" name="checkBox" size="30"/><p/>
</td>
<td>
Please check the box
<td>
</tr>
</table>
Update (comment request)
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>
<p style="float:left">Timer<p/>
<input style="float:left" type="checkbox" id="checkBox" name="checkBox" size="30"/>
</td>
<td>
Please check the box
<td>
</tr>
</table>
adding a class
.inline{
display:inline
}
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>
<p class=inline>Timer<input class=inline type="checkbox" id="checkBox" name="checkBox" size="30"/><p/>
</td>
<td>
Please check the box
<td>
</tr>
</table>
Wrap each item in different cell, it'll help you in that case.
<tr>
<td>
Timer
</td>
<td>
<input type="checkbox" id="checkBox" name="checkBox"/>
</td>
<td>
Please check the box
</td>
</tr>
Or, if you need checkbox and label in the same cell
<tr>
<td>
Timer
<input type="checkbox" id="checkBox" name="checkBox"/>
</td>
<td>
Please check the box
</td>
</tr>
Or even
<tr>
<td colspan="2"> <!-- colspan is 2 because you have two cols in your table -->
Timer
<input type="checkbox" id="checkBox" name="checkBox"/>
Please check the box
</td>
</tr>
"P" is block element and creates new block and new line as result.
<p> does force a new line, so the Checkbox is in the next line. Try <span>Timer</span>
<label><input type="checkbox" name="checkbox" value="value">Text</label>
Would be the best option, since now you can also click on the Name of the Checkbox, to check the box.
Remove the "paragraph"
< p>
element , near the text "Timer" from the above code. :)
P is a block level element. What that DTD is saying is that <p> tags can only contain inline elements.
you can overide this with
p{
display:inline-block!important;
}
Related
In HTML I am making a form where there are 2 tables side by side. In one table all the form <label>/Name/E Mail/Password</label> and in another table I am trying to put the form <inputs> text/email/password to make them look nicely visible.
But when I gave the label Message and <textarea name="Message" rows="1" cols="30"></text area> my whole form layout is getting disturbed due to which I am not able keep my initial labels and inputs aligned.
<form class="" action="index.html" method="post">
<table>
<tr>
<td>
<table>
<tr>
<td>
<label>Name</label>
</td>
</tr>
<tr>
<td>
<label>Email</label>
</td>
</tr>
<tr>
<td>
<label>Password</label>
</td>
</tr>
<tr>
<td>
<label>Message</label>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<input type="text" name="" value="">
</td>
</tr>
<tr>
<td>
<input type="email" name="" value="">
</td>
</tr>
<tr>
<td>
<input type="password" name="" value="">
</td>
</tr>
<tr>
<td>
<textarea name="Message" rows="1" cols="30"></textarea>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
When the labels and inputs are aligned
When the labels and inputs are not aligned
There is no need for the extra table inside of the table, and you are including everything inside of 1 row, which is why its formatted like that.
You shouldn't be using tables for this, not when you have things like CSS Flexbox and CSS Grid. Here is a basic example of using flexbox with a form.
But if you must use a table, try a table format like this ...
<table>
<tr>
<td>label here</td>
<td>form field here</td>
</tr>
<tr>
<td>label here</td>
<td>form field here</td>
</tr>
...
</table>
Here is an example using your code.
<form class="" action="index.html" method="post">
<table>
<tr>
<td>
<label>Name</label>
</td>
<td>
<input type="text" name="" value="">
</td>
</tr>
<tr>
<td>
<label>Email</label>
</td>
<td>
<input type="email" name="" value="">
</td>
</tr>
<tr>
<td>
<label>Password</label>
</td>
<td>
<input type="password" name="" value="">
</td>
</tr>
<tr>
<td>
<label>Message</label>
</td>
<td>
<textarea name="Message" rows="1" cols="30"></textarea>
</td>
</tr>
</table>
</form>
Is there a simple way to make a html table editable? I have a simple table with 2 headers and 4 tds and a edit button at the end of each row using a bootstrap MUI class. Is there a way to make my table editable without changing everything? What I need is I click my cell and edit the cell get the new info and when I click the edit button I can pass to the backend.
Table :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class='mui-row'>
<td class='mui-col-md-6'>1</td>
<td class='mui-col-md-2'>1</td>
<td class='mui-col-md-2' style='border:none'>
<input type="checkbox" class="check">
</td>
<td>editButton</td>
</tr>
<tr class='mui-row'>
<td class='mui-col-md-6'>2</td>
<td class='mui-col-md-2'>2</td>
<td class='mui-col-md-2' style='border:none'>
<input type="checkbox" class="check">
</td>
<td>editButton</td>
</tr>
<tr class='mui-row'>
<td class='mui-col-md-6'>3</td>
<td class='mui-col-md-2'>3</td>
<td class='mui-col-md-2' style='border:none'>
<input type="checkbox" class="check">
</td>
<td>editButton</td>
</tr>
</table>
I just need to know how to make the cell editable and get all the info of the cell edited and even those not edited in the same row.
To edit a text you need to place inputs to your table cells.
So you can make like this:
by clicking on a table cell, you actually clicked on an input where you can edit your text. That's the best way to do it.
Like so:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
input[type=text] {
border: none;
width: 25px;
}
</style>
<table>
<tr class='mui-row'>
<td class='mui-col-md-6'><input type="text" value="1"></td>
<td class='mui-col-md-2'><input type="text" value="1"></td>
<td class='mui-col-md-2' style='border:none'>
<input type="checkbox" class="check">
</td>
<td>editButton</td>
</tr>
<tr class='mui-row'>
<td class='mui-col-md-6'><input type="text" value="2"></td>
<td class='mui-col-md-2'><input type="text" value="2"></td>
<td class='mui-col-md-2' style='border:none'>
<input type="checkbox" class="check">
</td>
<td>editButton</td>
</tr>
<tr class='mui-row'>
<td class='mui-col-md-6'><input type="text" value="3"></td>
<td class='mui-col-md-2'><input type="text" value="3"></td>
<td class='mui-col-md-2' style='border:none'>
<input type="checkbox" class="check">
</td>
<td>editButton</td>
</tr>
</table>
I have table and I would like to put my td's under th tags. Here is my HTML code:
<table>
<tr>
<th>Your Email</th>
<td>
<input type="text" name="userEmail" value="" id="userEmail" required="">
</td>
</tr>
<tr>
<th>Job Category</th>
//I need break line here
<td>
<label><input type="radio" name="rd1" value="Programmer" id="rd1">Programmer</label><br>
<label><input type="radio" name="rd2" value="Web Developer" id="rd2">Web Developer</label><br>
</td>
<tr>
</table>
My output gives me text in <th> tags and then text in <td> tags next to it. I would like to have td content below th. I tried to use <br> tags but looks like that does not work outside of td tags. If anyone know the best and way to fix this please let me know.
You are creating a table and nothing can be put outside the table cells. If you want to have the forms element under the headers, just create one row with headers and one row with forms elements:
<table>
<tr>
<th>Your Email</th>
<th>Job Category</th>
</tr>
<tr>
<td>
<input type="text" name="userEmail" value="" id="userEmail" required="">
</td>
<td>
<label><input type="radio" name="rd1" value="Programmer" id="rd1">Programmer</label><br>
<label><input type="radio" name="rd2" value="Web Developer" id="rd2">Web Developer</label><br>
</td>
<tr>
</table>
Put your table header in its own row:
<table>
<tr>
<th scope="row">Your Email</th>
<td>
<input type="text" name="userEmail" value="" id="userEmail" required="">
</td>
</tr>
<tr>
<th colspan="2">Job Category</th>
</tr>
<tr>
//I need break line here
<td colspan="2">
<label><input type="radio" name="rd1" value="Programmer" id="rd1">Programmer</label><br>
<label><input type="radio" name="rd2" value="Web Developer" id="rd2">Web Developer</label><br>
</td>
</tr>
</table>
Place them in different rows using
<table>
<tr>
<th scope="row">Your Email</th>
<td>
<input type="text" name="userEmail" value="" id="userEmail" required="">
</td>
</tr>
<tr>
<th>Job Category</th>
</tr>//End row
//I need break line here
<tr> //start new row
<td>
<label><input type="radio" name="rd1" value="Programmer" id="rd1">Programmer</label><br>
<label><input type="radio" name="rd2" value="Web Developer" id="rd2">Web Developer</label><br>
</td>
<tr>
</table>
I'm having an weird problem. I've got an table with an input and some text. Only problem is that 1 row is shorter than the others.
I've moved the row down, but that also didn't work. I've also compared them with the other rows, but i can't find the difference.
An image says more than thousands words they say, so here's an screen pick from the live testing area:
Also, here's an JSFiddle of the relevant code.
And here's the code also:
<table class="radio">
<tbody>
<tr class="highlight">
<td>
<input type="radio" name="shipping_method" value="pickup.pickup0" id="shipping_method_pickup" />
</td>
<td colspann="3"><b>Hello</b>
</td>
<td style="text-align: right;">
<label for="pickup.pickup1">0,00</label>
</td>
</tr>
<tr class="highlight">
<td>
<input type="radio" name="shipping_method" value="weight.weight_5" id="weight.weight_5" checked="checked" />
</td>
<td colspan="3"><b>Verzending op gewicht</b>
</td>
<td style="text-align: right;">
<label for="weight.weight_5">2,20</label>
</td>
</tr>
<tr class="highlight">
<td>
<input type="radio" name="shipping_method" value="weighttat.weighttat_5" id="weighttat.weighttat_5" />
</td>
<td colspan="3"><b>Verzending via Post.nl</b>
</td>
<td style="text-align: right;">
<label for="weighttat.weighttat_5">6,75</label>
</td>
</tr>
<tr class="highlight">
<td>
<input type="radio" name="shipping_method" value="dhlpickup.dhlpickup_5" id="dhlpickup.dhlpickup_5" />
</td>
<td colspan="3"><b>Verzenden via DHL Afhaalservice ( Kies hier een DHL afhaalpunt </b>
</td>
<td style="text-align: right;">
<label for="dhlpickup.dhlpickup_5">4,50</label>
</td>
</tr>
</tbody>
</table>
You have a small spelling error
An extra n in colspann
Your first row's attribute colspan is wrong, change:
<td colspann="3"><b>Hello</b>
with:
<td colspan="3"><b>Hello</b>
Here is the fiddle updated: http://jsfiddle.net/D5fJa/1/
More info about colspan attribute: http://www.w3schools.com/tags/att_td_colspan.asp
I am making a form for inserting recipes to my database, whenever im dealing with forms, i always go for simplicity -> tables.
For example i have this code:
<table>
<tr>
<td>
<tr>Text:</tr>
<tr>
<input type="button" />
</tr>
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
I wanted to have 2 rows inside a column, The above code doesnt actually work, im just demonstrating on how i would like it to arrange.
Is there anyway to do this? or do i have to resort to using divs and CSS(ugghh,, i hate this part. trial and error on the location.....)
<table>
<tr>
<td>
<table>
<tr>
<td>Text:</td>
</tr>
<tr>
<td><input type="button" /></td>
</tr>
</table>
</td>
<td>
<input type="text" />
</td>
</tr>