Description
You can stack multiple "advanced tables" on top of each other to mimic "colspan" and achieve some complex layouts with your tables.
[[New Update! February 16, 2009]] Adding border-collapse: collapse; to the table style removes the white space between tables.
Code
[[table style="margin: 0; width: 100%; border-collapse:collapse;"]]
[[row]]
[[cell style="padding: 10px; background-color: #EAE3C5; border: 1px solid silver; width: 100%;"]]
+++ single cell in its own table, 100% width
content...
[[/cell]]
[[/row]]
[[/table]]
[[table style="margin: 0; width: 100%; border-collapse:collapse;"]]
[[row]]
[[cell style="padding: 10px; background-color: #DDEEDD; border: 1px solid silver; width: 33%;"]]
+++ another cell in a new table at 33% width
content...
[[/cell]]
[[cell style="padding: 10px; background-color: #DDDDEE; border: 1px solid silver width: 67%;"]]
+++ Flickr Gallery module inside in another cell at 67% width
[[module FlickrGallery tags="linux,sun" tagMode="all" perPage="6" limit="12" limitPages="1"]]
[[/cell]]
[[/row]]
[[/table]]
[[table style="margin: 0; width: 100%; border-collapse:collapse;"]]
[[row]]
[[cell style="padding: 10px; background-color: #EAE3C5; border: 1px solid silver; width: 20%;"]]
+++ new table, cell at 20% width
content...
[[/cell]]
[[cell style="padding: 10px; background-color: #DDDDEE; border: 1px solid silver; width: 50%;"]]
+++ middle cell, 50% width
content...
[[/cell]]
[[cell style="padding: 10px; background-color: #EEDDDD; border: 1px solid silver; width: 30%;"]]
+++ same row, cell at 30% width
content...
[[/cell]]
[[/row]]
[[/table]]
Note that you have to set the table margins to zero to achieve this look. Adding border-collapse:collapse; removes the white space between tables.
You can also adjust the cell widths individually for each row to create more complex layouts.You may not get the results you expect unless you also set the width in the [[table]] command.
For example: [[table style="margin: 0; width: 100%"]]This was all figured out via trial and error, so if there's a better way, let us know!
In action
single cell in its own table, 100% width
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque facilisis erat a dui. Nam malesuada…
another cell in a new table at 33% width
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…
(Shamelessly borrowing from another snippet! Thanks for showing us this!)Flickr Gallery module inside in another cell at 67% width
new table, cell at 20% width
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…
middle cell, 50% width
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…
same row, cell at 30% width
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…
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 PizzaGeek
Rate this solution
If you think this solution is useful — rate it up!
Very useful, thanks for posting PizzaGeek :)
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server