Can you have cell specific background colors in the table-plus macro on Confluence?

Question

I am using this table-plus macro with Confluence:

http://confluence.atlassian.com/display/CONFEXT/Table-plus+macro

Can I have cell level formatting? I only see column level formatting.

Answer 1

It is not possible to do this with the {table-plus} macro. However, you can do it in Confluence with a more advanced table formatting plugin as described by Zac.

Answer 2

How to do this all depends on what plugins you have obtained and enabled. The built-in table cell syntax, while concise, has nowhere to put such customization. You may want to look at Adaptavist's plugin for Content Formatting Macros, especially the table macro -- you can throw bgcolor attributes on the cells with no problem.

Of course, after a point, it starts to look a lot like html, in which case you may just want to enable the HTML plugin that ships with Confluence, but you should first be aware of the security implications of doing so; it may not be appropriate for your environment.

Answer 3

You can apply a style to the table, table row or table cell using {html} or user defined macro.

Here are three macros for setting the background colour for a table cell, table row or the whole table.

Table Cell Background Colour macro

    ## Macro Title: tblcellbg
    ## Macro Description: Set background colour for a single table cell
    ## Macro has a body: N
    ## Categories: Formatting
    ## Body Processing: No body
    ## Output Format: HTML
    ## Output: JavaScript. Sets table cell background color via CSS 
    ## Developed By: Underverse (http://stackoverflow.com/users/2093966/underverse)
    ## License: BY-NC-SA
    ## @param bgcolour:title=Background Color|type=string|required=true|desc=HTML colour or a HTML numeric #value
    ##
    ## Check for a blank first parameter
    ##

    #if ($parambgcolour && $parambgcolour.length() > 0)  ## If a parm name was used 
       #set ($bgcolor = $parambgcolour)                           ## then set the value locally
    #elseif ($param0 && $param0.length() > 0)                 ## if no parm name
       #set ($bgcolor = $param0)                                     ## then use the first value
    #else
       #set ($bgcolor = "#DDFADE")                                 ## no value so set a default
    #end

    #if ($bgcolor.contains('#'))                                     ## For HTML colours #etc 
    #set ($bgcolorclass = $bgcolor.replaceAll('#', 'A'))   ## Substritute any other char
    #else
    #set ($bgcolorclass = $bgcolor)                            ## or use the colourname itself
    #end

    <script type="text/javascript" class="$bgcolorclass$bgcolorclass">
    AJS.$(document).ready(function() {
        AJS.$(".$bgcolorclass$bgcolorclass").closest("td").css({"background-color": "$bgcolor"});
    });
    </script>

