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;"]]练习的草稿文本(1145141919810)[style="vertical-align: top; text-align: center;"]nyb114514[style="vertical-align: top; text-align: right; font-size: 80%;"]07 Mar 2024 13:12[[/cell]][[/row]]
[[row class="n2"]][[cell style="vertical-align:top;"]]new cornify[style="vertical-align: top; text-align: center;"]scutoid studios[style="vertical-align: top; text-align: right; font-size: 80%;"]02 Feb 2024 07:26[[/cell]][[/row]]
[[row class="n3"]][[cell style="vertical-align:top;"]]To add tabs to your sandbox so you can have multiple drafts, use the following code: tabview tab Title 1 Text goes here[style="vertical-align: top; text-align: center;"]DrVeryBrightLight[style="vertical-align: top; text-align: right; font-size: 80%;"]30 Sep 2023 01:03[[/cell]][[/row]]
[[row class="n4"]][[cell style="vertical-align:top;"]]Text changes colors[style="vertical-align: top; text-align: center;"]Golden-Cat-14[style="vertical-align: top; text-align: right; font-size: 80%;"]04 Jun 2023 09:49[[/cell]][[/row]]
[[row class="n5"]][[cell style="vertical-align:top;"]]Column Layouts with CSS Grid[style="vertical-align: top; text-align: center;"]scutoid studios[style="vertical-align: top; text-align: right; font-size: 80%;"]01 Mar 2023 17:17[[/cell]][[/row]]
[[row class="n6"]][[cell style="vertical-align:top;"]]测试页面SCP[style="vertical-align: top; text-align: center;"]Tsuribashi_utsu_ri[style="vertical-align: top; text-align: right; font-size: 80%;"]17 Jan 2023 18:51[[/cell]][[/row]]
[[row class="n7"]][[cell style="vertical-align:top;"]]Do not try in life 2[style="vertical-align: top; text-align: center;"]Golden-Cat-14[style="vertical-align: top; text-align: right; font-size: 80%;"]14 Sep 2022 05:51[[/cell]][[/row]]
[[row class="n8"]][[cell style="vertical-align:top;"]]Do not try in life[style="vertical-align: top; text-align: center;"]Golden-Cat-14[style="vertical-align: top; text-align: right; font-size: 80%;"]14 Sep 2022 05:50[[/cell]][[/row]]
[[row class="n9"]][[cell style="vertical-align:top;"]]Include Without iframe[style="vertical-align: top; text-align: center;"]Antimatter Collider[style="vertical-align: top; text-align: right; font-size: 80%;"]25 May 2022 03:40[[/cell]][[/row]]
[[row class="n10"]][[cell style="vertical-align:top;"]]Table Of Contents[style="vertical-align: top; text-align: center;"]Rayyan Faaris[style="vertical-align: top; text-align: right; font-size: 80%;"]15 Apr 2022 22:52[[/cell]][[/row]]
[[/table]]

page 1 of 22123...2122next »

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