Layout With Tables

By michal 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

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

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
Todo List - 16 Feb 2012 01:48
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

page 1 of 3123next »

---

Rate this solution

If you think this solution is useful — rate it up!

page 1 of 41234next »

How do you column span with this?

uirise 19 Oct 2007 23:37

I'm trying to make the equivalent to the wikidot.com table of

header
col 1	col 2

Is there any way this can be done?

Re: How do you column span with this?

PizzaGeek 22 Oct 2007 02:10

Through some trial and error, I came up with this as one solution:
Mimic Colspan With Multiple Tables

Re: How do you column span with this?

michal frackowiak 22 Oct 2007 13:34

We are working to include colspan too.

---

Michał Frąckowiak @ Wikidot Inc.
Visit my blog at michalf.me

Re: How do you column span with this?

maki 04 May 2008 14:28

Another solution is to nest a two-column table in the second row.

---

http://feedback.wikidot.com/wish:382

Re: How do you column span with this?

bienv 02 Feb 2010 23:58

How is the work on colspan support going?

---

Jay Bienvenu | Personal wiki | Hilinqwo: A constructed language | Real-Time Topics

Re: How do you column span with this?

Bruce M 16 Sep 2010 23:27

header
col 1	col 2

header
col 1	col 2

Last edited on 16 Sep 2010 23:28 by Bruce M + Show more

Re: How do you column span with this?

Ed Johnson 17 Sep 2010 00:24

I'm not sure what you're asking, exactly. Check this snippet out for a way to control layout by using multiple advanced tables.

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

erlend_sh 10 Nov 2007 21:55

what would also be great is if there could be certain pre-defined styles to choose between, so that you could just put it into the table tag and don't worry about the rest.

How do you row span a table?

elfgoh 04 Jan 2008 17:44

Anyway to do rowspanning?

Re: How do you row span a table?

Waldir Leoncio 05 Jun 2008 12:01

I wanna know that too! :)

Re: How do you row span a table?

RobWmn 06 Sep 2008 17:18

And me - row span please

Text Vertical Alignment Instead of Middle?

albaum 28 Jan 2008 05:58

Is there a way to valign the text?

Re: Text Vertical Alignment Instead of Middle?

elishapeterson 07 Feb 2008 01:53

use
[[row style="vertical-align:top"]]

Re: Text Vertical Alignment Instead of Middle?

David Marseilles 11 Jun 2008 20:18

I didn't even know how to ask this question. Thanks both of you. =)

Re: Text Vertical Alignment Instead of Middle?

leiger 18 Jul 2009 10:22

Thanks! Just what I was looking for :)

---

Shane Smith ★ Website: Wikidot Development & Programming. ★ STE Wikidot Editor: Windows. Mac. Linux. ★ Twitter. Google+.

Is there any way to align an entire table?

Stitchy 08 Feb 2008 03:23

… Such as, if I wanted to create a basic character profile to sit on the right side of a page, which is often used on Wikipedia.

Re: Is there any way to align an entire table?

Stitchy 10 Feb 2008 05:41

Nevermind. I figured it out myself. c:

Re: Is there any way to align an entire table?

cold_blood3d 04 Mar 2008 01:27

how?

Cell Width in Tables

KathrynB 06 Mar 2008 11:54

How can I specify the cell width in a table?

Re: Cell Width in Tables

KathrynB 06 Mar 2008 12:17

Don't worry - I have managed to work it out!

Tables inside Tab View

Nathan Benjamin 27 Mar 2008 21:58

Can it be done?

---

Nathan Benjamin
Commanding Officer
USS Potemkin NCC-18253

Does anyone know how to get the entire table to left align?

crazyhappenings 29 Apr 2008 17:52

Does anyone know how to get the entire table to left align? I have a page full of text and columns that left align, but my table looks funny way out in the middle of the page. Does anyone how how to change this? Thanks.

Here's the table I want on the left side of the page: Does anyone know how to get the entire table to left align? http://bostonhash.wikidot.com/mismanagement

Re: Does anyone know how to get the entire table to left align?

Seiraryu 30 Apr 2008 15:41

Try [[table style="align:left"]]

Re: Does anyone know how to get the entire table to left align?

aolivez 17 May 2008 03:40

Clarification: so your source would look like this?

[[table style="align:left"]]
@|| cell 1 || cell 2 ||@

I also tried:
[[<]] … [[/<]]

to no avail!

Re: Does anyone know how to get the entire table to left align?

ickabod 12 Jun 2008 15:45

You need to use the [[table]] syntax for this to work. You can't mismatch.

Here is an example:

[[table style="align:left"]]
[[row]][[cell]] row1 cell1 [[/cell]][[cell]] row1 cell2]][[/row]]
[[row]][[cell]] row2 cell1 [[/cell]][[cell]] row2 cell2]][[/row]]
[[/table]]

Re: Does anyone know how to get the entire table to left align?

lindseymoon 07 Aug 2008 05:46

Um, that doesn't work.

Re: Does anyone know how to get the entire table to left align?

dennyw 08 Aug 2008 18:07

I stumbled on to this syntax and it worked for me

[[table style="align:left"]] [[row]] [[cell]]
|| Foobar || Foobash || Foobang ||
|| bar 1 || bash  1 || bang 1 ||
|| bar 2 || bash  2 || bang 2 ||
[[/cell]][[/row]][[/table]]

Foobar Foobash Foobang bar 1 bash 1 bang 1 bar 2 bash 2 bang 2

Re: Does anyone know how to get the entire table to left align?

Jacob Hielscher 26 Sep 2008 02:38

Genius!

Re: Does anyone know how to get the entire table to left align?

westmoquette 28 Oct 2008 11:58

That's exactly what I was trying to find!

Re: Does anyone know how to get the entire table to left align?

Kath 16 Apr 2009 16:45

Exactly what I was looking for too. Thanks.

Re: Does anyone know how to get the entire table to left align?

elishapeterson 16 Apr 2009 17:20

Here's another solution:

[[div style="width:0"]]
|| Foobar || Foobash || Foobang ||
|| bar 1 || bash  1 || bang 1 ||
|| bar 2 || bash  2 || bang 2 ||
[[/div]]

Foobar	Foobash	Foobang
bar 1	bash 1	bang 1
bar 2	bash 2	bang 2

span not rows but colomns

Henrik D SILBERSTEIN 03 May 2008 17:03

Hi, I need to create a table where in one colomn, the content applies to several rows, is it possible to span the colomn rather than a row ? Thanks

Centering Text/Images

Miraye 19 May 2008 02:12

Could anyone tell me how to centre the images and text in my cells? Tried [[cell style=" align: center;"]]

Re: Centering Text/Images

Sanguinity 23 Jul 2008 14:14

You can center a line of text by beginning the line with "= ". Similarly, you can center an image with [[=image... ]]. I haven't yet discovered a way of centering the contents of an entire cell.

Re: Centering Text/Images

Gabrys 19 Aug 2008 21:19

you can use

style="text-align: center"
style="text-align: left"
style="text-align: right"

for horizontal align, or

style="vertical-align: top"
style="vertical-align: bottom"

for vertical, you can mix:

style="text-align: center; vertical-align: bottom"

hope this helps!

---

Piotr Gabryjeluk
visit my blog

page 1 of 41234next »