Table Alterations

By Timothy FosterTimothy Foster


This snippet allows you to easily create tables with ListPages that alternate colors in rows. This will also work for any table.


For this to work, first put this code somewhere on your page:

[[include :snippets:table-alt]]

You may define a custom color with the |color attribute. The default is #EEE.

Then, in your ListPages block with tables, surround the module (or other table) with a div class table-alt. It should look like the below as an example:

[[div class="table-alt"]]
[[module ListPages category="code" perPage="10" separate="false" prependLine="[[include inc:table]]" appendLine="[[/table]]"]]
[[row]][[cell style="vertical-align:top;"]]**%%title_linked%%**[[/cell]][[cell style="vertical-align: top; text-align: center;"]][[user %%created_by%%]][[/cell]][[cell style="vertical-align: top; text-align: right; font-size: 80%;"]]%%updated_at|%d %b %Y, %R %p|agohover%%[[/cell]][[/row]]

Note: This code exhibits advanced use of ListPages's prependLine and appendLine to make a custom table and therefore will not directly work if you copy and paste. See this how-to to make your own!

In action

This will make the table look like this:

Snippet Author Edited
Falling Snowflakes Effect Melphyx 22 Dec 2019 14:20
Html5player MechaLynx 11 Jul 2017 04:05
Mail to all moderators Simon Roemen 10 Jun 2015 09:34
Put comments in the editor that won't show Simon Roemen 05 Jun 2015 09:39
Modal Image Timothy Foster 01 May 2015 17:20
Countdown timer Massimo v 22 Dec 2014 08:31
Html(embed) code opening in new window/tab Helmut_pdorf 29 Oct 2014 09:05
Todo List with Data Forms Helmut_pdorf 30 Apr 2015 14:59
Carousel Timothy Foster 24 May 2015 01:18
Facebook Button Helmut_pdorf 27 Dec 2013 15:03
page 1 of 20123...1920next »


For information on how this works, see here.

Thanks to tsangk for this great snippet: conditional-blocks

text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]

Other snippets posted by Timothy Foster

Carousel - 24 May 2015 01:18
Modal Image - 01 May 2015 17:20
Bootstrap Image Box - 19 Jul 2014 01:27
Togglecheck - 17 Dec 2013 20:27
Alternative Specific Users Only - 11 Dec 2013 18:04
Image Box - 10 Dec 2013 03:14
Toggle Tag - 19 Jul 2013 11:13
Hide Tags - 14 Feb 2013 21:35
Plurality Checker - 16 Jul 2012 03:21
Mini Chat Area - 15 May 2012 12:04
Fancy <hr> Dividers - 15 Feb 2012 00:51

Rate this solution

If you think this solution is useful — rate it up!

rating: +6+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License