Description
A nice way to add advanced layout control using the [[table]] tag. The example uses the style attribute for the whole table and particular cells to adjust layout.
Code
[[table style="margin: 0 10px;"]]
[[row]]
[[cell style="padding: 10px; background-color: #DDDDEE; border: 1px solid silver; width: 50%;"]]
+++ example cell
Lorem ipsum dolor sit amet...
[[/cell]]
[[cell style="padding: 10px; background-color: #DDEEDD; border: 1px solid silver"]]
Lorem ipsum dolor sit amet...
[[/cell]]
[[/row]]
[[row]]
[[cell style="padding: 10px; background-color: #DDEEDD; border: 1px solid silver"]]
+++ another cell
Lorem ipsum dolor sit amet...
[[/cell]]
[[cell style="padding: 10px; background-color: #DDDDEE; border: 1px solid silver"]]
+++ Flickr Gallery module inside
[[module FlickrGallery tags="linux,sun" tagMode="all" perPage="6" limit="12" limitPages="1"]]
[[/cell]]
[[/row]]
[[/table]]In action
example cellLorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros. Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros. Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis. |
another cellLorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros. |
Flickr Gallery module inside |
As you might notice, using the [[table]] you can easily create the Wikipedia-style front pages.
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 michal-frackowiak
MyBlogLog recent visitors - 06 Jun 2021 04:03
Include Any Page - 06 Jun 2021 03:20
Babelfish Translation - 06 Jun 2021 03:14
Collapsible Text Block - 02 Dec 2020 10:24
Todo List - 18 Aug 2014 15:28
Multicolumn Layout - 17 Dec 2012 19:51
Zoho Writer - 16 Feb 2012 01:57
Zoho Sheet - 16 Feb 2012 01:56
Zoho Show - 16 Feb 2012 01:55
Zoho Polls - 16 Feb 2012 01:53
WoW Tooltips - 16 Feb 2012 01:52
Widgetbox Panel - 16 Feb 2012 01:52
Video from Revver - 16 Feb 2012 01:50
Tabs - 16 Feb 2012 01:45
Standalone Page Buttons - 16 Feb 2012 01:44
Social Bookmarking - 16 Feb 2012 01:42
Simple Gallery - 16 Feb 2012 01:41
Remember The Milk Todo - 16 Feb 2012 01:39
Recent Changes (mini) - 16 Feb 2012 01:36
Rating Summary - 16 Feb 2012 01:35
Quimble Poll - 16 Feb 2012 01:33
Quikmaps Maps - 16 Feb 2012 01:33
Photobucket Widget - 16 Feb 2012 01:29
Page Previews (Snap.com) - 16 Feb 2012 01:29
Pabpixies Gadgets - 16 Feb 2012 01:28
Meebo me - 16 Feb 2012 01:20
Instacalc - 16 Feb 2012 01:12
Import the Digg Feed - 16 Feb 2012 01:11
Import a News Feed - 16 Feb 2012 01:10
Google Gadgets - 16 Feb 2012 01:05
Gabbly chat - 16 Feb 2012 01:02
Forum Summary for the Front Page - 16 Feb 2012 01:02
Footnotes - 16 Feb 2012 01:01
Foldable List - 16 Feb 2012 01:01
Flickr Images By Tags - 16 Feb 2012 01:00
Feedburner - 15 Feb 2012 00:53
Extra Side Bar - 15 Feb 2012 00:51
Embed Code From Other Services - 15 Feb 2012 00:50
EditGrid Spreadsheets - 15 Feb 2012 00:49
Cornify - 15 Feb 2012 00:39
Compact Feed Display - 15 Feb 2012 00:35
Center Video - 15 Feb 2012 00:28
Bibliography/Footnotes/Comments Listed in TOC - 15 Feb 2012 00:26
Automatic Sitemap - 15 Feb 2012 00:25
Alexa traffic ratings - 15 Feb 2012 00:23
3d tagcloud - 15 Feb 2012 00:22
Rate this solution
If you think this solution is useful — rate it up!
thanks
The easiest way to center an element is to set its margin to 0 auto as shown in the 2 examples below.
You can use a centered div block around the table if you want associated text centered with the table:
This is a Centered Div Block
It includes text outside of the table that is centered with the table.
example cell
Lorem ipsum dolor sit amet…
This is a Centered Table
Only the table is centered and the content outside of the table is not affected by the centering.
example cell
Lorem ipsum dolor sit amet…
Community Admin
Is there a way to set table alignment without using float? I want to set all tables on my site to align left, so float does not work as I would have to manually clear it after each table.
Edit: I want to continue to use the simplified wiki syntax for tables, so I am looking for CSS solution site-wide.
Edit 2: Found the solution here:
http://community.wikidot.com/forum/t-206923
For simplified wiki tables, you have to set the margin to 0 via CSS on the ID table.wiki-content-table
Do you mean something like this? It can be accomplished by floating your table. For example:
example cell
Lorem ipsum dolor sit amet…
Here's some text that is not in the table. The table is floated to the left and this text will wrap around it.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.
Community Admin
Thank you
Hey guys
does anyone know how to have the text go round the table??
I am really curious as to how I may do this.
This is not straightforward but can be done with Google Visualizations, See http://community.wikidot.com/howto:sortable-tables.
For any assistance wth this please use the community forum.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
I just found this "Tiny" bit of javascript for creating sortable tables while looking for some other javascript solutions a couple of days ago. I haven't tried it yet, but it might be worth checking out.
www.leigeber.com has a number of neat "tiny" javascript tidbits that are pretty cool.
-Ed
Community Admin
I'm trying to find a way to create sortable tables on wikis.
Anybody have any idea how?
resolved.
This thread has been super helpful, but I still need to add some rowspanning for my table to work. I want the PIC cells to merge together. Any ideas?
11121 Jasper Ave
Edmonton, Alberta
Canada, T6W 1R3
11121 Jasper Ave
Edmonton, Alberta
Canada, T6W 1R3
11121 Jasper Ave
Edmonton, Alberta
Canada, T6W 1R3
[[table style="align:left"]] [[row]] [[cell]] |||| PIC |||| BIRTHDAY || AGE ||
|||| PIC || Mobile || Home || Work || |||| PIC || Edmonton
11121 Jasper Ave _ Edmonton, Alberta
Canada, T6W 1R3|| **Vancouver** _ 11121 Jasper Ave
Edmonton, Alberta _ Canada, T6W 1R3 || Hong Kong
11121 Jasper Ave _ Edmonton, Alberta
Canada, T6W 1R3 || |||||||||| LINKS ||
|||||||||| Personal Info || |||||||||| Family Info ||
|||||||||| Work Info || [[/cell]][[/row]][[/table]]
Look at this snippet.
I would try stacking 2 tables using that method. The first table would cover your first 3 rows and the second table would cover the bottom 4 rows. I would place all 3 images vertically in the first cell of table #1 and then place another table inside the second cell of row #1, table #1 to create the 3 rows of data.
Something like this:pic
pic
I can try to work up a better example when I have more time. This layout was done using simple tables, but I think you'll have to use the complex table syntax ([[table]][row]][[cell]][[/cell]][[/row]][[/table]]) for this to work well.
-Ed
Community Admin
thanks for the reply Ed, much appreciated!
I've decided to just oust the "pic" cell and float the images to the left of the whole table - it gives me a better use of horizontal space anyway.
Thanks for all the tips. What was even better was reading all the comments which helped me greatly with the complex wiki syntax.
If you have any questions - ask. We'll be happy to help :)
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)