Layout With Tables

By michal frackowiakmichal frackowiak

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 cell

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.

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 cell

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.

Flickr Gallery module inside

{"module":"wiki\/image\/FlickrGalleryModule","params":{"tags":"linux,sun","tagMode":"all","perPage":"6","limit":"12","limitPages":"1"}}

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

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
MyBlogLog recent visitors - 16 Feb 2012 01:25
Meebo me - 16 Feb 2012 01:20
Instacalc - 16 Feb 2012 01:12
Include Any Page - 16 Feb 2012 01:11
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
Collapsible Text Block - 15 Feb 2012 00:35
Center Video - 15 Feb 2012 00:28
Bibliography/Footnotes/Comments Listed in TOC - 15 Feb 2012 00:26
Babelfish Translation - 15 Feb 2012 00:25
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!

rating: +126+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License