Here is a simple table example of using table rules=all with cell borders
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Page</title>
</head>
<body>
<table rules="all">
<tr>
<td style="border: red solid 1px;">
Title
</td>
</tr>
</table>
</body>
</html>
In most browsers (including Firefox 3.6) it comes out with a red border round the cell, but in Firefox 5 (and IIRC also Firefox 4) there is no cell border.
Is this a bug in Firefox or is there some variation allowed by the specification?
On a related point, is there any point in using the table rules attribute? It doesn't seem to be deprecated but I can't see it does anything that you couldn't do in CSS. In this case, ASP.NET was generating it automatically otherwise I would never have used it.
There is no spec for what rules="all" actually does yet, so pretty much any behavior is "correct".
That said, the current Firefox behavior is to map rules="all" to some border styles in the collapsed border model. Given the details of that mapping (which are currently in the HTML5 draft at http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#tables ), the observed behavior is correct.
The 'rules' are only displayed if there are other td's to separated it from. And then the style information is partly overwritten by the adjacent cells. If you create a 3x3 table like this
<table rules="all">
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<tr>
<td>foo</td>
<td style="border: red solid 1px;">
Title
</td>
<td>foo</td>
</tr>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<tr>
</table>
FF5 will draw red lines at the right and bottom of the "Title" cell and the others black. Seems like the style information of upper and more left cells is more powerful.
Hope this helps
Cheers
tannerli
I can't answer the first part - although I was able to make it work by adding some kind of border to the table tag: http://pastehtml.com/view/b35h9852w.html
According to w3schools, you are recommended to only use CSS for this sort of styling (and I agree).
It does appear to be a bug in Firefox, though. I can't find a clear explanation either way.
Related
I've been struggling with Table-Layout and now I tried to implement the lessons in my application - and that supposedly "simple rendering exercise" still ruins my day :((
The screenshot below illustrates the problem a bit: 2 rows have a fixed height of 20px, but as the 5th col is too heigh, IE splits the neccassary "filling" equally across all rows, whereas FF respects the assign row-height and only extends the last row w/o a height-spec. (In my real case, also FF renders incorrectly and enlarges rows w fixed height).
So I wonder if there is perhaps a safe (cross-browser) solution to fix this???
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<table border="1" cellspacing="2" cellpadding="2">
<tbody>
<tr style="height:20px;"><td style="height:20px;">1a</td><td>1/2</td><td>1/3</td><td>1/4</td>
<td rowspan="4" style="height: 300px;">the <span style="background-color: yellow">supacell</span> just contains a lot of text and other info, variable height etc.</td></tr>
<tr><td height="20">bla2</td><td><input type="text" /></td><td>2/3</td><td>2/4</td></tr>
<tr><td height="20">bla3</td><td>3/2</td><td>3/3</td><td><textarea cols="20" rows="4">bla</textarea></td></tr>
<tr><td colspan="4">no height</td></tr>
</tbody>
</table>
</body>
</html>
Try setting the line-height property instead/as well as the height property, the extra padding/margins you're seeing is as a result of line-height calculations, by defining it you'll be able to fix it and keep it constant between browsers.
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.
I am seeing a different behavior between Firefox and Chrome for the same HTML table.
Firefox: the space between rows are equally divided.
Chrome: the space between rows are NOT equally divided.
Could someone tell me what is going on?
jsfiddle.net
<html>
<body>
<table border="1" width="100%">
<tr>
<td rowspan="3">AAA</td>
<td>BBB</td>
<td rowspan="3"CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/></td>
</tr>
<tr>
<td>BBB</td>
</tr>
<tr>
<td>BBB</td>
</tr>
</table>
</body>
</html>
It's a known rendering issue with Chrome/Webkit browsers.
A user provided a solution here: Table cells bad rendering with Google Chrome/Webkit
You need to use close the tag by using <br/> instead of <br>.
In compliant XHTML, all tags need to be properly closed. In this case, instead of closing the tag with </br>, you use the trailing / to do it.
<br></br>
is equivalent to
<br/>
You would do the same thing with an image element:
<img src="..."/>
Had a similar issue where I get 1px space between rows in Chrome but not in other browsers. It was solved when I added the following in the the CSS.
td{
padding: 0px 0px;
position:relative;
}
The key point is setting td to "position:relative". For some reason it solved the issue. Maybe the same could help in this situation.
What if you close the third <td...
<td rowspan="3"CCC
<td rowspan="3">CCC
I am using following code to design my home page. The output (as shown below) is not appearing properly. You can see the banner going to far left and the navigation links have a huge gap in between. How to set this? Can it be done using only the DIV tag instead of TABLE?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
First Website
</title>
</head>
<body>
<table id="main" align="center" width="600 px">
<tr id="trBanner">
<td id="tdBanner">
<img src="../../../My Pictures/banner copy.bmp.jpg"
</td>
</tr>
<tr id="trNavLinks">
<td id="lnkHome">
Home
</td>
<td id="lnkLife">
Life
</td>
<td id="lnkTeachings">
Teachings
</td>
<td id="lnkExperiences">
Experiences
</td>
<td id="lnkPhotoGallery">
Photo Gallery
</td>
<td id="lnkReach">
How to Reach
</td>
<td id="lnkContact">
Contact Us
</td>
</tr>
</table>
</body>
</html>
alt text http://www.freeimagehosting.net/uploads/b122c4ef21.jpg
Without seeing your code very long - don't use tables!
I know it's hard for those people who developed a long time with tables in webdesign, but belive me - after you learned how to design it with CSS & DIV-Tags, you will thank god for this!
Here is a tutorial for you: http://www.colorplexstudios.com/articles/div_web_design_tutorial/
And if you want to have an answer to your code-question:
It's because you have 1 cell in the first row and 3 cells in the second row. Use the colspan-attribute. You find a tutorial for this here: http://www.htmlcodetutorial.com/tables/index_famsupp_30.html
Don't use tables, use a right combination of div tags and position attributes. They're way better than tables, and more editable if you need to make any changes.
Eek, remove the tables. Use a UL instead, with display: inline on it in the CSS. Then adjust it to your liking (margin, padding). Put that inside of a div, and position it in your page.
As others have recommended, tables are not the most appropriate element for your site's layout. However, the simple fix is:
<td id="tdBanner" colspan="7">
This will make your banner span the entire width of your table. On a side note, the ids on a page should be unique, so if you need to give an id to your td tags, they should be different than the a tags.
I would check out some of the CSS tutorials that others have linked to.
I have some pretty simple HTML and CSS that doesn't work in Internet Explorer 6.
<!DOCTYPE HTML>
<html>
<head>
<style>
table td.one.read {background-color:#FFD700;}
table td.two.read {background-color:#0000ff;}
table td.three.read {background-color:#ff8c00;}
</style>
</head>
<body>
<table>
<tr class="head">
<td></td>
<td class='one read'>one</td>
<td class='two read'>two</td>
<td class='three read'>three</td>
</tr>
<tr>
<td>Legend</td>
<td class='one read'>1</td>
<td class='two read'>2</td>
<td class='three read'>3</td>
</tr>
</table>
</body>
</html>
A simple table that has different background colors for each column. I've removed a bunch of other CSS/HTML to keep things simple. The problem is all the columns show up as the same orange color in Internet Explorer 6, works fine in Firefox.
How can I make it work?
This is a bug in IE6.
If you have a CSS selector with multiple class names (eg, .three.read), IE6 will ignore all of the class names except the last one.
Therefore, IE6 sees three CSS rules for the selector table td.read.
To solve this, you can combine your classes. (eg, <td class='OneRead'> and table td.OneRead {background-color:#FFD700;})
Multiple classes are not supported in IE6, have to wait a few more years before IE6 dies. For now though, you can create separate classes for colors.