Wikidot Community

Sorry for the brevity of my previous reply, I was in the car in a traffic jam. The css module is fine if all the tables on your page will be left aligned. However, if you want to just have one left aligned then you will need to use a div but as well as the margin would need to specify the width of the div:

[[div style="margin:0; width:250px;"]]
||~ Subject Matter ||||~ Value ||
|| Egg Carton Quantity |||| Twelve ||
|| No. of wheels on car |||| Two ||
|| No. of hot cross buns |||| Six ||
[[/div]]

Thanks Rob! Your code works for me

I take it that the margin overrides any alignment code in the div?

…sorry I meant to say "replaces" instead of overrides.

No, [[<]] [[>]] [[=]] [[==]] are for aligning text and convert to to text:align:left, text:align:right, text-align:center, text:align:justify. They have no effect on things like tables so are ignored.

In your first post you put [[div style="align: left;"]] which you can't use because align:left doesn't exist in CSS

This works too.

[[table style="align:left"]] [[row]] [[cell]]
||~ header ||~ header ||~ header ||
|| cell-content || cell-content || cell-content ||
|| cell-content || cell-content || cell-content ||
[[/cell]][[/row]][[/table]]

Yes that does work and is a good simple solution. But it is not due to align:left. As I said in my previous post, align:left does not exist. The table is being left aligned due to the left margin being set elsewhere in the css. The align:left is just being ignored.

Despite a good look I couldn't see what rule was forcing the table to align to the left. A bit of rootling through the css spec at http://www.w3.org/TR/CSS2/tables.html indicates to me that that by default the table wrapper is left aligned in its containing element by default wth an auto width. So that is why a complex table would align to the left.

A simple table is of course different in that it uses the wiki-content-table class which has margin: 0.5em auto; set in the base css so it will, unless over-ridden, always align to the centre.

So the complex table has width:auto and the the simple table is center aligned inside it which you can't really see because it takes up the whole width.

As I mentioned, align:left is not valid css, so if you removed it from the mixed complex/simple code given by Wayne the result would still be the same.

This mix suggested by Wayne is worth remembering for the future. An interesting discussion.

Thanks the extra detail Rob, and thanks to Wayne too for your input.

Thanks Rob, you are 100% correct. The following works just as well.

[[table]] [[row]] [[cell]]
||~ header ||~ header ||~ header ||
|| cell-content || cell-content || cell-content ||
|| cell-content || cell-content || cell-content ||
[[/cell]][[/row]][[/table]]

I have been using what I shared last time to left justify simple tables for a couple of years, with out really knowing why its works.

To center a table you use margin: 0 auto; which sets the margins above and below the table to 0 and sets an auto margin for left and right margins which has the effect of centering the table. You could increase the margin above and below the table by changing the zero to a different figure.

So the css to center a simple table would be:

table.wiki-content-table {
    margin: 0 auto;
}

To center a complex table (the table itself, not the contents of each cell) you would use:

table {
    margin: 0 auto;
}