Posted by stacita on 02 Aug 2009 15:12, last edited by Ed Johnson on 06 Jul 2017 11:21
: table
Table Style Attributes
Customise advanced tables using inline CSS.
border-right
border-bottom
border-left no Three space-separated values
(e.g. 1px solid black) none Used to define the border style of a table, row or cell
margin-right
margin-bottom
margin-left no auto
px, em, % auto Used to define the amount of space between the table and outside content
padding-right
padding-bottom
padding-left no px, em, % 0px Used to define the amount of space between the table and inside content
bottom center Most commonly used to make text remain at the top of a cell that is bigger than the content needs it to be (adjacent cells in the same row can cause this to happen)
? ? Floats a table "on top" of the page so to speak, it is useful for relocating a table to the top right and not losing lines. It can end up covering other items. Floating a second item to the right places it to left of the first one, not below it.
border attribute
Three space-separated values are used to define the border's style.
Example:
[[table style="border: 1px solid black;"]]
[!-- TABLE CONTENTS --]
[[/table]]1. First value defines the border's width:
- Two formats supported: px, em
- e.g. 3px or 1.5em
2. Second value is style
- Several styles are available:
- none
- hidden
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
- inherit
3. Third value is color
- Two formats supported: color name, or a HEX value
- e.g. blue or #F0F0F0
Syntax
- Attributes must be enclosed within the quotes of the style="" parameter.
- Separate each attribute with a semi-colon.
Table syntax is shown below. Each style parameter is optional.
[[table style="attribute1; attribute2; attribute3 ..."]]
[[row style="attribute1; attribute2; attribute3 ..."]]
[[cell style="attribute1; attribute2; attribute3 ..."]]
Content goes into cells
Attempting to insert text into a table or row directly will cause errors
[[/cell]]
[[/row]]
[[/table]]Example:
Related
Please edit and develop me!Related articles
Comments
I would not write an article on [table] attributes and use |piped| tables in the text…
lowkarma.pnggerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!
You have a good point there! =)
However, the doc:wiki-syntax page has simple tables used regularly to list attributes… shouldn't it be the same here? =/
I like consistency =)
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
I do not agree:
- This is not about wikidot syntax but inline CSS style.
- Community HowTos do not have to be consistent with main doc but give pragmatic examples.
lowkarma.pnggerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!
I have changed ( inserted ) a complex table with the same content ( I believe)
with the followng code:
Since this moment I see NOTHING rendered on the page.
EDIT: It was a copied comment with non ending comment ocde… Sorry,
PLEASE - HAVE A LOOK!
And if OK - delete the old table…
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
Looks good gerdami!! =)
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
I miss the vertical-align …
I think that it would be a good opportunity here to explain how to create class styles that can be repeated throughout the [cell]s, thus avoiding unreadable/unmanageable code source.
lowkarma.pnggerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!
Vertical align works…
[[table style="vertical-align: top;"]] will make sure text stays at the top of the cell instead of floating in the centre.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
Hello! I would like to create a table with two columns (65% and 35% width), but have them to always display the same width whether there's content or not. here it is said that the width will, by default, adjust to content. How do I change the default?
Thanks for any tips!
If you use ABSOLUT width:600px for the table as in the examples below, than the width 65% and35% are always ident:
[[table style="color: #fcd7f4; border-collapse: collapse; border-spacing: 0; border-color: #cd568c; border-style: double; margin: 0.5em auto; background-color: #7f5a80; width: 600px;"]]
[[row]]
[[cell style="border: 1px solid #cd568c; padding: 0.3em 0.7em; background-color: #ffcbe7; color: #370f3d; width: 65%;"]]
[[/cell]]
[[cell style="border: 1px solid #cd568c; padding: 0.3em 0.7em;width: 35%;"]]
[[/cell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid #cd568c; padding: 0.3em 0.7em; background-color: #ffcbe7; color: #370f3d;width: 65%;"]]
[[/cell]]
[[cell style="border: 1px solid #cd568c; padding: 0.3em 0.7em;width: 65%;"]]
[[/cell]]
[[/row]]
[[/table]][[table style="color: #fcd7f4; border-collapse: collapse; border-spacing: 0; border-color: #cd568c; border-style: double; margin: 0.5em auto; background-color: #7f5a80; width: 600px;"]]
[[row]]
[[cell style="border: 1px solid #cd568c; padding: 0.3em 0.7em; background-color: #ffcbe7; color: #370f3d; width: 65%;"]]
content cell1
[[/cell]]
[[cell style="border: 1px solid #cd568c; padding: 0.3em 0.7em;width: 35%;"]]
content cell2 [[/cell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid #cd568c; padding: 0.3em 0.7em; background-color: #ffcbe7; color: #370f3d;width: 65%;"]]
content cell3
[[/cell]]
[[cell style="border: 1px solid #cd568c; padding: 0.3em 0.7em;width: 65%;"]]
[[/cell]]
[[/row]]
[[/table]]Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
Thanks, Helmuti! That helped a lot!
I'm going to jump on this thread because I am running into a similar issue. I want text to stay within the box if there is LOTS of it, and to automatically make a new line, instead of extending my table into the void.
I'm trying to make my own gallery include since we still don't have full light box support yet.
[[table align="center"]]
[[row]]
[[cell style="padding: 5px; background-color: #444444; border: 0px solid silver; width: 200px;"]]
[[=image {$image} link="{$link}" width="{$width}"]]
[[/cell]]
[[cell style="padding: 5px; background-color: #444444; width: 1000px; border: 0px solid silver"]]
[[=]]
##0099FF|**{$title}**##
##0099FF|**Date Submitted/Completed: {$date}**##
[[/=]]
##0099FF|Comments:## ##DDDDDD|{$comments}##
[[/cell]]
[[/row]]
[[/table]]Omnia mutantur, nihil interit.
Do you have a live example you can share?
You should be able to fix this with some CSS. This thread on Stack Overflow might help:
https://stackoverflow.com/questions/6666532/how-to-force-table-cell-td-content-to-wrap
[[table align="center" style="table-layout:fixed; width:650px;"]]
[[row]]
[[cell style="padding: 5px; background-color: #444444; border: 0px solid silver; width: 150px;"]]
image placeholder
[[/cell]]
[[cell style="padding: 5px; background-color: #444444; width: 400px; border: 0px solid silver; word-wrap:break-word; white-space: pre-wrap;"]]
[[=]]
##0099FF|**Title Text**##
##0099FF|**Date Submitted/Completed: {$date}**##
[[/=]]
##0099FF|Comments:## ##DDDDDD|Cupcake ipsum dolor sit amet ice cream. Gummi bears I love jelly beans marshmallow soufflé. Bonbon dragée I love I love cotton candy marshmallow chocolate cake brownie toffee.
Fruitcake I love pudding sesame snaps cake dessert jujubes apple pie toffee. Pastry tart pastry pudding cookie. Chupa chups cake cupcake fruitcake carrot cake gingerbread marshmallow.
Caramels sesame snaps jelly beans candy I love I love. I love sugar plum cake tootsie roll I love cake. Pudding icing macaroon cookie brownie pastry carrot cake. Jelly-o candy canes cake tootsie roll chocolate bar.
Cheesecake lollipop pastry. Croissant cake marzipan I love. I love cake candy tart topping brownie.
Powder marzipan halvah cookie marzipan. Muffin brownie apple pie cake bear claw. Donut jujubes chocolate cake.##
[[/cell]]
[[/row]]
[[/table]]Quick Example
Title Text
Date Submitted/Completed: {$date}
Comments: Cupcake ipsum dolor sit amet ice cream. Gummi bears I love jelly beans marshmallow soufflé. Bonbon dragée I love I love cotton candy marshmallow chocolate cake brownie toffee.
Fruitcake I love pudding sesame snaps cake dessert jujubes apple pie toffee. Pastry tart pastry pudding cookie. Chupa chups cake cupcake fruitcake carrot cake gingerbread marshmallow.
Caramels sesame snaps jelly beans candy I love I love. I love sugar plum cake tootsie roll I love cake. Pudding icing macaroon cookie brownie pastry carrot cake. Jelly-o candy canes cake tootsie roll chocolate bar.
Cheesecake lollipop pastry. Croissant cake marzipan I love. I love cake candy tart topping brownie.
Powder marzipan halvah cookie marzipan. Muffin brownie apple pie cake bear claw. Donut jujubes chocolate cake.
Wow you conquered this before I even got home from work. Ahhh. So the key is in the word-wrap modifier? I didnt even know that was a thing, let alone a thing wikidot supported. Is there a page that talks about that on wikidot? Its taken me some tinkering and fiddling to understand the code chunk but I understand it now, and i appreciate the help! :D
Omnia mutantur, nihil interit.
This is really a CSS thing, not a Wikidot thing. In addition to supporting CSS at the theme level, Wikidot supports inline CSS in most elements ([[div]], [[span]], [[image]], [[table]], etc.) as we're used here. A great place to learn about and reference CSS is W3Schools. And remember, Google is your friend! ;-)
A funny coincidence… Right after posting the sample code, this popped up on my Facebook feed: CSS is Awesome
The mug is poking fun at how maddening CSS can be when trying to do what seems to be something simple and obvious.
It's refreshing to help with a real question instead of wading through the cesspool of spam around here these days. I like spending time engaging in helpful conversation rather than wasting it stomping on spammers.
That's one sassy mug.
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
How are column and row spanning cells done? I've tried putting in colspan and rowspan in the style and that doesn't seem to work. Anyone know if this is possible?