Multiple forms in one table, these forms last for varying lengths of rows, however this does not seem to work:
<table>
<form>
<tr>
<td>
</td>
<td>
</td>
</tr>
</form>
<form>
<tr>
<td>
</td>
<td>
</td>
</tr>
</form>
</table>
I believe a table has a definite structure, and this cannot be interlaced with other structures, but is there a tidy work around this?
Thanks.
No. According to this document: http://www.w3.org/TR/html401/struct/tables.html#h-11.2.1
table may contain only these:
TABLE --
(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
But you can use something like this
<div class=table>
<form>
<div class=cell>...</div>
<div class=cell>...</div>
</form>
</div>
with styles:
div.table { display:table; }
div.table > form { display:table-row; }
div.table > form > div.cell { display:table-cell; }
No, you can't do that. I guess you want it that way to have both forms aligned in a table, right?
If you are allowed javascript on the page, you could add the different text boxes etc. inside the <td> elements, and attach onchange event handlers to these boxes to populate the corresponding (hidden) fields in your actual forms.
It would be a problem in all HTML ... including both XHTML and HTML5.
XHTML table dtd ..
<!ELEMENT table (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>
Not between <tr> tags. They should work outside of <table> or inside of <td> though.
There's no real need to have two forms in a single table if you're looking to put them on multiple rows. The bigger the table, the longer it takes for the browser to load and display it. Instead, give each form its own table and place the table tags within the form tags, like so:
<form method="GET" action="foo.sh">
<table>
</table>
</form>
Yes! No problem to HTML5.
Now table tags are just a shorthand for table styling rules.
Related
Given the following HTML:
<table>
<div>
<tr><td></td></tr>
</div>
</table>
When it is rendered, the div gets moved out like so:
<div>
</div>
<table>
<tr><td></td></tr>
</table>
Why does this happen, and how can I prevent this from happening?
You can't, the first example is invalid html. You can use a <tbody> instead of the <div> however.
A <div> element is not allowed directly within a <table> element. Only table related elements are allowed (<tr> <thead>...).
There's no way to "make this work". Read the HTML specification and form a valid document.
div tag cannot be inside the table like this.
<table>
<div>
<tr><td></tr></td>
</div>
</table>
You can put it inside the td like this.
<table>
<tr><td><div></div></td></tr>
</table>
This is my simplified markup:
<table class="kOverzicht kOverzichtFirst">
<tr>
woensdag 26/02
</tr>
</table>
So I already tried using a span or p element to wrap the text, but this was not allowed when I checked it with the validator.
What is the best way to style the text inside the tr? I cannot do this through the entire table because the actual table consists of multiple tr elements.
Any suggestions?
You need a <td> inside of the <tr>
<table class="kOverzicht kOverzichtFirst">
<tr>
<td>woensdag 26/02</td>
</tr>
</table>
<tr> tag just to define a table row.. A table cell <td> where the data is contained.
Add the style text to the
<td> tag to be created inside the <tr>.
Like
`<table class="kOverzicht kOverzichtFirst">
<tr>
<td style="padding-left: 5px; font size="10""> </td>
</tr>
</table>`
This will help in styling specific lines only.
I would suggest you to wrap the text inside a td
<table class="kOverzicht kOverzichtFirst">
<tr>
<td>woensdag 26/02</td>
</tr>
</table>
Then use the following css:
table.kOverzicht td {
// define your css here
}
You should use td instead. For example,
<table class="kOverzicht kOverzichtFirst">
<tr>
<td style="color:red;">
woensdag 26/02
</td>
</tr>
Alternatively,
<style>.kOverzicht td {color:red;}</style>
<table class="kOverzicht kOverzichtFirst">
<tr>
<td>
woensdag 26/02
</td>
</tr>
As others have answered, you should really wrap the text in a cell container, a td or th element, and style that element. The details depend on the real structure of the table. In particular, a table with one column only does not usually make sense as a data table. If the text should span all the columns in the cell, you should use the colspan attribute, e.g. (assuming arbitrarily that the table has 5 columns)
<table class="kOverzicht kOverzichtFirst">
<tr>
<td colspan="5">woensdag 26/02</td>
</tr>
<!-- other rows go here -->
</table>
But to address the question as asked, you can style text inside a tr element like the text content of any other element, e.g.
tr { color: red; font-weight: bold }
However, with the invalid markup as in the question, the tr element has no content. You can see this by looking at the page in the developer tools of a browser. The browser has parsed it so that the text data precedes the entire table and the tr element is empty, <tr></tr>, so the style has no effect.
If you use valid markup with e.g. a td element inside tr, the text will be content in td. Setting text properties on tr may have an effect on it via inheritance; this happens for color, font-weight, and any other property.
It is possible to create a tr element with text directly inside it, but only using scripting, not via markup. Example:
<table id=t>
</table>
<script>
var row = document.createElement('tr');
row.textContent = 'woensdag 26/02';
document.getElementById('t').appendChild(row);
</script>
This is normally not recommended, for several reasons, but this is part of the answer to the question asked: to style text in a tr directly (and not via inheritance), you would need to create the td element with JavaScript.
I've run into a curious problem; I've got a form inside a <tr>, however the form refuses to wrap any tags inside it. I've made a quick JSFiddle here to play around with. Firebug reports that the form isn't wrapping anything:
The <form> element is greyed out and not wrapping anything. The HTML for this test is below
<table>
<form>
<tr>
<td>Input</td>
<td>Another input</td>
</tr>
<tr>
<td colspan="4"><span>Other stuff</span></td>
</tr>
</form>
<tr>
<td>
Rows not affected by the form
</td>
</tr>
<tr>
<td>
Rows not affected by the form
</td>
</tr>
</table>
As can be seen, the form holds two trs in the written markup. I read here that this is invalid, so my question is can I create a form that holds two or more trs and an arbitrary amount of other elements inside a table? The table has other rows in it not associated with the form, so putting a <form> round the entire table is unhelpful, although seeing as the other rows won't have any inputs for the form (POST request), I suppose a form could be put around the entire table.
Which is a better solution; whole-table wrap, or a working fix for just enclosing the needed rows in a form tag? I know I could put a table inside a td > form, but then the column widths wouldn't be the same in the nested table, which is why I came to ask this question.
You cannot interrupt the <table> structure with any tags besides <thead>, <tfoot>, <tbody>, <tr>, <th>, or <td>. You form tags need to be encapsulated between two <td> or your entire <table> needs to be placed within the <form> tag.
<table>
<tr>
<td>
<form>
...form data...
</form>
</td>
</tr>
</table>
..or..
<form>
<table>
...
</table>
</form>
you can only put a form inside a td basically, so you could put those 2 rows inside a new table that you create inside a td
like ...
<table><tr><td><form><table><tr>...</tr><tr>...</tr></table></form></td></tr><tr>...</tr><tr>...</tr></table>
The <form> tag can only be placed inside a <td> element or outside the <table> in this case.
If I were you, I'd just put the <form> around the whole table since you said there won't be any other forms within it.
Or, you could replace the <table> completely with <div>s instead that use display: table; or display: table-cell;.
Background: I am writing a Java app which auto generates a HTML table. As well as adding table rows, this app may insert hidden inputs. However, at present it simply inserts them into the table at the next opportunity, for example:
<table>
<tr> ... </tr>
<input type="hidden" />
<tr> ... </tr>
</table>
So, my question: Is it valid HTML to insert a hidden input between rows like this, or is this likely to cause problems?
It's not valid.
<!ELEMENT TABLE - -
(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
No, it's not.
You should use the W3C validator and check by yourself your webpages : http://validator.w3.org/.
It's not valid.
From http://validator.w3.org/
Line 9, Column 27: document type does not allow element "input" here
It's not valid, after closing </tr> tag it can have only <tr> or </tbody> or </table>. If you test it with w3c validator It will fail.
I frequently find myself wanting to make a table of forms -- a bunch of rows, each row being a separate form with its own fields and submit button. For instance, here's an example pet shop application -- imagine this is a checkout screen which gives you the option to update the quantities and attributes of the pets you've selected and save your changes before checking out:
Pet Quantity Color Variety Update
snake 4 black rattle update
puppy 3 pink dalmatian update
I would love to be able to do this using HTML that looks like this:
<table>
<thead><tr><th>Pet</th> <th>Quantity</th> <th>Color</th> <th>Variety</th> <th>Update</th></tr></thead>
<tbody>
<tr>
<form>
<td>snake<input type="hidden" name="cartitem" value="55"></td>
<td><input name="count" value=4/></td>
<td><select name="color"></select></td>
<td><select name="variety"></select></td>
<td><input type="submit"></td>
</form>
</tr>
</tbody>
</table>
This is basically a table full of forms, one form per row. Hitting update once allows you to update that specific row (this is not a real example, my real applications really do require independence of rows).
But this is not valid HTML. According to spec, a <form> has to be either completely inside a <td> or completely outside a <table>. This invalid html breaks javascript libraries and is a huge pain to deal with.
I end up making one table to contain column headings, and then making one table per form. But this requires fixed column widths to have the inputs lined up in neat columns, which is sub-par. How do you end up dealing with this problem? Is there an obvious easy solution I'm missing? How to I make a table of forms?
You can use css to give table layout to other elements.
.table { display: table; }
.table>* { display: table-row; }
.table>*>* { display: table-cell; }
Then you use the following valid html.
<div class="table">
<form>
<div>snake<input type="hidden" name="cartitem" value="55"></div>
<div><input name="count" value=4/></div>
</form>
</div>
The trick here is to just use a single form, e.g.
<form>
<table>
<!-- rows... -->
</table>
<p><input type="submit" value="Update quantity"></p>
</form>
Say you have a product snake with id 6. You then name the input for that item's quantity field quantity[6].
I don't know what server side language you are using, but in PHP you can then iterate over the quantites and update based on the ID. You'd get an array like this:
$_POST['quantity'] = array(
'6' => 4
)