Layout With Tables

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.

another cell

Flickr Gallery module inside

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

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:

Other snippets posted by michal-frackowiak

MyBlogLog recent visitors - 06 Jun 2021 04:03
Include Any Page - 06 Jun 2021 03:20
Babelfish Translation - 06 Jun 2021 03:14
Collapsible Text Block - 02 Dec 2020 10:24
Todo List - 18 Aug 2014 15:28
Multicolumn Layout - 17 Dec 2012 19:51
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
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
Meebo me - 16 Feb 2012 01:20
Instacalc - 16 Feb 2012 01:12
Import the Digg Feed - 16 Feb 2012 01:11
Import a News Feed - 16 Feb 2012 01:10
Google Gadgets - 16 Feb 2012 01:05
Gabbly chat - 16 Feb 2012 01:02
Forum Summary for the Front Page - 16 Feb 2012 01:02
Footnotes - 16 Feb 2012 01:01
Foldable List - 16 Feb 2012 01:01
Flickr Images By Tags - 16 Feb 2012 01:00
Feedburner - 15 Feb 2012 00:53
Extra Side Bar - 15 Feb 2012 00:51
Embed Code From Other Services - 15 Feb 2012 00:50
EditGrid Spreadsheets - 15 Feb 2012 00:49
Cornify - 15 Feb 2012 00:39
Compact Feed Display - 15 Feb 2012 00:35
Center Video - 15 Feb 2012 00:28
Bibliography/Footnotes/Comments Listed in TOC - 15 Feb 2012 00:26
Automatic Sitemap - 15 Feb 2012 00:25
Alexa traffic ratings - 15 Feb 2012 00:23
3d tagcloud - 15 Feb 2012 00:22

Rate this solution

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

rating: +149

page 1 of 41

Thanks

Melphyx Melphyx 14 Aug 2019 05:06

thanks

Last edited on 18 Aug 2019 00:58 by Melphyx

by Melphyx Melphyx , 14 Aug 2019 05:06

Re: how to make table centered in a page?

(account deleted) 14 Aug 2019 13:15

The easiest way to center an element is to set its margin to 0 auto as shown in the 2 examples below.
You can use a centered div block around the table if you want associated text centered with the table:

This is a Centered Div Block
It includes text outside of the table that is centered with the table.

example cell

Lorem ipsum dolor sit amet…

[[div style="text-align: center;"]]
**This is a Centered Div Block**
It includes text outside of the table that is centered witt the table.
[[table style="width: 50%; margin:0 auto;"]]
[[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]]
[[/table]]
[[/div]]

This is a Centered Table
Only the table is centered and the content outside of the table is not affected by the centering.

example cell

Lorem ipsum dolor sit amet…

**This is a Centered Table**
Only the table is centered and the content outside of the table is not affected by the centering.
[[table style="width: 50%; margin: 0 auto;"]]
[[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]]
[[/table]]

Community Admin

by (account deleted), 14 Aug 2019 13:15

Table alignment without float

Death and Taxes Death and Taxes 08 Jan 2016 04:08

Is there a way to set table alignment without using float? I want to set all tables on my site to align left, so float does not work as I would have to manually clear it after each table.

Edit: I want to continue to use the simplified wiki syntax for tables, so I am looking for CSS solution site-wide.

Edit 2: Found the solution here:
http://community.wikidot.com/forum/t-206923
For simplified wiki tables, you have to set the margin to 0 via CSS on the ID table.wiki-content-table

Last edited on 08 Jan 2016 04:41 by Death and Taxes

by Death and Taxes Death and Taxes , 08 Jan 2016 04:08

(account deleted) 06 Sep 2011 18:59

Do you mean something like this? It can be accomplished by floating your table. For example:

