By Timothy Foster Timothy Foster
Description
This snippet allows you to easily create tables with ListPages that alternate colors in rows. This will also work for any table.
Code
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]]
[[/module]]
[[/div]]
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:
[[row class="n1"]][[cell style="vertical-align:top;"]]menu [style="vertical-align: top; text-align: center;"]CLAUDIABENAVENT [style="vertical-align: top; text-align: right; font-size: 80%;"]16 Oct 2025 08:40[[/cell]][[/row]]
[[row class="n2"]][[cell style="vertical-align:top;"]]scp-676767 [style="vertical-align: top; text-align: center;"]H1gh_Voltage [style="vertical-align: top; text-align: right; font-size: 80%;"]20 Sep 2025 07:38[[/cell]][[/row]]
[[row class="n3"]][[cell style="vertical-align:top;"]]Playwright Automation Training in Hyderabad [style="vertical-align: top; text-align: center;"]K Tanmaydeep [style="vertical-align: top; text-align: right; font-size: 80%;"]06 Aug 2025 08:35[[/cell]][[/row]]
[[row class="n4"]][[cell style="vertical-align:top;"]]let's go!!!!!!!!!!!!! [style="vertical-align: top; text-align: center;"]Fuck Lestday233 [style="vertical-align: top; text-align: right; font-size: 80%;"]05 Aug 2025 13:06[[/cell]][[/row]]
[[row class="n5"]][[cell style="vertical-align:top;"]]DrMao沙盒166神性共存者 [style="vertical-align: top; text-align: center;"]DrMaoHanxuan166 [style="vertical-align: top; text-align: right; font-size: 80%;"]25 Jul 2025 04:16[[/cell]][[/row]]
[[row class="n6"]][[cell style="vertical-align:top;"]]8175 [style="vertical-align: top; text-align: center;"]Dr R Brookes [style="vertical-align: top; text-align: right; font-size: 80%;"]30 May 2025 01:02[[/cell]][[/row]]
[[row class="n7"]][[cell style="vertical-align:top;"]]scp-xxxx-the-imagination-room [style="vertical-align: top; text-align: center;"]Xalchor [style="vertical-align: top; text-align: right; font-size: 80%;"]11 May 2025 10:09[[/cell]][[/row]]
[[row class="n8"]][[cell style="vertical-align:top;"]]Breadcrumbs.md [style="vertical-align: top; text-align: center;"]Keith Bieszczat [style="vertical-align: top; text-align: right; font-size: 80%;"]27 Apr 2025 04:08[[/cell]][[/row]]
[[row class="n9"]][[cell style="vertical-align:top;"]]Archive.src [style="vertical-align: top; text-align: center;"]Keith Bieszczat [style="vertical-align: top; text-align: right; font-size: 80%;"]27 Apr 2025 03:45[[/cell]][[/row]]
[[row class="n10"]][[cell style="vertical-align:top;"]]High Code GRU.crt [style="vertical-align: top; text-align: center;"]Keith Bieszczat [style="vertical-align: top; text-align: right; font-size: 80%;"]27 Apr 2025 02:04[[/cell]][[/row]]
[[/table]]
Reference
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!
This is a good tutorial Timothy but it seems a wee bit of overkill. Why not just tell the user to use a css module with 2 lines in it to specify the 2 colours for the rows.
[[module css]]
table.wiki-content-table tr { background-color: #fff; }
table.wiki-content-table tr:nth-child(odd) { background-color:#ddd; }
[[/module]]They then create their table in the normal way (using ListPages or not) and it will have striped rows.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
That's sure a much simpler solution, Rob. Is it compatible with all browsers? I remember years ago we used some ASP code to accomplish this when building tables from database values (by inserting alternating classes into the HTML on the fly as we built the rows).
edit: Just did a quick search and it seems nth-child has been around a long time. Here's a link to showing some advanced tips for using it: w3C Even and odd rules
It's compatible with any modern browser that can handle CSS3. So it works with current versions of Firefox, Safari, Chrome and Opera and IE9.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Silly me XD
I'm not quite an expert at everything CSS3 yet, so it appears that I need to do some research into the new pseudo-classes and elements. Plus, this is an old remedy that I just now actually posted. At the time, I couldn't find an alternative than hardcoding, which I didn't like but felt that I had to deal with.
Thanks for the tip.
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
I know it's just an example, but you should clarify the use of the prepend line referencing the inc:table page in your example code. That example code won't quite work "out of the box" unless we change the category options and set up a nice table header on a inc:header page of our own. It's an advanced way to create the table and may trip up newer users.
It looks like CSS has no limit for how many classes you can string together! :)
That's a good point. Is there a how to or page somewhere depicting how this works already? If there is, I cannot find it. That way, I can link to that page. If it doesn't exist, then I might be able to whip up a quick tutorial for others to use.
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
One How-To I found that uses this technique is ErichSteinboeck 's Sortable List of Pages How-To. That's probably where I first learned about the technique. I don't recall any specific tutorials on using an include page for a prepend line.
There we go. That ought to do.
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
Excellent tutorial. I'd give it a +10 if I could!
Wow! Nicely done! I'll definitely find uses for this.