Forums

Styling tables?

Permalink
I've searched the forums but seems like I'm the only one with this challenge(?).

I'd like to style some of the tables that I insert through the content-block and can easily change the class for a table. But there are no classes on the <tr>'s making it impossible to add any advanced styles to them.

Have anybody created something which changes the way that tables are structured?

I know that it is a possibility to change the background color for each alternating row for each table, but I'm looking for a smarter way to create styles which the client can then use.

None of the addons in the market seems to solve this (maybe one, but that requires each table to be inserted through the backend which is against the idea with Concrete5).
 
s2d replied on at Permalink Reply
s2d
Hi tommyf,

You can apply classes to table rows in TinyMCE by doing the following:
- select the row you want to apply the style to by dragging your mouse cursor across the cells of the row.
- click on the Table Row Properties icon in the toolbar. (You have to customize the editor toolbar to use the Advanced toolbar set in order to see this option.)
- under the General tab, choose a class to apply to the row from the Class drop-down list.
tallacman replied on at Permalink Reply
tallacman
Alternately you could use:

tr:nth-child(odd) {}
tr:nth-child(even) {}


which works in all *modern* browsers.

steve
tommyf replied on at Permalink Reply
Even though IE might not be a modern browser, then it is still the most widely used browser :)

KateD: It is possible, but does not seem like the way to do it in 2011. Having to manually assign classes to each row would be a lot of tiresome work.

My vision is to be able to add a style to the table in general, and then be able to have different styles in the stylesheet so that I can easily change it everywhere if necessary.

So I think I need to look into how TinyMCE is build :)
stromberg replied on at Permalink Reply
stromberg
Tommy, if you're a little familiar with jQuery or have no problem solving this with Javascript in general, you could do the following:

1) Create CSS classes for your tables which you (or your client) later apply via TinyMCE, e.g. .myZebraStripedTable
table.myZebraStripedTable tr {
    background-color: #000;
}


2) Add this snippet to your <head>:
<script type="text/javascript">
$(document).ready(function(){
    $('table.myZebraStripedTable tr:nth-child(odd)').addClass('odd');
});
</script>


3) Create a CSS class .odd
.odd {
    background-color: #fff;
}


4) Try it out - you can finely tune this to your needs with more CSS classes and more precise selectors, e.g.
table.myZebraStripedTable tr.odd {
    background-color: #FFF;
}
table.myGiraffeStripedTable tr.odd {
    background-color: #FFCE93;
}


HTH,
stromberg
s2d replied on at Permalink Reply
s2d
Sorry, I guess I misunderstood what you were trying to do. I thought it was the rows you wanted to apply the classes to, and make it so someone with no knowledge of html/css/js could work with them.
jordanlev replied on at Permalink Reply
jordanlev
Something I've done in similar situations is use the Designer Content addon (http://www.concrete5.org/marketplace/addons/designer-content... ), create a block with just 1 field (the WYSIWYG Editor), and a sample table as HTML into the "default content" field.

What you wind up with is a Content block that starts out with a pre-styled table, with 1 or 2 example rows of data in it. The user just uses the TinyMCE toolbar buttons to insert new rows at the bottom -- TinyMCE is smart enough to copy down whatever styles were applied to the prior row into the new row. Note that you have to turn on "Advanced" or "Office" mode in Dashboard->SitewideSettings to get those toolbar buttons to appear.

This approach is a bit complicated for you as the designer, but should make it much more straightforward for the people editing the site.