Why would someone use invalid html? - html

I think I found some typos in code I'm supporting and posted it to a local site as a funny example of invalid code, and then someone said that sometimes this invalid usage is correct.
Why would someone might need this code?
<table>
<form>
<tr>
<td></td>
</tr>
</form>
<form>
<tr>
<td></td>
</tr>
</form>
</table>
When can it be better than the following?
<table>
<tr>
<td>
<form></form>
</td>
</tr>
<tr>
<td>
<form></form>
</td>
</tr>
</table>
Or this:
<form>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</form>
<form>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</form>
I played with JSFiddle and can't find HTML decision, so maybe that's a reason.
But I think that JavaScript or CSS way would be better.

And then some person said me that sometimes this invalid usage is correct.
By definition, invalid code isn't correct.
Can you please explain me why someone might need this code?
With a single cell per row? There isn't even a half good reason. There shouldn't be a table there in the first place because it wouldn't be tabular data.
If there were multiple cells per row, then it would be nice to be able to have a form per row (for an "edit this entry" thing). It isn't necessary though, as you can give each input a unique name, and then determine which row to process based on which submit button was clicked (since only the clicked submit button will be successful and therefore have its name/value pair submitted to the server).

This is a way to get the two form elements to align with each other using table-based UI alignment. It used to be quite common before CSS was widely supported in browsers.
Today one would do that in CSS with your preferred markup.

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.

What is the best way to get a form row into a table?

I'm building an app that displays a table with some information. I want the user to be able to click on the cells and have a row slide out below it containing a form in which an action can be made.
so it would look like this:
<table>
<tr>
<td>some info 1</td>
<td>some info 2</td>
<td>some info 3</td>
</tr>
<tr>
<form> some form that spans the entire row + submit button </form>
</tr>
</table
The form would be hidden and by clicking on one of the cells the form would slide down.
The problem i'm facing is that it is not possible to render a form as a table row. I have read multiple sources that say it can't be done. I can render it inside a single cell but the form is too big for that.
One solution i read would be to wrap the entire table with a form tag and have multiple submit buttons. This to me feels like bad practice and I'm not sure it would work.
I've also looked into recreating the table with div's however every solution i find uses 'display: table' which has the exact same problem.
What is the best way to handle this? (i'm using Ruby on Rails)
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<form action="">
<td colspan="3"><input type="text"></td>
</form>
</tr>
</table>
have you tried using colspan?
My advice is to replace table with divs if your project allows you to do it. You can use bootstrap (https://getbootstrap.com/examples/grid/) for making this easier.
Why:
1. Cleaner code
2. You can manipulate the divs easier than table raws/cells...
3. You can duplicate div as fast as tr .
Give it a try and than take your decision.

CSS to mimic simple table within div

I have used some AJAX to output HTML to a div.
I thought the AJAX would let me display a table, but since it outputs to a div, turns out, it does not. <td> codes etc. are ignored. I know that table-less display is considered better, anyway, however I am very weak in CSS.
Can anyone suggest how to display the following simple output without tables. I mainly need to make columns line up when text is different length.
HTML
<div id="displayhere"></div>
Output I would like to go into div except not sure how to put table in div:
<tr><td colspan=2>Heading</td></tr>
<tr><td>Short text option 1</td><td><input type="checkbox"></td></tr>
<tr><td>Really long text Option 2</td><td input type="checkbox"></td></tr>
All you need to do, in simplified form is:
var output = '<tr><td colspan=2>Heading</td></tr><tr><td>Short text option 1</td><td><input type="checkbox"></td></tr><tr><td>Really long text Option 2</td><td><input type="checkbox"></td></tr>',
table = $('<table />').appendTo('#displayhere'),
tbody = $('<tbody />').html(output).appendTo(table);
JS Bin demo.
You can have tables inside div tags..the following works fine
<div id="displayhere">
<table>
<tr>
<td colspan=2>Heading</td>
</tr>
<tr>
<td>Short text option 1</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Really long text Option 2</td>
<td> <input type="checkbox"></td></tr>
</table>
</div>
As #DavidThomas implies, you can have an HTML table inside a <div>, you just can’t have <tr> tags without wrapping them in a <table> tag.
I’d note that the HTML you want to insert can also be improved in a couple of ways:
There is a tag for heading cells inside tables: <th>. If the heading applies to several rows, then you should wrap those rows in a <tbody> tag, and set the scope attribute of the <th> to rowgroup
When you’re labelling a form control, you should wrap the label text in a <label> element, and set the <label>’s for attribute to the id of its form control.
Here’s the improved code. Screen reader users will find it easier to deal with this code:
<tbody>
<tr>
<th scope="rowgroup" colspan="2">Heading</th>
</tr>
<tr>
<td><label for="option1">Short text option 1</label></td>
<td><input id="option1" type="checkbox"></td>
</tr>
<tr>
<td><label for="option2">Really long text Option 2</label></td>
<td><input id="option2" type="checkbox"></td>
</tr>
</tbody>

How do I make a table to hold the content in my design?

I created a design for my website. I am planning to make it with TABLES because it seems to be the easiest. The tables are not going the way I intended.
There was a problem putting the code on the page so I put my HTML document (.html) and the way I want it to look (.jpg) in the below zip-file link:
http://ericlounge.host22.com/000/22014/0aa.zip
If someone could give me the code or explain my error that would be great!
I would avoid using tables, but it's your choice.
<Table>
<TR>
<TD rowspan ="3">
Navigation
</TD>
<TD>
TITLE
</TD>
<TD rowspan ="3">
SideBar
</TD
</TR>
<TR>
<TD>
ADS
</TD>
</TR>
<TR>
<TD>
Content
</TD>
</TR>
</Table>
This does not answer your question, however, it will give you reasons why you should look at a different approach for your layout/design rather than tables.
Why not use tables for layout in HTML?
To counteract the "tables is the easiest" option then have a look at Yahoo's YUI templates and examples. These can probably produce exactly what you are after with little effort.
http://developer.yahoo.com/yui/grids/

html table syntax validation

This should be an easy one.
I have a table like so:
<table>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
My firefox 3 validator says this is acceptable code. It just seems wrong to me, are there any possible issues leaving the table rows uneven like this? It works in IE7 too.
You should use 'rowspan' or 'colspan' attributes
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</table>
Table rows are not required to have the same number of cells. The number of columns in the table is determined from the row with most cells.
Your second table row will just have three cells that are blank (which is not the same as empty cells).
If you want to use uneven amounts of rows/columns, you need to should use rowspan and/or colspan attributes to indicate this.
eg:
<table>
<tr><td></td><td></td><td></td></tr>
<tr><td colspan="3"></td></tr>
</table>
As guffa corrected me below, colspan isn't technically needed, but it never hurts to be explicit about your intent.
Well, there are no syntax errors there, and I really can't see why you should be sceptical about a table like that, as long as you use the colspan attribute of the td-element:
<table>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</table>
Hope that helped.
That code is fine from a structural point of view. It's valid XHTML. Compare this:
<orders>
<order id='2009/1'>
<item id='1'/><item id='2'><item id='3'/>
</order>
<order id='2009/2'>
<item id='33'/>
</order>
</orders>
It might look strange though, hence the suggestion to use colspan. That way you can get the single TD to fill up the row, instead of being the width of the TD above it.