Tables + CSS + TinyMCE = Insanity

Aaarghh...

I am struggling to add a simple fixed data table to my MODx site... I am using 0.9.5 which comes with TinyMCE as the default editor and I am having great trouble understanding how to use it to create CSS stylable tables..

I am sure that this is due to my own inadequacies in HTML and CSS so if anyone could explain these things to me, I would be grateful.

Firstly the editor will not let me create a table without a TBODY.. even if I go to the raw HTML editing mode, and enter a table manually without a TBODY, it puts it in for me as soon as I hit "update". I know (having just looked it up) that TBODY is a required element in a table, but if the entire table is just one big TBODY then the tags can be omitted...

Secondly, the existence of the TBODY really seemed to screw up my CSS for some reason... I was using some old CSS of mine that basically went

TABLE, TD, TH {
border-width: 1px;
border-collapse: collapse;
}

But with the TBODY element in my tables, this CSS had no effect on my table cells...

If I added

TBODY {}

elsewhere in the style file - that is an EMPTY bit of styling for TBODY - then the CSS subsquently DID take effect...

Presumably this is some horrible detail about how CSS cascades from element to element, but I have been thinking about it until my head spins with no success so far..

Finally when I inspected the page source, all of my cells contain a number (which they are meant to contain) but then followed by a
tag which I certainly didn’t put in myself...

All I want is a nice simple numerical table ..

Cheers

Gordon

Some additional comments...

Firstly, my CSS problems were a caching artefact and not a genuine problem after all... I had turned off caching on MODx and cleared the cache on my browser, but had forgotten that by default all my web requests go through a caching PROXY SERVER; turning this off as well meant that changes to my CSS file were immediately reflected, so that at least the bizarre behaviour stopped.

Secondly, it seems that TinyMCE just DOES add a <TBODY> tag to tables regardless of how you enter them... this is not a problem once you are expecting it... in fact using TBODY, THEAD and TFOOTER makes my particular tables easy to style with no need for artificial classes...

Thirdly, I found a neat site

http://veerle.duoh.com/index.php/blog/comments/a_css_styled_table/

that gives a good description of styling a table with CSS; along with the comments that this blog entry generated, I now have a much better understanding of what is happening with tables... how about this

tbody tr:nth-child(odd) td

as a CSS selector for alternating rows (not that it works in current browsers, mind you) !


Cheers

Gordon