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
Related
I'm working on a form in my application and trying to clean up the code that was put in place before me. HEre's something I'm coming across that seems like bad practice and I am having a hard time trying to abbreviate it and clean it up.
Here's the code...
<tr>
<td style="padding-top: 10px; padding-bottom: 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="6%"></td> <---- I want to get rid of this!
<td width="45%">
<asp:CheckBox ID="chkBHRAExpiresDischarge" runat="server" onclick="RadioControl(this);" Text="Upon my discharge from treatment" />
</td>
<td>
<asp:CheckBox ID="chkBHRAExpiresReceiptOfInfo" runat="server" onclick="RadioControl(this);" Text="Upon receipt of the requested information" />
</td>
</tr>
<tr>
<td></td> <------- Have to keep adding this for every checkBox
<asp:Checkbox ID=.............."
</tr>
So what I'm trying to get rid of the the initial indentation, mainly ....
<td width="6%"></td>
Because this is in place, i have to do a
<td></td>
before every single row otherwise the indentation dissapears. Is there any way to fix this so that all my checkboxes are indented?
You can use colspan="2" on the checkbox cells and put padding-left: 6% as a style. Here's a JS fiddle. I added a row above your first row to show the column spacing, modified the first row use this change, and left the second row intact.
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr>
<td width="45%" colspan="2" style="padding-left: 6%">
<input type="checkbox" /><label>Checkbox</label>
</td>
<td>
<input type="checkbox" /><label>Checkbox</label>
</td>
</tr>
<tr>
<td width="6%"></td> <!---- I want to get rid of this! -->
<td width="45%">
<input type="checkbox" /><label>Checkbox</label>
</td>
<td>
<input type="checkbox" /><label>Checkbox</label>
</td>
</tr>
</table>
edit: Also, I recommend validating your HTML. You can wrap your code snippet up with a doctype and the other necessary items to get identify errors and warnings at https://validator.w3.org.
<!DOCTYPE html><html><head><title>Title is Required!</title></head><body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr>
<td width="45%" colspan="2" style="padding-left: 6%">
<input type="checkbox" /><label>Checkbox</label>
</td>
<td>
<input type="checkbox" /><label>Checkbox</label>
</td>
</tr>
<tr>
<td width="6%"></td> <!---- I want to get rid of this! -->
<td width="45%">
<input type="checkbox" /><label>Checkbox</label>
</td>
<td>
<input type="checkbox" /><label>Checkbox</label>
</td>
</tr>
</table>
</body><html>
Not sure if you'll find this acceptable, but you could keep the <td width="6%"></td> and give it a huge rowspan value. So like this:
<td width="6%" rowspan="999999"></td>
Then you can omit the empty <td></td> for the first 999999 rows. Most likely you have fewer rows than that; or if not, just make the rowspan even higher. The table will not become longer just because of the huge rowspan value.
Of course this all breaks down if you also have rows where the indent should not be applied; a fix for that could be to calculate the exact rowspan value in advance.
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 have a very simple table and I would like to understand what is incorrect with using this . I have entered a styling of color: red; just to visualize where the will work correctly.
<table>
<tr>
<td colspan=2>
<div id="transportation_table" >
<tr>
<td align="right"> Flights (round trip) </td>
<td align="right"> <input type="text" size="10" id="flights" onblur="calculateTransportation(flights, oversized, shuttle)">
</td>
</tr>
<tr>
<td align="right"> Oversized baggage fee (skis) </td>
<td align="right"> <input type="text" size="10" id="oversized" onblur="calculateTransportation(flights, oversized, shuttle)">
</td>
</tr>
<tr>
<td align="right"> Taxi to airport, shuttle to resort (X2) </td>
<td align="right"> <input type="text" size="10" id="shuttle" onblur="calculateTransportation(flights, oversized, shuttle)">
</td>
</tr>
</div>
</td>
</tr>
</table>
You are not declaring a table inside of your div. Tr elements belong inside of tables.
See: http://dev.w3.org/html5/markup/tr.html
That is likely the big error you are seeing.
I have a Wordpress plugin with some tables and input forms. The tables are built using the standard Wordpress table widefat class. The input forms are embedded into cells in the widefat table.
Where I am just displaying data, the table resizes to fit the metabox. Where I am using input fields, the table overflows the metabox, see picture:
I would like the input table to resize like the data table.
This is how the normal table renders:
<table class="widefat" id="item_publication_attributes">
<tr>
<th class="type"><b>Type</b></th>
<th class="date"><b>Date</b></th>
<th class="name"><b>Name</b></th>
<th class="address"><b>Address</b></th>
<th class="gender"><b>Map</b></th>
<th></th>
</tr>
<tr class="publish-attribute publish-attribute-1">
<td class="type">Publisher</td>
<td class="date">15/2/1971</td>
<td class="name">Publish Company</td>
<td class="location">63 The Street, The Town, Cambridgeshire</td>
<td class="map-icon" style="font-size:70%">[map]</td>
<td>Delete | Edit</td>
</tr>
</table>
And this is how the Form table renders:
<form>
<input type="hidden" name="post_id" id="add_publishing_attribute_post_id" value=2624/>
<table class="widefat" id="add_new_publishing_attribute">
<tr id="add_new_publishing_attribute_row">
<td class="type">
<select name="type" id="add_attribute_type">
<option value="0">ID 0</option>
<option value="1">ID 1</option>
<option value="2">ID 2</option>
</select>
</td>
<td class="dd"><input type="text" name="dd" id="add_attribute_dd" placeholder="dd" /></td>
<td class="mm"><input type="text" name="mm" id="add_attribute_mm" placeholder="mm" /></td>
<td class="yyyy"><input type="text" name="yyyy" id="add_attribute_yyyy" placeholder="yyyy" /></td>
<td class="name"><input type="text" name="name" id="add_attribute_name" placeholder="name" /></td>
<td class="location"><input type="text" name="location" id="add_attribute_location" placeholder="location" /></td>
<td><input type="submit" name="submit" id="add_new_attribute_submit" value="Add"/></td>
</tr>
</table>
</form>
Grateful for any suggestions
What I don't get is why you're using a form inside a meta box... We just simply drop our input fields there, and save_post takes care of there rest, here's a full example.
To fix the table layout, I've found an answer here: Why is my HTML table not respecting my CSS column width?
Use: table-layout:fixed:
<table class="widefat" id="add_new_publishing_attribute" style="table-layout:fixed">
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.