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 cellLorem 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 cellLorem 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.
Comments
I'm trying to make the equivalent to the wikidot.com table of
Is there any way this can be done?
Through some trial and error, I came up with this as one solution:
Mimic Colspan With Multiple Tables
We are working to include colspan too.
Michał Frąckowiak @ Wikidot Inc.
Visit my blog at michalfrackowiak.com
Another solution is to nest a two-column table in the second row.
Help in the forum is easier with screenshots: http://community.wikidot.com/forum_screenshots
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.
Anyway to do rowspanning?
I wanna know that too! :)
And me - row span please
Is there a way to valign the text?
use
[[row style="vertical-align:top"]]
I didn't even know how to ask this question. Thanks both of you. =)
… 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.
Nevermind. I figured it out myself. c:
how?
How can I specify the cell width in a table?
Don't worry - I have managed to work it out!
Can it be done?
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
Try [[table style="align:left"]]
Clarification: so your source would look like this?
[[table style="align:left"]]
@|| cell 1 || cell 2 ||@
I also tried:
[[<]] … [[/<]]
to no avail!
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]]
Um, that doesn't work.
I stumbled on to this syntax and it worked for me
Genius!
That's exactly what I was trying to find!
Exactly what I was looking for too. Thanks.
Here's another solution:
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
Could anyone tell me how to centre the images and text in my cells? Tried [[cell style=" align: center;"]]
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.
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
<table> = [[table]]
<tr> = [[row]]
<td> = [[cell]]
<th> = ???
is there a solution to this lack of <th> wiki tag yet?
According to W3Schools:
A solution for mimicing <th> header cells you can use inline would be:
[[cell style="font-weight:bold; text-align: center;"]]
For example:
Personally, I like to format the header cells myself since I prefer to have my headers line up with the type of content in the rows below. Right aligned for numbers, left aligned for text and centered where that looks best.
-Ed
Install, Configure and Customize Wikidot Open Source
How to implement sorting by one column? Twiki supports it.
Hi
I want to get rid of the space between the cells when I put background colors, like in this example:
Is there any way of deleting the cell-spacing?
I have tried with padding=0, margin=0 and border=0, with no success… any ideas?
Cheers
Ok, I figured this out: I need to write
Exactly!
Piotr Gabryjeluk
visit my blog
Love the border-collapse. Is there a list of all the different Style commands somewhere?
You just need a CSS reference page like Here and here. Before you get too fancy though you should find out about the issues with CSS implementation - i.e. not everything will work as you expect because different browsers don't always do what they should - and the fancier you get the more you are asking for trouble.
Does anybody have any idea how to implement a scroll bar around a table? My table is too wide and stretches past the right edge of the whole web page and it looks like a mess.
I've found out how: just make a div box around the table with the parameter overflow:auto;. Note that using a div box with tabs may cause some problems, but I posted some workarounds in the tabs page comments.
Any one can help me to create a table in which the || is not recognized as the cell division, I want || to appear as a text in a cell.
use the "@@" ( double @) as delimiter - this switch off the wikidot renderer..
like
which gives
||
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
Is there a way to change the color of the heading text while still keeping a background color? I've tried several different codes and nothing worked.
You can change in every "Level" ( means table, row, cell) the attribute style="….;color:blue; background-color:yellow" (or use the RGB Codes xFF0000 ; x0000FF instead of the "text" codes)..
Have a look on the http://community.wikidot.com/howto:howto:embelish-text:examples for the style attributes
and on the http://community.wikidot.com/howto:table-layout-with-row-and-cell for the table usages
And: read the posts here in the comments ….
Edit:
Another tip: got to the Community site and enter "table header color" in the search field at the start window.. you will get exact the info you need! ( with the very new search function)
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
Thanks for the info. I'll definitely look it over.
I've got a template set up with content variables, but sometimes a row in the table is unnecessary. If I set that as the last content number, is there any way for it to be hidden if it's not used?
I am not sure if this can help:
http://community.wikidot.com/howto:set-up-an-infobox
http://community.wikidot.com/howto:set-up-an-infobox-exclude-specific-attributes
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
On PC's running XP and IE7, the [[table style="vertical-align: top"]] command is being ignored.
I don't really need a table and the issue may be that the rows of images are too wide for a 1024px x 768px screen… but whether in a table as shown or not on a table with the same style command applied to the images…
I am getting a huge block of white space before my images and content (which all floats to the bottom)… it is formatted correctly, but is waaaayyyy down.
BTW, it looks + works great on a wider screen and on my Vista machine. It also works great on the same Windows machine in Firefox….aaauuuggghhhh
Here is the link:
http://www.auto-grok.com/2008-gm-saturn-astra-grok
I looks normal in Opera, too.
Have you tried "vertical-align: top" in the cell style?
Help in the forum is easier with screenshots: http://community.wikidot.com/forum_screenshots
I want to align the contents in a cell so that one phrase is aligned to the left and the other phrase is aligned to the right.
For example:
##Code Phrase Alpha~~~~~~~~~~Code Phrase Beta##
##Code Phrase Charlie~~~~Code Phrase December##
How do I do that?
You need to use [[table]] syntax and play with CSS using [[div]]s
Try something like this:
aligned to left
aligned to right
Code:
Piotr Gabryjeluk
visit my blog
The 'Float' thing works just awesome. I wish I had discovered it earlier; it would've saved me a lot of trouble.
Thanks, guy.
Hi all, I need to get two tables next to each other. Table one has 4 columns and 8 rows, table two has 3 columns and 8 rows. I was hoping to have a small space between the two tables. I am new to Wiki's in general and new to 'Advanced Tables' so I hope that someone can help.
You could float the 2 tables, but that could get messy if the browser window isn't wide enough to display them side-by-side. You might try making a single table that is 8 columns wide, leaving column 5 empty to serve as your spacer like this:
and so on…
You can specify column width, add cell padding, etc. in the style definitions.
-Ed
Install, Configure and Customize Wikidot Open Source
Thanks heaps Ed, that did the trick. I can see how I can use this to also make 3 or even 4 tables next to each other.
It is working great, just wondered if I can decrease the space between the two tables?
You can set the width of the blank column (or any column for that matter) of cells in px, % or em:
You can also rip out the space character in the cell which should allow it to get as narrow as possible with now specific width setting. You'll notice in my example above, I just set the width in the first row and the rows below pick up that setting. You can totally remove the width setting and the "spacer" column will be very narrow. I added the width in my example above to make the spacer more visible. Here's the same example above with no width setting and null cells in the spacer column:
[edit: I should also mention that Gerdami's excellent Excel utility to create Wikidot simple or complex table code is a great tool for managing your table content. If you haven't seen it, you should check it out: http://community.wikidot.com/howto:import-simple-excel-tables-into-wikidot]. Version 2 is the one you want for "complex" tables (generates the type of code with styles we're talking about here).
-Ed
Install, Configure and Customize Wikidot Open Source
Is there any way to 'force' a return in a cell? For instance, in one cell I have a list of items, I want the items to each be on a separate line, but not in different cells. Appreciate any help.
You need to use the "space, underscore" trick like so:
list 1, row 2
list 1, row 3
list 1, row 4
list 2, row 2
list 2, row 3
list 3, row 2
list 3, row 3
list 3, row 4
list 3, row 5
list 4, row 2
list 4, row 3
list 4, row 4
Depending on your layout and desired look, you may need to play with the vertical alignment as well. Here's the code for the above table:
-Ed
Install, Configure and Customize Wikidot Open Source
Add your comment
Add a new comment