In my html,i am using a table to display from and to date picker.After fixing the date picker,the cell is taking lot of space so i am not able to keep that table to aside of my web page.
This is my html ,
<table border="1" cellspacing="0" >
<tr>
<td><input id="ir-box" type="checkbox"/></td><td colspan="3">Only show LIVE reports</td>
</tr>
<tr>
<td colspan="3"><input type="text" value="Keyword Search"/></td><td>{% include "buttons/go.html" %}</td>
</tr>
<tr>
<td colspan="4"><input class="incident-type" type="text" value="All Incident types" /></td>
</tr>
<tr>
<td colspan="4"><input class="incident-type" type="text" value="All Location types"/></td>
</tr>
<tr>
<td colspan="2">From</td><td colspan="2">To</td>
</tr>
<tr>
<td colspan="2"><input class="datefield" id="fromdate" type="text" value="dd/mm/yyyy"/></td><td colspan="2"><input class="datefield" id="todate" type="text" value="dd/mm/yyyy"/></td>
</tr>
<tr>
<td>s</td><td>f</td><td>s</td><td>{% include "buttons/go.html" %}</td>
</tr>
</table>
I am using django web framework,designing web page using html.
1.How to reduce the space inside the cell so that i can keep the table aside of my webpage.Help required
Thanks
You can reduce space with the cellpadding in HTML like this: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_table_cellpadding2
The right method is to set padding to the td with CSS
You simply just apply the padding in your CSS file appropriately for the table. For example (CSS)
tr {padding: 5px 5px 5px 5px;}
This is top, right, bottom, left and a shorthand way of stating the padding.
More: http://www.w3schools.com/css/css_padding.asp
Related
I had a 13 column table nicely aligned until I added input fields, which broke alignment in the column (vertical) direction. Reducing input size to 3vw didn't help, and now the cells in that row are too small relative to the other rows and cells.
I also tried adding a colSpan to the data cells and headers, but it had no effect.
How can I align the columns of the following table:
<table className={style2}>
<thead>
<tr>
<th colSpan={13}>
<h3 className={cell_style}>Today: Workout A: TB Stool, TB Rows, DB Incline, Lat Raises
</h3>
</th>
</tr>
<tr>
<th className={cell_style}>#</th>
<th colSpan={3} className={cell_style}>TB Stool</th>
<th colSpan={3} className={cell_style}>TB Rows</th>
<th colSpan={3} className={cell_style}>DB Incline</th>
<th colSpan={3} className={cell_style}>Lat Raises</th>
</tr>
</thead>
<tbody>
<tr>
<td className={cell_style}>#</td>
<td className={cell_style}>Weight</td>
<td className={cell_style}>Reps</td>
<td className={cell_style}>Reserve</td>
<td className={cell_style}>Weight</td>
<td className={cell_style}>Reps</td>
<td className={cell_style}>Reserve</td>
<td className={cell_style}>Weight</td>
<td className={cell_style}>Reps</td>
<td className={cell_style}>Reserve</td>
<td className={cell_style}>Weight</td>
<td className={cell_style}>Reps</td>
<td className={cell_style}>Reserve</td>
</tr>
<tr>
<form action="">
<td className={cell_style} colSpan={1}>#</td>
<td className={cell_style} colSpan={1}><input type="text" className={input_style} value='50' /></td>
<td className={cell_style}><input type="text" className={input_style}/>15</td>
<td className={cell_style}><input type="text" className={input_style}/>0</td>
<td className={cell_style}><input type="text" className={input_style}/>58</td>
<td className={cell_style}><input type="text" className={input_style}/>14</td>
<td className={cell_style}><input type="text" className={input_style}/>2</td>
<td className={cell_style}><input type="text" className={input_style}/>20</td>
<td className={cell_style}><input type="text" className={input_style}/>13</td>
<td className={cell_style}><input type="text" className={input_style}/>1</td>
<td className={cell_style}><input type="text" className={input_style}/>5</td>
<td className={cell_style}><input type="text" className={input_style}/>15</td>
<td className={cell_style}><input type="text" className={input_style}/>0</td>
</form>
</tr>
</tbody>
</table>
A form is not allowed to be a child element of a table, tbody or tr.
You can have an entire table inside a form. You can have a form inside a table cell. Bu you cannot have part of a table inside a form.
See similar: Form inside a table
To fix your issue, you will need to wrap your whole table inside the form.
Remove the form from below:
<tr>
<form action="">
[...]
</form>
</tr>
And wrap your whole table:
<form action="">
<table className={style2}>
[...]
</table>
<form>
See docs, HTML form tag.
you cannot wrap td elements inside a form. you have to wrap the whole table :
<form>
<table>
<tr>
<td><input type="text" value="10" class=""></td>
....
</tr>
</table>
</form>
also there is no className attribute. you have to use class=""
input values should be in the value attribute
I'm creating a login form. Here's what I created:
<form action="loginform.php" method="POST" name="LoginForm">
<table border="1">
<tr>
<td>Username</td>
<td>:</td>
<td><input type="text" name="username"></td>
<td colspan="2" align="center"><input type="submit" name="login"value="LOGIN!"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" name="pass"></td>
</tr>
<tr>
<td rowspan="4" align="center">Register!</td>
</tr>
</table>
As you can see, my code fails to make the "LOGIN!" button align in the center in between the username and password alignment. I already used the colspan tag for it, but doesn't seem to work. What needs to be done here?
Also, I want the "Register!" link to align on the farthest right side of the table. How do I go about doing that? Thanks in advance.
Please note that tables should be used for tabular data only, but your table has some very odd row and colspans - your first row has 5 columns, second 4 and third 1 (with a rowspan of 4, even though you only have 3 rows)
I think you have got your rows and columns mixed up - try changing the rowspan to colspan and vice vera but changing the colspan to 5:
<table border="1">
<tr>
<td>Username</td>
<td>:</td>
<td><input type="text" name="username"></td>
<td rowspan="2" align="center"><input type="submit" name="login"value="LOGIN!"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" name="pass"></td>
</tr>
<tr>
<td colspan="5" align="center">Register!</td>
</tr>
</table>
Example
Try using text-align: center and text-align: right
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 am trying to figure out how to remove the extra space between table data(s) in a table row in HTML. For example in the code below there is extra space between 'First Name' table data and the 'input name' table data when the code is viewed in my web browser IE. Here's the example:
<tr>
<td>First Name:</td>
<td><input name="fname" id="fname" size="30" type="text" /></td>
</tr>
I need the input text box to be reasonably close to the category (ie: "First Name"). I have requirements to include no table border, cellpadding of 2 and width of 65% and that's what I have listed in my code and it is making it do this.
How can I keep these requirements and still get the look I'm needing (which is minimal space between the two table data fields)? Any help would be greatly appreciated. Thanks!
Here is my code:
<form name="Web Order Form" id="Web Order Form">
<table border="0" cellpadding="2" width="65%">
<!--Personal Info. table -nested table 1 -->
<tr>
<th>Personal Information</th>
</tr>
<tr>
<td>First Name:</td>
<td><input name="fname" id="fname" size="30" type="text" /></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input name="lname" id="lname" size="30" type="text" /></td>
</tr>
<tr>
<td>Address:</td>
<td><input name="address" id="address" size="30" type="text" /></td>
</tr>
<tr>
<td>City:</td>
<td><input name="city" id="city" size="35" type="text" /></td>
</tr>
<tr>
<td>State:</td>
<td><input name="state" id="state" size="3" type="text" /></td>
</tr>
<tr>
<td>Zip Code:</td>
<td><input name="zip" id="zip" size="10" type="text" /></td>
</tr>
<tr>
<td>Country:</td>
<td><input name="country" id="country" size="10" type="text" /></td>
</tr>
It soounds like you need to right-align the text in the first column. You can do it like this:
<td align='right'>
or with css
<td class='label'>
and the style would be:
.label {
text-align:right;
}
You need to use CSS to control cell spacing.
Here's a good tutorial with examples:
http://www.quirksmode.org/css/tables.html
<table border="0" cellpadding="2" cellspacing="0" width="65%">
...
</table>
First of all, put a colspan="2" on your th:
<tr>
<th colspan="2">Personal Information</th>
</tr>
Without this, the th will unnecessarily stretch the tds underneath it (i.e. the left column). The colspan="2" will stretch the th over the width of entire table. This should fix at least a part of the problem and bring the tds closer together. If that is still not enough, you can define a fixed width for the left column by setting a width attribute on any of the tds in it, e.g.:
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td width="200">First Name:</td>
<td><input ... /></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input ... /></td>
</tr>
Better yet, set the width using CSS, in em rather than pixels, so as to enable the cell width to scale with the font size:
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td style="width:10em">First Name:</td>
<td><input ... /></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input ... /></td>
</tr>
The values 200 and 10em are just examples, you'll have to experiment a little to find the optimal values.
I assume you want the left hand column to adjust in width so that it is as wide as its longest entry. This is actually an interesting question.
What I usually do:
give the left hand column a white-space: nowrap style attribute
give the right hand column a width that is slightly more than it should be, e.g. maybe 70%. That's a matter of trying out.
The result is that the right hand column "presses" against the left hand column, which has no width specified. The left hand column will give in but only to the point of its content's length.
I'm interested to see whether there is some other, cleaner solution to this that I have overlooked the past eight years :)
Code example:
<tr>
<td style="white-space: nowrap">Label</td>
<td style="width: 95%">Input</td>
</tr>
it should be enough to set the width in the first row.
With CSS:
td {
padding: 0;
margin: 0; /** or whatever pixel you prefer **/
}
table {
white-space: nowrap; /** I don't know if this will help, just giving solutions **/
}
and for your html
<tr>
<td align="right">First Name:</td>
<td align="left"><input name="fname" id="fname" size="30" type="text" /></td>
</tr>