Table Layout

Welcome! » Advanced Editing » Table Layout

Description

A nice way to add advanced layout control is using the [[table]] tag. The example uses the style attribute for the whole table and particular cells to adjust layout. Using [[row]] and [[cell]] tag.

I found it in the http://snippets.wikidot.com/ ( search for tag = table layout …) — a very good example!

I tried here in the example to fullfill the request for row-span over 2 rows with one cell beside ( cell 3 here ):
I solved it by using a second. table in a single cell with 2 rows with one cell).

1. the code of the example ( and later the action)

[[table style="margin: 0 10px;"]]
[[row]]
[[cell style="padding: 10px; background-color: #DDDDEE; border: 1px solid silver; width: 40%;"]]

+++ example cell

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.....
[[/cell]]
[[cell style="padding: 10px; background-color: #DDEEDD; border: 1px solid silver;width: 40%;"]]

+++ extra exAMPLE

bLA bLA !  Vivamus pharetra posuere sapien. Nam consectetuer....
[[/cell]]
[[/row]]
[[row]]
[[cell style="padding: 10px; background-color: #DDEEDD; border: 1px solid silver"]]

[[table style="padding: 0px; margin: 0 0px; width: 100%"]]
[[row]]
[[cell style="padding: 0px; background-color: #DDEEDD; border: 1px solid "]]

@@ @@ 
+++ another left cell (1)

Suspendisse id velit vitae ligula volutpat condimentum. ....
[[/cell]]
[[/row]]
[[row]]
[[cell style="padding: 0px; background-color: #DDEEDD; border: 1px solid "]] 

@@ @@

+++ cell (2) 

Nam magna enim, accumsan eu, blandit sed, blandit a, eros....
[[/cell]]

[[/row]]

[[/table]]

[[/cell]]

[[cell style="padding: 10px; background-color: #DDDDEE; border: 1px solid silver"]]

+++ right cell 3 alone  
Nam magna enim, accumsan eu, blandit sed, blandit a, eros...
[[/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.

extra exAMPLE

bLA bLA ! 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.

another left cell (1)

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.

cell (2)

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.