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.

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.

Rate this solution

If you think this solution is useful — rate it up! Or dump it otherwise.

rating: +48+x

Comments

How do you column span with this?
uiriseuirise 1192837037|%e %b %Y, %H:%M %Z|agohover

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?

unfold How do you column span with this? by uiriseuirise, 1192837037|%e %b %Y, %H:%M %Z|agohover
Re: How do you column span with this?
PizzaGeekPizzaGeek 1193019055|%e %b %Y, %H:%M %Z|agohover

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

unfold Re: How do you column span with this? by PizzaGeekPizzaGeek, 1193019055|%e %b %Y, %H:%M %Z|agohover
Re: How do you column span with this?
michal frackowiakmichal frackowiak 1193060062|%e %b %Y, %H:%M %Z|agohover

We are working to include colspan too.

unfold Re: How do you column span with this? by michal frackowiakmichal frackowiak, 1193060062|%e %b %Y, %H:%M %Z|agohover
Re: How do you column span with this?
makimaki 1209911322|%e %b %Y, %H:%M %Z|agohover

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

unfold Re: How do you column span with this? by makimaki, 1209911322|%e %b %Y, %H:%M %Z|agohover
SadrSadr 1194731721|%e %b %Y, %H:%M %Z|agohover

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.

unfold by SadrSadr, 1194731721|%e %b %Y, %H:%M %Z|agohover
How do you row span a table?
elfgohelfgoh 1199468662|%e %b %Y, %H:%M %Z|agohover

Anyway to do rowspanning?

unfold How do you row span a table? by elfgohelfgoh, 1199468662|%e %b %Y, %H:%M %Z|agohover
Re: How do you row span a table?
Waldir LeoncioWaldir Leoncio 1212667309|%e %b %Y, %H:%M %Z|agohover

I wanna know that too! :)

unfold Re: How do you row span a table? by Waldir LeoncioWaldir Leoncio, 1212667309|%e %b %Y, %H:%M %Z|agohover
Text Vertical Alignment Instead of Middle?
albaumalbaum 1201499921|%e %b %Y, %H:%M %Z|agohover

Is there a way to valign the text?

unfold Text Vertical Alignment Instead of Middle? by albaumalbaum, 1201499921|%e %b %Y, %H:%M %Z|agohover
Re: Text Vertical Alignment Instead of Middle?
elishapetersonelishapeterson 1202349188|%e %b %Y, %H:%M %Z|agohover

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

unfold Re: Text Vertical Alignment Instead of Middle? by elishapetersonelishapeterson, 1202349188|%e %b %Y, %H:%M %Z|agohover
Re: Text Vertical Alignment Instead of Middle?
David MarseillesDavid Marseilles 1213215501|%e %b %Y, %H:%M %Z|agohover

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

unfold Re: Text Vertical Alignment Instead of Middle? by David MarseillesDavid Marseilles, 1213215501|%e %b %Y, %H:%M %Z|agohover
Is there any way to align an entire table?
StitchyStitchy 1202441029|%e %b %Y, %H:%M %Z|agohover

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

unfold Is there any way to align an entire table? by StitchyStitchy, 1202441029|%e %b %Y, %H:%M %Z|agohover
Re: Is there any way to align an entire table?
StitchyStitchy 1202622117|%e %b %Y, %H:%M %Z|agohover

Nevermind. I figured it out myself. c:

unfold Re: Is there any way to align an entire table? by StitchyStitchy, 1202622117|%e %b %Y, %H:%M %Z|agohover
Re: Is there any way to align an entire table?
mmclean89mmclean89 1204594040|%e %b %Y, %H:%M %Z|agohover

how?

unfold Re: Is there any way to align an entire table? by mmclean89mmclean89, 1204594040|%e %b %Y, %H:%M %Z|agohover
Cell Width in Tables
KathrynBKathrynB 1204804481|%e %b %Y, %H:%M %Z|agohover

How can I specify the cell width in a table?

unfold Cell Width in Tables by KathrynBKathrynB, 1204804481|%e %b %Y, %H:%M %Z|agohover
Re: Cell Width in Tables
KathrynBKathrynB 1204805837|%e %b %Y, %H:%M %Z|agohover

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

unfold Re: Cell Width in Tables by KathrynBKathrynB, 1204805837|%e %b %Y, %H:%M %Z|agohover
Tables inside Tab View
Nathan BenjaminNathan Benjamin 1206655123|%e %b %Y, %H:%M %Z|agohover

Can it be done?

unfold Tables inside Tab View by Nathan BenjaminNathan Benjamin, 1206655123|%e %b %Y, %H:%M %Z|agohover
Does anyone know how to get the entire table to left align?
crazyhappeningscrazyhappenings 1209491529|%e %b %Y, %H:%M %Z|agohover

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?
SeiraryuSeiraryu 1209570096|%e %b %Y, %H:%M %Z|agohover

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

Re: Does anyone know how to get the entire table to left align?
aolivezaolivez 1210995642|%e %b %Y, %H:%M %Z|agohover

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?
ickabodickabod 1213285537|%e %b %Y, %H:%M %Z|agohover

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

span not rows but colomns
Henrik D SILBERSTEINHenrik D SILBERSTEIN 1209834207|%e %b %Y, %H:%M %Z|agohover

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

unfold span not rows but colomns by Henrik D SILBERSTEINHenrik D SILBERSTEIN, 1209834207|%e %b %Y, %H:%M %Z|agohover
Centering Text/Images
MirayeMiraye 1211163139|%e %b %Y, %H:%M %Z|agohover

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

unfold Centering Text/Images by MirayeMiraye, 1211163139|%e %b %Y, %H:%M %Z|agohover
Re: Centering Text/Images
SanguinitySanguinity 1216822496|%e %b %Y, %H:%M %Z|agohover

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.

unfold Re: Centering Text/Images by SanguinitySanguinity, 1216822496|%e %b %Y, %H:%M %Z|agohover
Headers
BaltarBaltar 1212954087|%e %b %Y, %H:%M %Z|agohover

<table> = [[table]]
<tr> = [[row]]
<td> = [[cell]]
<th> = ???

unfold Headers by BaltarBaltar, 1212954087|%e %b %Y, %H:%M %Z|agohover
Add a new comment
page tags: cell col layout row table
page_revision: 0, last_edited: 1191246233|%e %b %Y, %H:%M %Z (%O ago)
Unless stated otherwise Content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License