My goal is to make each TD have a width of 100px which should also make the input fields be 100px. However, when I added width="100" to a TD, nothing happens. Here's the HTML code:
<table>
<tr>
<td>2.</td>
<td width="100">
<input type="text" name="year2" id="year2" value="" />
</td>
<td width="100">
<input type="text" name="make2" id="make2" value="" />
</td>
<td width="100">
<input type="text" name="vin2" id="vin2" value="" />
</td>
<td width="100">
<input type="text" name="radius2" id="radius2" value="" />
</td>
<td width="100">
<input type="text" name="gvm2" id="gvm2" value="" />
</td>
<td width="100">
<input type="text" name="comp2" id="comp2" value="" />
</td>
<td width="100">
<input type="text" name="coll2" id="coll21" value="" />
</td>
<td width="100">
<input type="text" name="amt2" id="amt2" value="" />
</td>
</tr>
</table>
Here's a link to the JSFiddle
I would appreciate any help.
The style should be added on your <input> not on your <td>. Also you should manage this via CSS instead of using inline styles.
In your CSS add
.my-width {
width: 100px;
}
Then add that class to each of your inputs:
<input class="my-width" type="text" name="year2" id="year2" value="" />
JS Fiddle Demo
Add style="width: 100px" to each input or add to your css file
input[type="text"]{
width: 100px;
}
Here is fiddle for the second option
Related
I am trying to develop a form, which has Emp details and Personal info details i need to display in the the below way.
This is my code
<table style="border: 1px solid; width: 900px; height: 200px; table-layout:fixed">
<tr>
<td>
<label for="Employee" style="height:20px">Employee:</label>
</td>
<td>
<label for="Id" style="height: 20px">Id</label>
</td>
<td>
<input type="text" id="txtId" />
</td>
<td>
<label for="Designation" style="height:20px">Designation</label>
</td>
<td>
<input type="text" id="txtDesig" />
</td>
</tr>
<tr>
<td></td>
<td> <label for="Mail" style="height: 20px">Mail</label></td>
<td> <input type="text" id="Text3" /> </td>
<td> <label style="height: 20px">Ext</label> </td>
<td> <input type="text" id="Text4" /> </td>
</tr>
<tr>
<td>
<label for="PersonalInfo" style="height:20px">Personal Info:</label>
</td>
<td>
<label for="Name" style="height:20px">Name:</label>
</td>
<td>
<input type="text" id="txtName" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<label for="City" style="height:20px">City:</label>
</td>
<td>
<input type="text" id="txtCity" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<label for="State" style="height:20px">State:</label>
</td>
<td>
<input type="text" id="txtState" />
</td>
</tr>
</table>
The issue is the textboxes are not in the same line and the form looks weird.
You can start like this:
table{border: 1px solid; width: 1500px;}
table tr td label{width: 95px;display: inline-flex;}
<table>
<tr>
<td>
<label>Employee:</label>
</td>
<td>
<label id="lblId">Id</label>
<input type="text" id="txtId " />
<label id="lblDesig">Designation</label>
<input type="text" id="txtDesig" />
</td>
</tr>
<tr>
<td></td>
<td>
<label id="Label3">Mail</label>
<input type="text" id="Text3 " />
<label id="Label4 ">Ext</label>
<input type="text" id="Text4" />
</td>
</tr>
<tr>
<td>
<label>Personal Info:</label>
</td>
<td>
<label>Name:</label>
<input type="text" id="txtName" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<label>City:</label>
<input type="text" id="txtCity" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<label>State:</label>
<input type="text" id="txtState" />
</td>
</tr>
</table>
I'm guessing you have to use tables for some reason? If not consider moving to using something a little more practical. Tables are cumbersome for this sort of thing. Having a column based approach would make a lot more sense.
In order to do this with tables, you're going to have to nest them. I only did a portion of the table to give you an idea of how to do it. So don't copy paste this. I took the IDs out to make it simpler to read. You'll obviously want those in there. Also when you run the code snippet make sure you scroll all the way left as the width is set to 1500. You can edit this when you apply it to your code. Just change where it says width: 33% to whatever you need.
<table style="border: 1px solid; width: 1500px; height: 400px;">
<tr>
<td style="width:33%;">
<label style="height:20px; width:33%;">Employee:</label></td>
</td>
<td style="width:33%;">
<table>
<tr>
<td><label height: 20px ">Id</label></td>
<td><input type="text " /></td>
<td><label id="lblDesig " height: 20px">Mail</label></td>
<td><input type="text" id="txtDesig" /></td>
</tr>
<tr>
<td><label style="height:20px;">Designation</label</td>
<td><input type="text" id="txtDesig" /></td>
<td><label id="lblId" height: 20px ">Ext</label></td>
<td><input type="text" id="txtDesig" /></td>
</tr>
</table>
</td>
</tr>
</table>
Normally table shouldn't be used for layout. Suggest using Bootstrap Grid system and Forms: http://getbootstrap.com/css/#grid
It gives you a modern/professional look, as well as handles different resolutions/devices for you nicely.
Here is a simple example:
<div class="row">
<div class="col-lg-2">
<label>Employee</label>
</div>
<div class="col-lg-5">
<div class="form-group">
<label for="Id" class="col-sm-2 control-label">ID</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Id">
</div>
</div>
<div class="form-group">
<label for="Mail" class="col-sm-2 control-label">Mail</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Mail">
</div>
</div>
</div>
<div class="col-lg-5"></div>
</div>
Hello I want to display a text and image input inside a table like this:
I've tried this code:
<tbody>
<tr>
<td class="inputs">
<input type="text" id="input1" size="3"/>
</td>
<td class="inputs">
<input type="text" id="input2" />
</td>
<td class="inputs">
<input type="text" id="input3" size="10"/>
</td>
<td class="inputs">
<input type="text" id="input4" size="8"/>
<input type="image" src="button.png" />
</td>
<td class="inputs">
<input type="text" id="input5" size="10"/>
</td>
<td class="inputs">
<input type="checkbox" id="input6" />
</td>
</tr>
But the result is this:
Any ideas how to fix this? Please help!
Vertical alignment is the problem here. Simply specify vertical-align: top on your input elements within your table cells and they will all align to the same position (the top, in this case):
td input {
vertical-align: top;
}
I trying to make the text bar wider but I cant get it to work. I have tried with width but it didn't work for me. I also couldn't find anything on the internet.
This is my HTML:
HTML:
<form action="" method="post">
<legend>Neem contact op</legend>
<table>
<tr>
<td>
<label for="Naam">Naam: </label>
</td>
<td>
<input type="text" id="Naam" name="Naam" placeholder="Naam" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Email">Email :</label>
</td>
<td>
<input type="email" id="Email"name="Email" placeholder="Email" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Seizoen">Seizoen: </label>
</td>
<td>
<select name="Seizoen" id="Seizoen" required>
<option value="">Kies hier je seizoen</option>
<option value="Lente">Lente</option>
<option value="Zomer">Zomer</option>
<option value="Herfst">Herfst</option>
<option value="Winter">Winter</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="Benodigheden">Benodigheden:</label>
</td>
<td>
<input type="text" id="Benodigheden"name="Benodigheden" placeholder="Benodigheden" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Opmerking">Opmerking:</label>
</td>
<td>
<textarea name="Opmerking" id="Opmerking" cols="40" rows="5" placeholder="Opmerking" required="required" /></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div class="submit"><input type="submit" value="Verzenden" name="Verzenden" /></div>
</td>
</tr>
</table>
Here is a link to JSFiddle.
While the above code is very good, minimal and clean, which is best. But IF you need different widths for each of your text inputs then inline CSS is needed.
Example code:
<input style="width: 300px;" type="text">
<input style="width: 340px;" type="text">
If you only wish to make input-type="text" have a certain width, add this style in your css file fx:
input[type=text] {
width: 300px;
}
add some css to the head section of your html
<style>
input{width: 300px}
</style>
Make your table wider.
Add desired width to your td's
Ajust your inputs widht.
I want to put inputs in one row.
<table border='1' cellpadding="25" style='border-collapse: collapse;border-color: silver;'>
<tr style='font-weight: bold;'>
<td width='350' align='center'>
<h2>Register:</h2><br>
Login: <input type="text" name="login" maxlength="20" size="25" /><br>
Password: <input type="password" name="password" size="25" maxlength="32" /><br>
Repeat password: <input type="password" name="password2" size="25" maxlength="32" /><br><br>
</td></tr></table>
I think you are trying to get all this aligned in the center.For that we have to use the the "tr" tag defines a row in an HTML table and "th" tag which defines a header cell in an HTML table.Try the following code :
<html>
<body>
<h2 align="center">Register</h2>
<table align="center">
<tr>
<td>Login</td>
<td><input type="text" name="login" align="middle"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pass" align="middle"/></td>
</tr>
<tr>
<td>Repeat Password</td>
<td><input type="password" name="rpass" align="middle"/></td>
</tr>
</table>
Also we use the align property for table and the new rows we create to get what you desire.
I think you have 3 options:
using CSS & position:relative and play with left' of eachinputs`, that's not valid at all.
Add some more HTML, I mean put each inputs on separate td. this is the best choice I think, and even better that you put the label / text' of each input on another td as well.
Using div (for example) instead of td for having more control and using CSS as well.
I strongly recommend you that using option #2, hope this help.
Do it like that:
<table border='1' cellpadding="25" style='border-collapse: collapse;border-color: silver;'>
<tr style='font-weight: bold;'>
<td style="width: 300px; text-align: right;">
Login:
</td>
<td style="width: 300px; text-align: left;">
<input type="text" name="login" maxlength="20" size="25" />
</td>
</tr>
<tr style='font-weight: bold;'>
<td style="width: 300px; text-align: right;">
Password:
</td>
<td style="width: 300px; text-align: left;">
<input type="password" name="password" size="25" maxlength="32" />
</td>
</tr>
</table>
I have attached image containing elements on my page. I want "format-123-456-7890) exactly below phone element. at present "phone ext" element is wrapped. If i increase size of "format.." element, phone ext element is getting wrapped. don't know solution. here is html code. i want Phone Ext in one line and Format element in one line (don't want to be wrapped).
<table datatable="0" role="presentation">
<caption class="hiddenContent">data table</caption>
<tr>
<td style="width: 30%;text-align: right">*First Name:</td>
<td>
<input type="text" name="elctnFirstName" id="elctnFirstName" value="" aria-required="true" maxlength="40" />
</td>
</tr>
<tr>
<td style="width: 20%;text-align: right">Middle Name:</td>
<td>
<input type="text" name="elctnMiddleName" id="elctnMiddleName" value="" aria-required="true" maxlength="40" />
</td>
</tr>
<tr>
<td style="width: 20%;text-align: right">*Last Name:</td>
<td>
<input type="text" name="elctnLastName" id="elctnLastName" value="" aria-required="true" maxlength="40" />
</td>
</tr>
<tr>
<td style="width: 20%;text-align: right">Email Address:</td>
<td>
<input type="text" name="emailAddress" id="emailAddress" value="" aria-required="true" maxlength="256" />
</td>
</tr>
<tr>
<td style="width: 20%;text-align: right">*Phone:</td>
<td>
<input type="text" name="elctnPhone" id="elctnPhone" value="" aria-required="true" maxlength="12" />
</td>
<td style="width: 20%;text-align: right">Phone Ext:</td>
<td>
<input type="text" name="eltcnPhoneExt" id="eltcnPhoneExt" value="" aria-required="true" maxlength="3" />
</td>
</tr>
<tr>
<td style="width: 40%;text-align: right">(Format-123-456-7890)</td>
</tr>
</table>
Here are a couple of suggestions
1) Use in Phone Ext
2) Let the table go to its natural width rather than setting the with to 40% and 20%
3) Explicity set the widths of <input>. I doubt that the extension field needs to be as long as others
4) Put a nowrap on the cell you don't want to wrap.
5) Use Bootstrap rather than tables to layout your form