Posted by Helmut_pdorf on 05 Oct 2007 17:57, last edited by Helmut_pdorf on 13 Feb 2014 07:31
: cell row rowspan table table_layout
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. 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 2. 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. Morbi commodo, ips.....
....si. Nulla libero.
[[/cell]]
[[cell style="vertical-align: top; padding: 10px; background-color: #DDEEDD; border: 1px solid silver;width: 40%;"]]
+++ extra example
bLA bLA ! Vivamus pharetra posuere sapien. Nam ....
blandit sed, blandit a, eros.
[[/cell]]
[[/row]]
[[row]]
[[cell style="vertical-align: top; padding: 0px; margin: 0 0px ;background-color: #DDEEDD; border: 1px solid silver"]]
[[table style="vertical-align: top; text-align: top; padding: 0px; margin: 0 0px; width: 100% ; high= 100%"]]
[[row]]
[[cell style="vertical-align: top; text-align: middle; margin: 0 0px; padding: 10px; background-color: #DDEEDD; border: 1px solid "]]
+++ another left cell (1)
Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. \
.................................. eros.
[[/cell]]
[[/row]]
[[row]]
[[cell style="vertical-align: top ; text-align: top; margin: 0 0px; padding: 10px; background-color: #DDEEDD; border: 1px solid "]]
+++ 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 \
liquam .....iaculis.
[[/cell]]
[[/row]]
[[/table]]
[[/cell]]
[[cell style="vertical-align: top ; text-align: middle; padding: 10px; background-color: #DDDDEE; border: 1px solid silver"]]
+++ right cell 3 alone
Nam magna enim, accumsan eu, blandit sed, blandit a, eros.
* Bulleted list item 1
* Bulleted list item 2
Quisque facilisis erat a dui. ............
........sapien, non aliquet massa pede eu diam. Aliquam iaculis.
[[/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. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.
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.
right cell 3 alone
Nam magna enim, accumsan eu, blandit sed, blandit a, eros.
- Bulleted list item 1
- Bulleted list item 2
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.
Copied from http://snippets.wikidot.com/ by Helmut_pdorf
Further Reading:
Layout with tables
tabs
See also this HowTo:import-simple-excel-tables-into-wikidot which has now a VBA utility to convert an Excel table to this [[table]]…[[row]]…[[cell]] format.
Cell 3 is currently "centered vertical".
How can we align TOP or BOTTOM ?
lowkarma.pnggerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!
[[cell style="vertical-align:top"]] or bottom. —hartnell
I changed it now and iot loks a little betteer - but the padding at the top of the second row - first left cell i cannot put away..
Hlemut
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
I'd like a custom table to have the same feel as the rest of my tables.
| so what's the code for this background color? |
|---|
Thanks for any help.
S.
#eee
#eeeeee
rgb: 238 238 238
If you use Fire fox there's a couple og handy little tools for doing stuff like this.
ColorZilla color picker is well worth a look
How might one remove the gap at the top of Row 2, Column 1? I am trying to implement this, and I really need to get rid of that gap!
Use
[[cell style="vertical-align:top;"]]… and avoid the use of +, ++, +++ heading levels which might give extra line space before and after the text. Use bold … or [[size]] instead.
lowkarma.pnggerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!
How can you create two separate tables side by side?
torridlife_zps285ea7ed.jpg
See answer to same question in the forum: http://community.wikidot.com/forum/t-775804/comments/show?from=activities#post-1965628
or use 2 tables in an overall table with only 2 cells.. ( as above the example do it )
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
Related articles
Comments
Cell 3 is currently "centered vertical".
How can we align TOP or BOTTOM ?
lowkarma.pnggerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!
[[cell style="vertical-align:top"]] or bottom. —hartnell
I changed it now and iot loks a little betteer - but the padding at the top of the second row - first left cell i cannot put away..
Hlemut
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
I'd like a custom table to have the same feel as the rest of my tables.
| so what's the code for this background color? |
|---|
Thanks for any help.
S.
#eee
#eeeeee
rgb: 238 238 238
If you use Fire fox there's a couple og handy little tools for doing stuff like this.
ColorZilla color picker is well worth a look
How might one remove the gap at the top of Row 2, Column 1? I am trying to implement this, and I really need to get rid of that gap!
Use
[[cell style="vertical-align:top;"]]… and avoid the use of +, ++, +++ heading levels which might give extra line space before and after the text. Use bold … or [[size]] instead.
lowkarma.pnggerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!
How can you create two separate tables side by side?
torridlife_zps285ea7ed.jpg
See answer to same question in the forum: http://community.wikidot.com/forum/t-775804/comments/show?from=activities#post-1965628
or use 2 tables in an overall table with only 2 cells.. ( as above the example do it )
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?