Color tables for a shiny Confluence page

[#1]

Color tables is a user macro that makes your table awesome for you. It applies colors and styles to basic confluence table and make it shiny. 

Key features

• Ability to change colors of your choice 
• Ability to change the font family of your choice 
• Ability to change the text alignment of whole table 

## Developed by: Alana Fernando
## Shared with love


## @param style:title=style type|type=enum|required=true|desc=Choose a style.|enumValues=Style1,Style2,Style3,Style4,Style5

## @param alignment:title=Text alignment|type=enum|desc=Choose Text alignment.|enumValues=Right,Left,Center

## @param fontfamily:title=Font family|type=enum|desc=Choose font family. (some font families may not compatible with browsers)|enumValues=Times New Roman,Arial,Courier New,Tahoma,Trebuchet MS,Open Sans

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">


#if ($paramstyle == "Style1") 
<style>
.styletableth1 table.confluenceTable th.confluenceTh {
color:white; 
text-align: $paramalignment;
background: #0288D1;
border:white 4px solid;
outline: 1px solid #f2f2f2;
}

.styletableheaderfont1 th div.tablesorter-header-inner{ 
color:white; 
text-align: $paramalignment;
}

.styletableeven1 tr:nth-child(odd){ 
color:black; 
background:#E0E0E0; 
border:#1976D2 2px solid; 
}

.styletableodd1 tr:nth-child(even){ 
color:black; 
background: #FAFAFA; 
border:#1976D2 2px solid;
}

.styletable1 td{ 
text-align: $paramalignment;
border:white 4px solid;
outline: 1px solid #f2f2f2;
}
</style>
<div class="styletable1 styletableth1 styletableeven1 styletableodd1 styletableheaderfont1 " style="font-family:$paramfontfamily;">$body</div> 

#elseif ($paramstyle == "Style2") 
<style>
.styletableth2 table.confluenceTable th.confluenceTh {
color:#fff2df; 
text-align: $paramalignment;
background: #ff9e22;
border:white 4px solid;
outline: 1px solid #f2f2f2;
}

.styletableheaderfont2 th div.tablesorter-header-inner{ 
color:#fff2df; 
}

.styletableeven2 tr:nth-child(odd){ 
color:black; 
background:#ffc77d; 
border:white 2px solid; 
}

.styletableodd2 tr:nth-child(even){ 
color:black; 
background: #ffddb0; 
border:white 2px solid;
}

.styletable2 td{ 
border: white 4px solid;
outline: 1px solid #f2f2f2;
text-align: $paramalignment;
}
</style>
<div class="styletable2 styletableth2 styletableeven2 styletableodd2 styletableheaderfont2 " style="font-family:$paramfontfamily;">$body</div> 

#elseif ($paramstyle == "Style3") 
<style>
.styletableth3 table.confluenceTable th.confluenceTh {
color:#F9FBE7; 
text-align: $paramalignment;
background:#AFB42B;
border:white 4px solid;
outline: 1px solid #f2f2f2;
}

.styletableheaderfont3 th div.tablesorter-header-inner{ 
color:#F9FBE7; 
}

.styletableeven3 tr:nth-child(odd){ 
color:black; 
background:#D4E157; 
border:white 2px solid; 
}

.styletableodd3 tr:nth-child(even){ 
color:black; 
background: #F0F4C3; 
border:white 2px solid;
}

.styletable3 td{ 
border: white 4px solid;
text-align: $paramalignment;
outline: 1px solid #f2f2f2;
}
</style>
<div class="styletable3 styletableth3 styletableeven3 styletableodd3 styletableheaderfont3 " style="font-family:$paramfontfamily;">$body</div> 

#elseif ($paramstyle == "Style4") 
<style>
.styletableth4 table.confluenceTable th.confluenceTh {
color:#33691E; 
text-align: $paramalignment;
background: #7CB342;
border:white 4px solid;
outline: 1px solid #f2f2f2;
}

.styletableheaderfont4 th div.tablesorter-header-inner{ 
color:#33691E; 
}

.styletableeven4 tr:nth-child(odd){ 
color:black; 
background:#EEEEEE; 
border:white 2px solid; 
}

.styletableodd4 tr:nth-child(even){ 
color:black; 
background: #FAFAFA; 
border:white 2px solid;
}

.styletable4 td{ 
border: white 4px solid;
text-align: $paramalignment;
outline: 1px solid #f2f2f2;
}
</style>
<div class="styletable4 styletableth4 styletableeven4 styletableodd4 styletableheaderfont4 " style="font-family:$paramfontfamily;">$body</div> 


#elseif ($paramstyle == "Style5") 
<style>
.styletableth5 table.confluenceTable th.confluenceTh {
color:#EFEBE9; 
text-align: $paramalignment;
background: #BF360C;
border:white 4px solid;
outline: 1px solid #f2f2f2;
}

.styletableheaderfont5 th div.tablesorter-header-inner{ 
color:#EFEBE9; 
}

.styletableeven5 tr:nth-child(odd){ 
color:black; 
background:#D7CCC8; 
border:white 2px solid; 
}

.styletableodd5 tr:nth-child(even){ ; 
color:black; 
background: #EFEBE9; 
border:white 2px solid;
}

.styletable5 td{ 
border: white 4px solid;
text-align: $paramalignment;
outline: 1px solid #f2f2f2;
}
</style>
<div class="styletable5 styletableth5 styletableeven5 styletableodd5 styletableheaderfont5 " style="font-family:$paramfontfamily;">$body</div> 

#else
<div>$body</div> 
#end

How to use

1. Insert color table macro and use macro options to add your preference
2. Add table inside macro body 
3. Save changes 

Adding user macro 

Remember to select Rendered as macro body processing. 

Make it grow and glow ...

You are welcome to change the styles as of your choice and cut off lengthy codes and make it efficient. 

[Davin Studer]

Looks good. Nice color choices!

[Alana Fernando]

Thanks @Davin Studer :-)

