How I can cause the second <td> (which contain <input>) attribute to occupy 3/4 of the table width?
<table>
<tr>
<td>
Name
</td>
<td>
<input type="text"/>
</td>
</tr>
</table>
I tried setting to td colspan=3, but it doesn't help me.
<table>
<tr>
<td style="width: 25%">
Name
</td>
<td style="width: 75%">
<input type="text"/>
</td>
</tr>
</table>
Just a quick and dirty solution. Would be better to style these kinds of stuff in a seperate css file and use classes instead of inline css.
A better way would be to use colgroups to style and describe the columns of the table. you can read about that here: http://www.w3schools.com/tags/tag_colgroup.asp
You can set the width:
<table>
<tr>
<td width="25%">
Name
</td>
<td width="75%">
<input type="text"/>
</td>
</tr>
</table>
(or use css with those percentages instead, i.e. style="width: 25%" or class="yourCssClassThatHasTheWidthPercentageSetInIt")
Colspan is for when you want a cell to span multiple columns in other rows.
But is there any reason you are using tables instead of divs for layout?
The correct (assuming this was legitimately tabular data) way would be to add a <colgroup> as razhial has already suggested which might look like this (demo with some extra CSS to see how it's working):
<table>
<colgroup>
<col/>
<col width='75%'/>
</colgroup>
<tbody>
<td>Name</td>
<td><input type="text"/></td>
</tbody>
</table>
However from your example there appears to be a much cleaner approach that is the <label> element that works like this (demo):
<label for="Name">Name</label>
<input type="text" id="Name"/>
Related
<table>
<tr> <td> Name </td>
<td> <input type="text" name="name"> </td>
</tr>
<tr> <td> Comments </td>
<td> <textarea style="width: 300px; height:300px;" name="comment">Something</textarea></td>
</tr>
Above code will form a simple form in Web page. However the text "comments" doesn't inline in appropriate section of the table. I want this text to be in top of the box however it shows in the middle of the box. Is there any method to make it in the correct place that I want to so that the form looks standard. Is it CSS that I have to use?
Add vertical-align:top style to <td> element, i.e.:
<td style="vertical-align:top"> Comments </td>
JSFiddle demo
See this link for documentation for vertical-algin property, including list of values other than top you could use.
You need to use CSS for this, try following code,
<table>
<tr> <td> Name </td>
<td> <input type="text" name="name"> </td>
</tr>
<tr> <td style = "vertical-align:top;"> Comments </td>
<td> <textarea style="width: 300px; height:300px;" name="comment">Something</textarea></td>
</tr>
Why not apply a class, e.g:
tr td:first-child {
vertical-align:top;
}
Per this example
If you also want to right align your items, see this demo
Just add valign attribute to the td.
<td valign="top"> Comments </td>
See this link for vertical align documentation
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>
I'm using twitter-bootstrap and I have two tables like this: http://jsfiddle.net/MELUd/
<table class="table table-bordered">
<thead>
<tr>
<td colspan="2"><input type="text" ></td>
<td colspan="2"><input type="text" ></td>
<td colspan="2"><input type="text" ></td>
<td colspan="2"><input type="text" ></td>
<td colspan="2"><input type="text" ></td>
</tr>
</thead>
<tbody>
<tr>
<td >XS</td>
<td >XS</td>
<td >XS</td>
<td >XS</td>
<td >XS</td>
<td >XS</td>
<td >XS</td>
<td >XS</td>
<td >XS</td>
<td >XS</td>
</tr>
</tbody>
</table>
The text inputs of the first table does not resizing so the table isn't responsive.
But in the second table example works perfectly with simple text.
How I can make the input text with dynamic width so I'll not see the horizontal scrollbar?
Any help, tip or advice will be appreciated, and if you need more information let me know and i'll edit the post.
I think the way to do it is to use javascript to change the width dynamically.
$(document).ready(function(){
$('input').each(function(){
$(this).width($(this).parent().width()-20);
});
});
Check out the fiddle
Please adjust your padding and margin accordingly to center the inputs.
Another solution is to display inputs as blocks
.table input{
display:block;
width:80%;
margin-left:auto;
margin-right:auto;
}
Check out the fiddle
you could either try specifying a max-width to the textboxes, either in px or em.
input[type='text']{max-width:4em}
I'd say go with em.
I have my table for a simple login page. I'm not stuck on this because I know I could just break my table apart and get the styling another way, but it seems like colspan is broken in Firefox.
HTML
<table>
<tbody>
<tr>
<td>E-mail:</td>
<td colspan="2">
<input type="textbox" name="email">
</td>
</tr>
<tr>
<td>Password:</td>
<td colspan="2">
<input type="password" name="password">
</td>
</tr>
<tr>
<td colspan="3">
<input type="submit" value="Login">
</td>
</tr>
<tr>
<td colspan="2">Forgot your password?</td>
<td style="width: 70px;">Reset It
</td>
</tr>
<tr>
<td colspan="2">Don't Have an Account?</td>
<td>Make One
</td>
</tr>
</tbody>
</table>
CSS
table {
width: 250px;
}
td:last-child {
text-align: right;
}
Here is a jsFiddle for my table. Viewing this table in Chrome or IE you can see what I'm trying to do which is to get the input boxes for the email and password to overlap the words "Forgot your Password" and "Don't have an Account". So the colspan should make those overlap which it does in chrome and IE, but not in Firefox. How come it fails in Firefox?
In my opinion, Firefox is displaying it correctly. The text overflows in IE and Chrome. You need to actually have 3 columns for your colspans to work:
<table>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
...
I have a table with checkboxes in it, and the cells in each checkbox row contain information about what that checkbox is about. So I wanted to use label for the rows but, as far as I know, you can't use label between table and td tags.
Then I made a CSS-table version of the same thing and it worked properly. I styled label as a table-row, the cells were properly aligned, and clicking them would check/uncheck the checkbox.
Now the problem: I want the checkbox to span across multiple rows.
http://jsfiddle.net/odraencoded/YaS5v/ - The HTML table version has the rowspan attribute, but I can't use label in a single row let alone multiple rows.
<table>
<tr>
<td rowspan=2><input type=checkbox /></td>
<td>...</td>
</tr>
<tr><td>...</td></tr>
</table>
http://jsfiddle.net/odraencoded/EKzXv/ - The CSS table version lets me use label but I can't find a way to set the rowspan.
<div style="display: table;">
<label style="display: table-row-group;">
<span style="display: table-row;">
<span style="display: table-cell;">
<input type="checkbox" />
</span>
<span...>...</span>
</span>
<span...><span...>...</span></span>
</label>
</div>
Is there any way to have a label tag containing multiple rows? And one of the cells it contains is the input checkbox the label is for? And that input checkbox cell should span across all rows contained by the label? Anyway for that?
This would be one way of doing it. Note the id on the checkboxes.
<table>
<tbody id="checkbox1">
<tr>
<td rowspan="2"><input type="checkbox" id="check1" /></td>
<td><label for="check1">A</label></td>
<td><label for="check1">B</label></td>
<td><label for="check1">C</label></td>
</tr>
<tr>
<td><label for="check1">a</label></td>
<td><label for="check1">b</label></td>
<td><label for="check1">c</label></td>
</tr>
</tbody>
<tbody id="checkbox2">
<tr>
<td rowspan="2"><input type="checkbox" id="check2" /></td>
<td><label for="check2">D</label></td>
<td><label for="check2">E</label></td>
<td><label for="check2">F</label></td>
</tr>
<tr>
<td><label for="check2">d</label></td>
<td><label for="check2">e</label></td>
<td><label for="check2">f</label></td>
</tr>
</tbody>
</table>