How do I align text in cells

In tables, how do I align the text of cells horizontaly and verticaly ?

Q: In tables, how do I align the text of cells horizontaly and verticaly ?

A: If you take a look at wikisyntax You can see that there are two ways of making a table:

using || - syntax
using [[table]][[row]][[cell]] - syntax

|| - syntax

If you use the simple ||-syntax, there is no way to use an inline style definition. So to compensate the easyness of the ||-syntax you need to change your custom CSS file in the administrator section. For more details on how to do this look at Adjust your CSS (not finshed!). If you know how to get there, here is the CSS-code you need to change or add:

For the table selector add vertical-align:top and text-align:left.
If you wich to align something, and this is basic CSS, you can choose for horizontal alignment the following values: Left Center Right Justified. For vertical alignment: Top Middle Bottom. If your cell or box that contains the text is rather narrow, you'd better not choose justified because it will easely render "ugly" whitespaces between words, because a browser can not hyphenate words.

table.wiki-content-table {
    text-align:left;
    vertical-align:top;}

[[table]][[row]][[cell]] - syntax

If you use the [[table]][[row]][[cell]] - syntax, wich is similar to plain <html>, you can add an inline style definition like this

[[table style="vertical-align:top;text-align:left;"]]

Note!

Remember that if you change the table selector in your CSS file, ALL your tables in your site will look like this. The opposite is also true if you use an inline style definition ONLY this table will look like this. So think about what you want. And even better… If you are creating a reuseable style definition, maybe you should consider to put it in a named [[div]] container. Than you can adress this style using a chozen selector.

Example:
Your page code

[[div class="topAlignedTable"]]
||||~ my top aligned table ||
||1||line one||
[[/div]]
||||~ my NOT top aligned table ||
||1||line one||

Your CSS code

.topAlignedTable table {vertical-align:top;}
table {vertical-align:middle;}

If you found this info useful rate it up and hit "+"

This is not a <HTML>-CSS reference base. For that we direct you to other excellent places on the web: CSS-tutorials via Google

Thanks for the input to

Add a New Comment

_solved alignment table

The CSS Zone

Making your Wikidot site look //great!//

Membership

CSS Guide

|| - syntax

[[table]][[row]][[cell]] - syntax

Note!