[pmwiki-users] Styling table cells

Ian MacGregor ardchoille42 at me.com
Wed Oct 30 17:35:41 CDT 2013


I was doing this exact thing and found this page, which explains zebra tables and quite a bit more:
http://www.pmwiki.org/wiki/Cookbook/FormattingTables

That page is packed with useful information and it taught me how to implement colored headers and zebra tables for Tables and Table directives. It's very flexible. The $TableRowIndexMax and $TableRowAttrFmt variables allow you to do quite a lot.

If, after reading that page, you need extra help, let me know and I can give you examples from my wiki and my config.php and style.css files.

Regards,
Rev. Ian MacGregor
http://www.ianmacgregor.net

> On Oct 30, 2013, at 3:23 PM, Peter Payzant <pce at accesswave.ca> wrote:
> 
> OK, well here's another challenge: other than specifying the background colours inline, e.g.
> 
> (:headnr align=left style="background-color:#ddd":)
> (:cell style="background-color:#ddd;":)
> 
> and later
> 
> (:headnr align=left style="background-color:#eee":)
> (:cell style="background-color:#eee;":)
> 
> how could I alternate background colours on adjacent rows of the table using the style sheet? Normally I'd just assign alternating classes to the <th> and <td> elements...
> 
> Peter
> 
> 
>> On 2013-10-30 7:14 PM, Ian MacGregor wrote:
>> You're welcome. One thing I've found over the years.. with PmWiki there's always a way :)
>> 
>> This styling trick actually comes from Petko. I wanted to remove the button from one (:searchbox:) but not all of them on the site and Petko gave me this:
>> 
>> (CSS file)
>> .nobtn .searchbox {display: none;}
>> 
>> (in a wiki page)
>>>> nobtn<<
>> (:searchbox:)
>>>> <<
>> It was pure genius!
>> 
>> Regards,
>> Rev. Ian MacGregor
>> http://www.ianmacgregor.net
>> 
>>> On Oct 30, 2013, at 3:08 PM, Peter Payzant <pce at accesswave.ca> wrote:
>>> 
>>> Ian-
>>> 
>>> Thanks for the insight! I'm OK with how to use CSS, but it was the application of the << and >> that I was missing. Very clever. I knew that there had to be a way...
>>> 
>>> Peter
>>> 
>>>> On 2013-10-30 6:42 PM, Ian MacGregor wrote:
>>>> Define a special styling for a specific table in your CSS file (note the "specialtable" class):
>>>> 
>>>> .specialtable th {
>>>> text-align: left;
>>>> background-color: #eee;
>>>> line-height: 1em;
>>>> margin-top: 0.2em;
>>>> margin-bottom: 0.1em;
>>>> padding-left: 5px;
>>>> }
>>>> 
>>>> .specialtable td {
>>>> similar but not identical
>>>> }
>>>> 
>>>> In a wiki page, use the "specialtable" class to style the table:
>>>> 
>>>>>> specialtable<<
>>>> (:table:)
>>>> (:headnr:)
>>>> blah
>>>> (:head:)
>>>> blah
>>>> (:cellnr:)
>>>> blah
>>>> (:cell:)
>>>> blah
>>>> (:tableend:)
>>>>>> <<
>>>> This will style just the tables that use the specialtable class without styling all tables site-wide. You can change the class name "specialtable" to anything you want but the class in the CSS file and the styling in the wiki page must match.
>>>> 
>>>> Regards,
>>>> Rev. Ian MacGregor
>>>> http://www.ianmacgregor.net
>>>> 
>>>>> On Oct 30, 2013, at 2:12 PM, Peter Payzant <pce at accesswave.ca> wrote:
>>>>> 
>>>>> Am I missing something? I'd like to apply some CSS styling to table cells. I can make it work like this:
>>>>> 
>>>>> (:headnr align=left style="background-color:#eee;line-height:1.9em;margin-top:0.2em;margin-bottom:0.1em;padding-left:5px":)
>>>>> 
>>>>> (:cell [similar but not identical] :)
>>>>> 
>>>>> but repeating this for each cell is tedious and hard to maintain.
>>>>> 
>>>>> I tried creating pub/css/local.css and defining a style there, but rewriting the above as
>>>>> 
>>>>> (:headnr align=left class="test":)
>>>>> 
>>>>> had no effect. PmWiki has many ways to do styling; maybe I'm missing some crucial fact.
>>>>> 
>>>>> Thanks for any comments!
>>>>> 
>>>>> Peter
>>>>> 
>>>>> 
>>>>> 
>>>>> _______________________________________________
>>>>> pmwiki-users mailing list
>>>>> pmwiki-users at pmichaud.com
>>>>> http://www.pmichaud.com/mailman/listinfo/pmwiki-users
>>> 
>>> _______________________________________________
>>> pmwiki-users mailing list
>>> pmwiki-users at pmichaud.com
>>> http://www.pmichaud.com/mailman/listinfo/pmwiki-users
> 
> 
> _______________________________________________
> pmwiki-users mailing list
> pmwiki-users at pmichaud.com
> http://www.pmichaud.com/mailman/listinfo/pmwiki-users



More information about the pmwiki-users mailing list