Multiple thead getting created in DOM - html

Is there anything wrong with the HTML below?
It creates two thead's in the DOM.
The source (Ctrl+U) looks okay - exactly how I've written.
I am using Firefox.
<html>
<body>
<table id="interactions" class="tablesorter" style="width:600px; height=1024px">
<thead>
<tr>
<th width="800">Charts</th>
<th width="20">Chi Square p-value</th>
</tr>
<thead/>
<tbody></tbody>
</table>
</body>
</html>
Here's screenshot of DOM for the HTML.

<thead/> is a self-closing tag, not a closing tag.
Since <thead>s cannot be nested, the parser implicitly closes the previous tag first.
Move the /.

Related

How Browser Engine works?

Here are my HTML test codes using Google HTML/CSS guide.
<table>
<thead>
<tr>
<th>Date
<th>Country
<tbody>
<tr>
<td>24/07/2018
<td>Myanmar
<tr>
<td>31/06/2018
<td>France
</table>
The following is how browser interprets it.
<table>
<thead>
<tr>
<th>Date
</th>
<th>Country
</th>
</tr>
</thead>
<tbody>
<tr>
<td>24/07/2018
</td>
<td>Myanmar
</td>
</tr>
<tr>
<td>31/06/2018
</td>
<td>France
</td>
</tr>
</tbody>
</table>
Here is my questions.
How the browser detect the lack of closing tag and how they interprets it.
It is preferable to use without closing elements? If it is, when should I use?
If it is not preferable, why?
Will it be impact on styling and adding interactivity on HTML semantic style?
Answers:
This is beyond the scope of SO, but just like any compiler detects something that opened is not closed. You can try and program something that identifies a valid bracket series, it would probably be similar.
Not using closing elements may break your page beyond being horribly un-maintainable. Always use closing elements.
See 2.
See 2.
Browsers sometimes can guess what you meant (better say, they parse luckily in a way that produces what you meant), but might also be wrong. See this:
<div>Hello<span>world
is this:
<div>Hello</div><span>world></span>
or
<div>Hello<span>world></span></div>
both are valid, and the browser has no idea which you meant. If you really want to get into how browsers are supposed to parse HTML, see this great link by
#modu and #kalido: http://w3c.github.io/html/syntax.html#tokenization . You may be able to workout how a browser should parse the above line.

Why does the link appear before the table when it's after it in the HTML?

<!DOCTYPE html>
<html>
<head>
<title>Firecore's Profile</title>
</head>
<body>
<div style="background-color:#DC143C; text-align:center">
<p><h1>Firecore Starblade</h1></p>
</div>
<p style="text-align:center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRz83KYRPqRKFLb4rtJdS6JzGL-OZ-OhSVE5nOz1Q7CZ3seOe1-"; width="10%" ; height="10%">
</p>
<div>
<table border="1px" align="center">
<thead style="background-color:#DC143C">
<tr>
<th>Attributes</th>
<th>HP</th>
<th>AP</th>
<th>Dex</th>
<th>Str</th>
<th>Int</th>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color:#DC143C"><strong>Value</strong></td>
<td>100</td>
<td>50</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
</tbody
</table>
</div>
<div style="text-align:center">
Back
</div>
</body>
</html>
Just starting out learning HTML. Making a practice site and ran into this problem. Tried googling it but unable to locate the cause. Not understanding why the "Back" HyperLink is showing above the table instead of below. I thought maybe it was because of the uses of p and div elements but i tried different combos with no luck. Thanks for your help in advance.
This seems like a simple problem, but it's actually really interesting. On a simple level, the problem is that the </tbody> tag is missing the closing >. Put it in and your code works.
But the more interesting question is why?
Well, it turns out that the problem is that you are in fact not closing the table tag. Your missing > essentially means you have a tag that looks like this: </tbody </table>. That's one tag and the browser will think "ah, we're closing the tbody and we've got some other stuff that doesn't make sense here so we're going to ignore it."
So you never actually close the table tag. This means that you now have some invalid markup in your table. To be precise, the following code is now part of your table's code:
</div>
<div style="text-align:center">
Back
</div>
</body>
</html>
This is handled according to the rather obscure rules listed here in the HTML5 specification section "Unexpected markup in tables". The basic meaning of all that specification (which the W3C confesses is "for historical reasons, especially strange") is that all the unexpected/invalid markup inside the table gets put before the beginning of the table.
That's why your link does the surprising thing of moving before the table. A simple mistake (the missing >) has ended up sending your browser down a whole rabbit warren of mistaken parsing.
This is because you have a broken close tag for tbody.
<div style="background-color:#DC143C; text-align:center">
<p>
<h1>Firecore Starblade</h1>
</p>
</div>
<p style="text-align:center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRz83KYRPqRKFLb4rtJdS6JzGL-OZ-OhSVE5nOz1Q7CZ3seOe1-" ; width="10%" ; height="10%">
</p>
<div>
<table border="1px" align="center">
<thead style="background-color:#DC143C">
<tr>
<th>Attributes</th>
<th>HP</th>
<th>AP</th>
<th>Dex</th>
<th>Str</th>
<th>Int</th>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color:#DC143C"><strong>Value</strong>
</td>
<td>100</td>
<td>50</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
<div style="text-align:center">
Back
</div>
Close your
https://jsfiddle.net/Delorian/pygbjfk6/
</tbody>
P.S. using JS Fiddle or a similar tool is a good way to learn HTML & CSS, as is getting to grips with Developer Tool in Chrome for manipulating HTML, CSS & JS on the fly.

Attaching an Href to a row inside a table

I am using html in a .php file to code. I have a statement:
<html>
<tr>
<td>Hi<td>
<td>Test<td.
</tr>
</html>
How can I attach an href to the row? Simply adding href in the tag didn't work. Anybody know how? Note: The table was defined earlier in the code this is the snip-it portion of the row.
You do not attach href to row instead you better do as
<table class="table table-stripped">
<tr class="selectedRow">
<td>Hi</td>
<td>Test</td>
</tr>
</table>
then using jquery :
$('.selectedRow').click(function(){
alert('do something');
});
View LiveWeave

How to get access to no-existing tag?

If you create following HTML below:
<table>
<tr>
<td></td>
<td>Last1</td>
<SPAN><FONT>test1</FONT></SPAN>
</tr>
</table>
and check DOM model you will see that IE(maybe others) create tag with no-name.
Here is link to screenshot Screenshot:
Are there any possibility to get access to this tag or not ?
Your HTML is invalid.
You can only put <td> and <th> elements directly inside <tr>s.
The browser is creating this tag in an attempt to fix your broken markup.
You should correct your HTML.

Is there a tag in XHTML that you can put anywhere in the body - even inside TABLE elements?

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>