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 2673279149 2646813536 2569522748 2568690179 2556027350 2545030919 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.

Rate this solution

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

Comments

How do you column span with this?

uirise 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?

Re: How do you column span with this?

PizzaGeek 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

Re: How do you column span with this?

michal frackowiak 1193060062|%e %b %Y, %H:%M %Z|agohover

We are working to include colspan too.

Re: How do you column span with this?

maki 1209911322|%e %b %Y, %H:%M %Z|agohover

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

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

How do you row span a table?

elfgoh 1199468662|%e %b %Y, %H:%M %Z|agohover

Anyway to do rowspanning?

Re: How do you row span a table?

Waldir Leoncio 1212667309|%e %b %Y, %H:%M %Z|agohover

I wanna know that too! :)

Text Vertical Alignment Instead of Middle?

albaum 1201499921|%e %b %Y, %H:%M %Z|agohover

Is there a way to valign the text?

Re: Text Vertical Alignment Instead of Middle?

elishapeterson 1202349188|%e %b %Y, %H:%M %Z|agohover

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

Re: Text Vertical Alignment Instead of Middle?

David Marseilles 1213215501|%e %b %Y, %H:%M %Z|agohover

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

Is there any way to align an entire table?

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

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

Stitchy 1202622117|%e %b %Y, %H:%M %Z|agohover

Nevermind. I figured it out myself. c:

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

mmclean89 1204594040|%e %b %Y, %H:%M %Z|agohover

how?

Cell Width in Tables

KathrynB 1204804481|%e %b %Y, %H:%M %Z|agohover

How can I specify the cell width in a table?

Re: Cell Width in Tables

KathrynB 1204805837|%e %b %Y, %H:%M %Z|agohover

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

Tables inside Tab View

Nathan Benjamin 1206655123|%e %b %Y, %H:%M %Z|agohover

Can it be done?

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

crazyhappenings 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?

Seiraryu 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?

aolivez 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?

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

Centering Text/Images

Miraye 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;"]]

Re: Centering Text/Images

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

Headers

Baltar 1212954087|%e %b %Y, %H:%M %Z|agohover

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