<table>
<td>cell1</td>
<td>cell2</td>
</table>
I found out that this tags work on ie8, firefox 11 and chrome, but not sure whether this is valid by standards and work on all major browsers.
All browsers accept "quirks" in HTML layout and will render a "best guess" based on what they find. But in the HTML specifications, a <tr> tag is DEFINITELY required — regardless of whether it works or not, you should always use valid HTML!
Check early, check often!
http://validator.w3.org/
<tr> tag is of course required with <table>, it specifies the begining and ending of the particular row, so it can't be neglected.
Related
How to align all columns by colgroup? It works with colspan?
Example
This HTML here was tested with Firefox and Chrome, but no browser renderize the center for all expected columns.
<table border="1" width="100%">
<colgroup>
<col style="text-align:center;background-color:red"/>
<col align="center" valign="bottom" style="background-color:blue"/>
<col align="center" valign="top" style="background-color:yellow"/>
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td align="center">$53</td>
</tr>
<tr>
<td><big>5869207</big></td>
<td>My first CSS</td>
<td><small>$49</small></td>
</tr>
</table>
Use this example (copy/paste to) at w3schools.com/tags.
PS: What is wrong with align and valign attributes? Style (by text-align) also not responding.
EDIT
As I said above, I need a solution "by colgroup". It can be also "by colgroup or col tags with style attribute".
My template system need to use colgroup (!), not is valid a solution without colgroup.
My system not need to compatiple with HTML5, it uses something like "XHTML module" (see ex. DTD).
Related questions
Is html <COL align> deprecated? : not the same, because my problem is about XHTML, not about HTML5 (that is not XML and is a "plan for future standard").
If you take a look at http://www.w3schools.com/tags/tag_colgroup.asp you will see that the tag is essentially being phased out as of html5. It is likely that your aligns arent working because your doctype is set to HTML5. In practice it would be not good to use a tag that is going out the door but if you have to use it try setting your doctype to html 4, otherwise I would recommend what Kontakt has said and use the CSS selector :nth-child.
Edit: I looked into it further and did some tests. Set doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Then run it in IE7. You will see it works! It seems many browsers don't support it even if your doctype is set to lower than 4. However good'ol IE7 still renders it. All that can be said is that it is a deprecated tag that doesn't work properly because it became unsupported long ago.
Why not use :nth-child(x) on td elements?
Add following code to your example in HEAD section:
<style type='text/css'>
tr td:nth-child(3) {
text-align:center;
}
</style>
and see changes to your third column.
<table border="1" width="100%">
<colgroup>
<col style="text-align:center;background-color:red"/>
<col align="center" valign="bottom" style="background-color:blue"/>
<col align="center" valign="top" style="background-color:yellow"/>
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<th>3476896</th>
<th>My first HTML</th>
<th>$53</th>
</tr>
<tr>
<th><big>5869207</big></th>
<th>My first CSS</th>
<th><small>$49</small></th>
</tr>
</table>
This at least centers your text in the cells, but like ns47731 its a deprecated tag so can't expect too much.
Well, thanks for all answers and clues. My conclusion, about colgroup, is
The HTML must be standard (XHTML1.0, XHTML1.1 or HTML4.X) compliant;
... but only one browser (Opera) is standard compliant. (MS-IE have no "standard compliant" tradiction, we can ignore IE7 surprising case)
"How to center the columns by colgroup?": following the standards instructions... So, my HTML code (at this question introduction) was right all the time! My mistake was wanting to see it at any web-browser!
Some "correct questions" are (examples):
Why another browsers not implemented the colgroup standard behaviour? At #ns47731's answer we see some clues. Perhaps web-browswer developer are expecting HTML5 and not XHTML2. See also #Alohci comment below.
Why HTML5 and XHTML2 proposals diverge about colgroup? No clues at answers... My supposition: XHTML2 and HTML5 will be not 100% compatible.
Can I negociate with my "template system developer" (a XSLT developer) to add this "XHTML1 standard compliant feature"? :-) Please help me in a lobby for PMC Article Previewer.
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.
Is this code correct?
<table>
<tr>
<td>...</td>
</tr>
<tr>
<div>...</div>
</tr>
<tr>
<td>...</td>
</tr>
</table>
don't know for semantic (and W3C rules). What can you say about?
No it is not valid. tr elements can only contain th and td elements. From the HTML4 specification:
<!ELEMENT TR - O (TH|TD)+ -- table row -->
<!ATTLIST TR -- table row --
%attrs; -- %coreattrs, %i18n, %events --
%cellhalign; -- horizontal alignment in cells --
%cellvalign; -- vertical alignment in cells --
>
Not only is it not valid, but it doesn't work! This mark-up
<table>
<tr>
<td>The First Row</td>
</tr>
<tr>
<div>The Second Row</div>
</tr>
<tr>
<td>The Third Row</td>
</tr>
</table>
Produces this displayed
The Second Row
The First Row
The Third Row
The div is ejected entirely from the table and placed before it in the DOM
see http://jsfiddle.net/ELzs3/1/
No, you should not really use a div inside a table because it is a block level element. You can override the behaviour with CSS, but it will not validate with W3C if that is your goal.
No you should not use a <div> inside of a <tr>. You could use it inside <td> where as the table is a properly nested table, although this may not be best practice. You can actually override display setting of a div or any element. You could actually make a <div>(which defaults to block) display as a table-cell and vice versa.
Let's say your table row has 5 columns in general and you want your div to occupy the full width of the table. The following should do the trick.
<tr>
<td colspan=5>
<div class="some-class">
<p>Hey</p>
</div>
</td>
</tr>
This will work in quirks mode, but the browser which is compatible with standard mode will not work depend upon your doctype.
Avoiding quirks mode is one of the keys to successfully producing cross-browser compatible web content
Some modern browsers have two rendering modes. Quirk mode renders an HTML document like older browsers used to do it, e.g. Netscape 4, Internet Explorer 4 and 5. Standard mode renders a page according to W3C recommendations. Depending on the document type declaration present in the HTML document, the browser will switch into either quirk mode or standard mode. If there is no document type declaration present, the browser will switch into quirk mode.
http://www.w3.org/TR/REC-html32#dtd
JavaScript should not behave differently; however, the DOM objects that JavaScript operates on may have different behaviors.
According to w3c </TD> and </TR> tags are optional, so the following table is perfectly valid.
<table>
<tr>
<td>google
<td>chrome
</table>
And all browsers I've tested it with render the table fine. I just wanted to ask if this is generally considered safe to use, or if older browsers, which I don't have access to, cause problems. Thanks.
It reduces gzip html size on a page with many tables by a few percent.
This is valid HTML but invalid XHTML.
There's nothing intrinsically wrong with it.
If you look at the source for Google's privacy policy (or any of their other pages), you'll find some much terser HTML.
It does mean that your page will not be usable by an XML parser.
It is safe, since optionality in the standard means that all the browsers (at least the ones which even remotely matter) would have implemented this - and the browser standards compliance usually runs to the opposite side, into trying to work correctly with even invalid HTML as opposed to failing on missing optional tags.
Having said that, I find that omitting such tags makes things harder to read, which may or may not matter to you if the goal is size optimization.
P.S. Also, if you have very large tables, I wonder whether there's any overhead incurred by the browser's HTML parser when dealing with such constructs? I am not sure without benchmarking or really deep thinking about how HTML parser works in detail, but it is something that could possibly be a factor if it happens.
I strongly recommend against doing that, though it is valid in HTML4 (and 5). The bandwidth savings are miniscule when compared to the technical debt you are incurring. Also keep in mind it is not valid in XHTML, so be sure your doctype is set appropriately.
There have been optional tags in HTML since the very beginning — they are a feature inherited from SGML, and so the early browsers must have been able to deal with them. While XHTML moved away from this and required a much more uniform syntax, this doesn’t affect you unless you explicitly tell the browser to parse in XML mode. I’ve never seen a problem when using the standard parsers of HTML 4/5.
Since HTML5 so carefully describes when certain tags are optional, I would read that to imply that someone did lots of testing to make sure that in these cases, most browsers produce the same document tree.
And while the space savings are negligible, I find that leaving off the closing tags of <p>, <li>, <td>, and <tr> simply makes my life easier when I’m working in the markup, and makes me less likely to make an error.
Personally I don't consider it good practice. Looking at the spec it didn't give a whole lot of information. I know it's required for XHTML so I looked up the HTML 5 spec. HTML 5 seems to take the same take on it as HTML 4 which is what you've linked to, but gives a little more information:
A td element's end tag may be omitted if the td element is immediately followed by a td or th element, or if there is no more content in the parent element.
I advise always closing your tags. There's not really too good of a reason not to. Browsers can handle some improperly closed tags, but just to be on the safe side (and it's good programming practice!), close your tags!
Close all tags in HTML for a few reasons:
Not closing tags is tolerated, but it is not correct modern XHTML. It's deprecated much in the same way that HTML style attributes are in favor of CSS
It's more readable for the next guy if you close the tags
Browsers will actually have an easier time parsing your source if it more strictly adheres to the rules, even if that makes the source longer
Certainly if you are using only HTML there is absolutly no problem thats not the case with XHTML nevertheless i don't think you can get that much, also i suggest dont abuse tables remember div are better than tables
It’s Ok with Static Pages not for Dynamic Pages …to debug
You should close your <TR> and <TD>tags if possible, but NOT ALWAYS because in some scenarios it may disturb you. This is because the <TR> and <TD>tags could be styled to display:none while the </TR> tag couldn't. It means that a scenario in which you want to extend / limit your display with media queries, will fail if you use </TR>. Consider the following code:
<style>
#media (max-width : 480px) {
.hidden-class {display:none;}
}
</style>
<table>
<tr>
<td>cell 1</td>
</tr class="hidden-class"> <!-- this will fail! -->
<tr class="hidden-class">
<td>cell 2</td>
</tr> <!-- this could stay -->
</table>
It means that you would write it as:
<table>
<tr>
<td>cell 1</td>
</tr> <!-- this will now close the TR for every screen width, which will destroy your extenstion -->
<tr class="hidden-class">
<td>cell 2</td>
</tr> <!-- this could stay -->
</table>
Which means that the only way to do so is by OMITTING THE in the first place:
<table>
<tr>
<td>cell 1</td>
<tr class="hidden-class">
<td>cell 2</td>
</tr> <!-- this could stay -->
</table>
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>