Table Attributes
Posted by stacita on 02 Aug 2009 15:12, last edited by Ed Johnson on 06 Jul 2017 11:21
| This page is a stub. You can help us improve Wikidot by expanding it. |
Table Style Attributes
Customise advanced tables using inline CSS.
| attribute | similar attributes | required | allowed values | default | description |
| background-color | N/A | no | Any colour (e.g. name blue or HEX #F0F0F0) | transparent | Used to define the background color of a table, row or cell |
| border | border-top 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 | margin-top 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 | padding-top padding-right padding-bottom padding-left |
no | px, em, % | 0px | Used to define the amount of space between the table and inside content |
| width | N/A | no | px, em, % | matches content | Used to define the width of a table, row or cell |
| vertical-align | N/A | no | top 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) |
| Float | N/A | no | right ? |
? | 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!
I would not write an article on [table] attributes and use |piped| tables in the text…
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 | NEW: Wikiroo, backup tool (in development)
I do not agree:
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 ?
It is better now! I deleted the old table…
If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney
Looks good gerdami!! =)
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
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.
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 | NEW: Wikiroo, backup tool (in development)
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!
Etnolinguistica.Org
An information hub on South American languages
If you use ABSOLUT width:600px for the table as in the examples below, than the width 65% and35% are always ident:
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!
Etnolinguistica.Org
An information hub on South American languages
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.
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
Community Admin
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.
Community Admin
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.
Community Admin
That's one sassy mug.
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
Community Admin
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?
I found my own answer here