[Monique vdB]

Thanks for the article and the great macro, @Alana Fernando!

[Alana Fernando]

Welcome @Monique vdB :-)

[Fabienne Gerhard]

Wow @Alana Fernando thanks for this wonderful macro - actually that's something I was really looking for but I don't have your coding skills to create that macro. Thank you!

[Alana Fernando]

I am really happy to hear that this is helpful to you @Fabienne Gerhard 😊. And thank you very much for your feedback. 

[Tarun Sapra]

Looks great!

[Alana Fernando]

thanks @Tarun Sapra 😊

[Adrián Plaza [DEISER]]

Amazing great Job @Alana Fernando!!!

[Alana Fernando]

Thanks @Adrián Plaza [DEISER]😊

[Stefan Krooshof]

Thanks for sharing!

[Alana Fernando]

you are welcome @Stefan Krooshof 😊

[Rafael Corredor]

Veeery nice user macro!

I will use it for sure!

Thank you very much for sharing

[Alana Fernando]

Glad to hear @Rafael Corredor

[Helen Jakes]

Exactly what I've been looking for - thank you!

[Alana Fernando]

@Helen JakesGreat to hear that. 😊 

[jndeverteuil]

Thanks, I'll use it and share it around for sure :)

[Chase B.]

This user-macro is pretty freakin' awesome! One question, how would you suggest renaming the styles to the color pallet? Add a Style Name value or renaming the style to the color pallet?

[Alana Fernando]

Thanks @jndeverteuil 😊 

[Alana Fernando]

@Chase B. correct me If i am wrong. as i understood you want to style 1, style 2... changed to colors available.

if so change enum values of below code. 

## @param style:title=style type|type=enum|required=true|desc=Choose a style.|enumValues=Style1,Style2,Style3,Style4,Style5

[Chase B.]

@Alana Fernando, 

I believe so? I'm wanting to change the name selection when adding the macro for folks that are not all the familiar with the preview or have nothing in their table yet.

Ex: "Style1" to "Blue-Gray", "Style2" to "Peach-Orange", "Style3" to "Field of Green", etc. 

I'm guessing changing the enum value will require me to also change the values in each style, yes?

[Alana Fernando]

exactly @Chase B., simply find and replace the style names with name you want to add. 

[K H]

Amazing, thank you!

[BiancaE]

This is super extra and I like it!

[Alana Fernando]

Thank you verymuch @K H and @BiancaE 😊