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
Make Clock Dragon Vietnam 10 Jan 2021 08:28
Fake tags with links RTa_sub 06 Jan 2021 16:07
Colalt - Multiple Collapsibles RTa_sub 17 Sep 2020 13:29
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
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

Fancy HR Dividers - 07 Apr 2021 06:23
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

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