You can then use this macro in a wiki markup table, wiki macro table or into the wiki editor to set the background colour of the table cell.

    || Heading 1|| Heading 2 || Heading 3 | 
    |  {tblcellbg:lightgreen} Apple | {tblcellbg:#FFFF33} Banana |  Pear | 

Table Row Background Colour macro

    ## Macro Title: tblrowbg
    ## Macro Description: Set background colour for a table row
    ## Macro has a body: N
    ## Categories: Formatting
    ## Body Processing: No body
    ## Output Format: HTML
    ## Output: JavaScript. Sets table row background color via CSS 
    ## Developed By: Underverse (http://stackoverflow.com/users/2093966/underverse)
    ## License: BY-NC-SA
    ## @param bgcolour:title=Background Color|type=string|required=true|desc=HTML colour or a HTML numeric #value
    ##
    ##
    ## Check for a blank first parameter
    ##

    #if ($parambgcolour && $parambgcolour.length() > 0)  ## If a parm name was used 
       #set ($bgcolor = $parambgcolour)                           ## then set the value locally
    #elseif ($param0 && $param0.length() > 0)                 ## if no parm name
    #set ($bgcolor = $param0)                                     ## then use the first value
    #else
       #set ($bgcolor = "#DDFADE")                                 ## no value so set a default
    #end

    #if ($bgcolor.contains('#'))                                     ## For HTML colours #etc 
    #set ($bgcolorclass = $bgcolor.replaceAll('#', 'A'))   ## Substritute any other char
    #else
    #set ($bgcolorclass = $bgcolor)                            ## or use the colourname itself
    #end

    <script type="text/javascript" class="$bgcolorclass$bgcolorclass">
    AJS.$(document).ready(function() {
        AJS.$(".$bgcolorclass$bgcolorclass").closest("tr").css({"background-color": "$bgcolor"});
    });
    </script>

Put the macro in one of the cells in the row to be set.

    || Heading 1|| Heading 2 || Heading 3 | 
    |  {tblrowbg:lightblue} Apple | Banana |  Pear | 

Use this macro with {tblcellbg} for finer control of cell colours.

    || Heading 1|| Heading 2 || Heading 3 | 
    |  {tblrowbg:lightblue} Apple | {tblcellbg:#FFFF33} Banana |  Pear | 

Table Background Colour macro

    ## Macro Title: tblbg
    ## Macro Description: Set background colour for a table
    ## Macro has a body: N
    ## Categories: Formatting
    ## Body Processing: No body
    ## Output Format: HTML
    ## Output: JavaScript. Sets table background color via CSS 
    ## Developed By: Underverse (http://stackoverflow.com/users/2093966/underverse)
    ## License: BY-NC-SA
    ## @param bgcolour:title=Background Color|type=string|required=true|desc=HTML colour or a HTML numeric #value
    ##
    ##
    ## Check for a blank first parameter
    ##

    #if ($parambgcolour && $parambgcolour.length() > 0)  ## If a parm name was used 
       #set ($bgcolor = $parambgcolour)                           ## then set the value locally
    #elseif ($param0 && $param0.length() > 0)                 ## if no parm name
       #set ($bgcolor = $param0)                                     ## then use the first value
    #else
       #set ($bgcolor = "#DDFADE")                                 ## no value so set a default
    #end

    #if ($bgcolor.contains('#'))                                     ## For HTML colours #etc 
    #set ($bgcolorclass = $bgcolor.replaceAll('#', 'A'))   ## Substritute any other char
    #else
    #set ($bgcolorclass = $bgcolor)                            ## or use the colourname itself
    #end

    <script type="text/javascript" class="$bgcolorclass$bgcolorclass">
    AJS.$(document).ready(function() {
        AJS.$(".$bgcolorclass$bgcolorclass").closest("table").css({"background-color": "$bgcolor"});
    });
    </script>

Put the macro in one of the cells in the table.

    || {tblbg:lightblue} Heading 1|| Heading 2 || Heading 3 | 
    |   Apple | Banana |  Pear | 

Can be used with {tblrowbg} and {tblcellbg}.

JavaScript

Alternatively, wrap the javascript which sets the cell/row/table background colour {html} and put it into the table as code.

JS Table Cell BG Colour

    || Heading 1|| Heading 2 || Heading 3 | 
    |   Apple |{html}<SCRIPT class=AFFFF33AFFFF33 type=text/javascript>
    AJS.$(document).ready(function() {
        AJS.$(".AFFFF33AFFFF33").closest("td").css({"background-color": "#FFFF33"});
    });        </SCRIPT> {html} Banana  |  Pear | 

JS Table Row BG Color

    ||  Heading 1|| Heading 2 || Heading 3 | 
    |  {html}<SCRIPT class=lightbluelightblue type=text/javascript>
    AJS.$(document).ready(function() {
        AJS.$(".lightbluelightblue").closest("tr").css({"background-color": "lightblue"});
    });
    </SCRIPT>{html} Apple | Banana |  Pear | 

JS Table BG Color

    || {html}<SCRIPT class=pinkpink type=text/javascript>
    AJS.$(document).ready(function() {
        AJS.$(".pinkpink").closest("table").css({"background-color": "pink"});
    });
    </SCRIPT>{html} Heading 1|| Heading 2 || Heading 3 | 
    |   Apple | Banana |  Pear |