[[table style="float: left; width: 50%; 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]]
[[/table]]

example cell

Lorem ipsum dolor sit amet…

Here's some text that is not in the table. The table is floated to the left and this text will wrap around it.

Community Admin

Last edited on 07 Sep 2011 12:10 by (account deleted)

by (account deleted), 06 Sep 2011 18:59

M-Johnson M-Johnson 07 Sep 2011 05:36

Thank you

by M-Johnson M-Johnson , 07 Sep 2011 05:36

Text Wrapping A table

M-Johnson M-Johnson 06 Sep 2011 18:51

Hey guys
does anyone know how to have the text go round the table??

by M-Johnson M-Johnson , 06 Sep 2011 18:51

Xtyna Xtyna 29 Sep 2010 09:15

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

I am really curious as to how I may do this.

by Xtyna Xtyna , 29 Sep 2010 09:15

RobElliott RobElliott 19 Jul 2010 12:44

This is not straightforward but can be done with Google Visualizations, See http://community.wikidot.com/howto:sortable-tables.

For any assistance wth this please use the community forum.

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.

by RobElliott RobElliott , 19 Jul 2010 12:44

Sortable Tables

(account deleted) 19 Jul 2010 13:27

I just found this "Tiny" bit of javascript for creating sortable tables while looking for some other javascript solutions a couple of days ago. I haven't tried it yet, but it might be worth checking out.

www.leigeber.com has a number of neat "tiny" javascript tidbits that are pretty cool.

-Ed

Community Admin

by (account deleted), 19 Jul 2010 13:27

Icrine Icrine 19 Jul 2010 11:04

I'm trying to find a way to create sortable tables on wikis.

Anybody have any idea how?

by Icrine Icrine , 19 Jul 2010 11:04

....

Geoff S Geoff S 01 Jun 2010 21:03

resolved.

Last edited on 07 Jun 2010 02:51 by Geoff S

by Geoff S Geoff S , 01 Jun 2010 21:03

Rowspans - Possible?

tinge tinge 21 Mar 2010 17:26

This thread has been super helpful, but I still need to add some rowspanning for my table to work. I want the PIC cells to merge together. Any ideas?

PIC BIRTHDAY AGE

PIC Mobile Home Work

PIC Edmonton
11121 Jasper Ave
Edmonton, Alberta
Canada, T6W 1R3 Vancouver
11121 Jasper Ave
Edmonton, Alberta
Canada, T6W 1R3 Hong Kong
11121 Jasper Ave
Edmonton, Alberta
Canada, T6W 1R3

LINKS

Personal Info

Family Info

Work Info

[[table style="align:left"]] [[row]] [[cell]] |||| PIC |||| BIRTHDAY || AGE ||
|||| PIC || Mobile || Home || Work || |||| PIC || Edmonton
11121 Jasper Ave _ Edmonton, Alberta
Canada, T6W 1R3|| **Vancouver** _ 11121 Jasper Ave
Edmonton, Alberta _ Canada, T6W 1R3 || Hong Kong
11121 Jasper Ave _ Edmonton, Alberta
Canada, T6W 1R3 || |||||||||| LINKS ||
|||||||||| Personal Info || |||||||||| Family Info ||
|||||||||| Work Info || [[/cell]][[/row]][[/table]]

by tinge tinge , 21 Mar 2010 17:26

Re: Rowspans - Possible?

(account deleted) 21 Mar 2010 18:43

Look at this snippet.

I would try stacking 2 tables using that method. The first table would cover your first 3 rows and the second table would cover the bottom 4 rows. I would place all 3 images vertically in the first cell of table #1 and then place another table inside the second cell of row #1, table #1 to create the 3 rows of data.

Something like this:

pic
pic
pic 3 row table inserted in this cell.

LINKS

Personal Info

Family Info

Work Info

I can try to work up a better example when I have more time. This layout was done using simple tables, but I think you'll have to use the complex table syntax ([[table]][row]][[cell]][[/cell]][[/row]][[/table]]) for this to work well.

-Ed

Community Admin

by (account deleted), 21 Mar 2010 18:43

Re: Rowspans - Possible?

tinge tinge 24 Mar 2010 03:01

thanks for the reply Ed, much appreciated!

I've decided to just oust the "pic" cell and float the images to the left of the whole table - it gives me a better use of horizontal space anyway.

by tinge tinge , 24 Mar 2010 03:01

Awesome

KJacket KJacket 16 Mar 2010 12:10

Thanks for all the tips. What was even better was reading all the comments which helped me greatly with the complex wiki syntax.

by KJacket KJacket , 16 Mar 2010 12:10

Re: Awesome

leiger leiger 17 Mar 2010 00:31

If you have any questions - ask. We'll be happy to help :)

~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server

by leiger leiger , 17 Mar 2010 00:31

page 1 of 41

cell col layout row table

page revision: 2, last edited: 16 Feb 2012 01:19

Discuss (91)

Wikidot Code Snippets

Snippets

Description

Code

In action

example cell

another cell

Flickr Gallery module inside

Rate this solution

example cell

example cell

example cell