Mimic Colspan With Multiple Tables

By PizzaGeekPizzaGeek

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

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

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!

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