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.
Related
How do I pick up <input>s belonging to a certain <form> using XPath? By belonging, I mean input where the .form attribute in JavaScript equals the specific form instance.
In the general case, I want an XPath that returns the same inputs this JavaScript returns:
Array.prototype.filter.call(document.getElementsByTagName("input"),
function(x) { return x.form == f1; })
Note: This does not mean is-a-child-of w.r.t. the DOM-tree!
For example, given the following (malformed) html:
<html>
<body>
<table>
<form name="foo">
<input name="bar"/>
<tr>
<td>
<input name="baz"/>
</td>
</tr>
</form>
</table>
</body>
</html>
bar.form == foo and baz.form == foo hold true, but the DOM-tree can be generated in a way that "//form[#name='foo']//input" contains neither bar nor baz.
e.g. Chrome/Firefox/IE will produce this DOM-tree for the above source:
<html>
<head/>
<body>
<input name="foo"/>
<table>
<form name="bar"></form>
<tbody>
<tr>
<td>
<input name="baz"/>
</td>
</tr>
</tbody>
</table>
</body>
</html>
P.S. An acceptable answer could simply state why this isn't possible.
Edit: Clarified the meaning of the bottom example. Updated the example to show why simply traversing the DOM-tree will not work.
Your input is invalid HTML. Form inputs have to be inside a <form/> element, otherwise it is not clear how they correlate. For example, in the following HTML snippet, how should a browser or any HTML parser now to which form the input belongs:
<table>
<form name="foo"></form>
<form name="foo2"></form>
<tr>
<td><input name="bar" /></td>
</tr>
</table>
That being said, many browser are very relaxed and basically allow HTML designers to not use any standard. So they could use metric and say each input belongs to the last preceding form element. Maybe their heuristic is more elaborate, so you might not get each and every corner-case with this. However, the following XPath should work at least for your two examples:
//input[(preceding::form)[last()]/#name="foo"]
This way, you get all input elements, which had as last form element the one with the specified name, in this case foo.
With the examples you posted, I don't see this possible. You would do this with an event based (SAX) parser, where you keep the name of the "last seen form name" and allocate each input element to that form.
Of course, especially for the second example, this isn't how the browser sees it.
Since I can't use comments yet:
#dirkk: preceding won't work, because the axis is "excluding any ancestors". So for the valid HTML case, it actually doesn't work, as a form is considered an ancestor. It's a good idea though, maybe preceding|ancestor will work.
In vs 2012 asp.net empty site I am using html4.01 for table desgin
I have a <div> (a couple actually) and i keep getting a warning that reads:
</div>
<div style="text-align:center;">
<table style="text-align:left; border-color:aqua;background-color:gold;border-width:2px;"cellspacing ="0" cellpadding ="8" rules ="none" width ="540">
<tr>
<td valign ="top">
Me
</td>
</tr>
</table>
</div>
Warning 1 Validation (HTML 4.01): Element 'tr' cannot be nested within element 'div'.
what would cause this?
Looking at the code you've posted:
You have a table, and the nesting looks like you intended to put the <tr> inside it.
However, the table is closed on the same line as it is started, so the <tr> is actually outside the table, after it.
Find the closing </table> tag, and move it to where it should be, after the rest of the code that is meant to be inside the table.
[EDIT]
Okay, you've now fixed that in the code in the question.
The next problem I can see is that your table tag has the following:
border-width:2px;"cellspacing ="0"
^^^
missing space here
The missing space before the cellspacing attribute will cause the tag to be invalid, which could also be breaking it.
For further HTML validation, I recommend you put your HTML code through the W3C's validator, which will highlight any further issues you may have with your HTML.
what is wrong with the following?
<table>
<tr> <th> Blah </th> <th colspan="2"> Something </th> </tr>
<tr> <td> .. </td> <td colspan="2"> ... </td> </tr>
</table>
It says Table column 3established by element th has no cells beginning in it.
As the error message says, there is no cell that begins in the third column. It thus violates the HTML table model as defined in HTML5, rather technically in 4.9.12 Processing model. Basically, the point is that you cannot create a column that consists only of slots created by cells starting in earlier columns and extending to other columns with colspan.
When using earlier versions of HTML, the error won’t be caught, since for them, validation is DTD-driven, and a DTD (document type definition, a formalized set of syntax rules written in SGML or XML) can only describe relatively simple syntax rules.
The most common cause of this problem seems to be a misguided idea of just making cells wider by using colspan. Instead, use the width attribute or, usually more preferably, the width property in CSS.
I've validated your HTML code with two doctypes:
HTML5;
XHTML 1.0 Strict.
And your document was successfully checked as valid.
You should try to revalidate it.
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.
I would like to be able to place an empty tag anywhere in my document as a marker that can be addressed by jQuery. However, it is important that the XHTML still validates.
To give you a bit of background as to what I'm doing: I've compared the current and previous versions of a particular document and I'm placing markers in the html where the differences are. I'm then intending to use jQuery to highlight the parent block-level elements when highlightchanges=true is in the URL's query string.
At the moment I'm using <span> tags but it occurred to me that this sort of thing wouldn't validate:
<table>
<tr>
<td>Old row</td>
</tr>
<span class="diff"></span><tr>
<td>Just added</td>
</tr>
</table>
So is there a tag I can use anywhere? Meta tag maybe?
Thanks for your help!
Iain
Edit: On the advice of codeka, I may look for a better difference engine and I may have found one that is attuned to finding differences in XHTML: http://www.rohland.co.za/index.php/2009/10/31/csharp-html-diff-algorithm/
You can use HTML comments and this plugin (or this one).
Can you not just modify the class of elements that have changed?
<p class="diff other-class">Something changed</p>
<table>
<tr>
<td>Old row</td>
</tr>
<tr class="diff">
<td>Just added</td>
</tr>
</table>