Table Alterations

By Timothy FosterTimothy 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:

User Name UserInfo Location Address Location Descirption Picture
cell-content cell-content cell-content cell-content cell-content 1.jpeg
cell-content cell-content cell-content cell-content cell-content cell-content

[[row class="n1"]][[cell style="vertical-align:top;"]]SCP-040-ID[style="vertical-align: top; text-align: center;"]Nindi[style="vertical-align: top; text-align: right; font-size: 80%;"]14 Nov 2021 13:30[[/cell]][[/row]]
[[row class="n2"]][[cell style="vertical-align:top;"]]Click Counter[style="vertical-align: top; text-align: center;"]Antimatter Collider[style="vertical-align: top; text-align: right; font-size: 80%;"]11 Nov 2021 16:25[[/cell]][[/row]]
[[row class="n3"]][[cell style="vertical-align:top;"]]8 Awesome Things That Will Make Your Website Awesome![style="vertical-align: top; text-align: center;"]MokapHorse[style="vertical-align: top; text-align: right; font-size: 80%;"]02 Aug 2021 22:05[[/cell]][[/row]]
[[row class="n4"]][[cell style="vertical-align:top;"]]Make Clock[style="vertical-align: top; text-align: center;"](account deleted)[style="vertical-align: top; text-align: right; font-size: 80%;"]10 Jan 2021 08:28[[/cell]][[/row]]
[[row class="n5"]][[cell style="vertical-align:top;"]]Fake tags with links[style="vertical-align: top; text-align: center;"]RTa_sub[style="vertical-align: top; text-align: right; font-size: 80%;"]06 Jan 2021 16:07[[/cell]][[/row]]
[[row class="n6"]][[cell style="vertical-align:top;"]]Colalt - Multiple Collapsibles[style="vertical-align: top; text-align: center;"]RTa_sub[style="vertical-align: top; text-align: right; font-size: 80%;"]17 Sep 2020 13:29[[/cell]][[/row]]
[[row class="n7"]][[cell style="vertical-align:top;"]]Falling Snowflakes Effect[style="vertical-align: top; text-align: center;"]Melphyx[style="vertical-align: top; text-align: right; font-size: 80%;"]22 Dec 2019 14:20[[/cell]][[/row]]
[[row class="n8"]][[cell style="vertical-align:top;"]]Html5player[style="vertical-align: top; text-align: center;"]MechaLynx[style="vertical-align: top; text-align: right; font-size: 80%;"]11 Jul 2017 04:05[[/cell]][[/row]]
[[row class="n9"]][[cell style="vertical-align:top;"]]Mail to all moderators[style="vertical-align: top; text-align: center;"]Simon Roemen[style="vertical-align: top; text-align: right; font-size: 80%;"]10 Jun 2015 09:34[[/cell]][[/row]]
[[row class="n10"]][[cell style="vertical-align:top;"]]Put comments in the editor that won't show[style="vertical-align: top; text-align: center;"]Simon Roemen[style="vertical-align: top; text-align: right; font-size: 80%;"]06 Jun 2021 03:15[[/cell]][[/row]]
[[/table]]

page 1 of 21123...2021next »

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!

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