Jump to content
Main menu
Main menu
move to sidebar
hide
Navigation
Main page
Recent changes
Random page
Help about MediaWiki
Numinix MediaWiki Demo
Search
Search
Appearance
Create account
Log in
Personal tools
Create account
Log in
Pages for logged out editors
learn more
Contributions
Talk
Editing
Help/Tables
(section)
Page
Discussion
English
Read
Edit
View history
Tools
Tools
move to sidebar
hide
Actions
Read
Edit
View history
General
What links here
Related changes
Special pages
Page information
Appearance
move to sidebar
hide
Warning:
You are not logged in. Your IP address will be publicly visible if you make any edits. If you
log in
or
create an account
, your edits will be attributed to your username, along with other benefits.
Anti-spam check. Do
not
fill this in!
== Alignment == <!--T:296--> === Table alignment === <!--T:297--> </translate> <translate><!--T:298--> Table alignment is achieved by using CSS.</translate> <translate><!--T:299--> The table alignment is controlled by margins.</translate> <translate><!--T:300--> A fixed margin on one side will make the table to be aligned to that side, if on the opposite side the margin is defined as ''auto''.</translate> <translate><!--T:301--> To have a table center aligned, you should set both margins to ''auto''</translate> <translate> <!--T:302--> For example, a right-aligned table: </translate> {| style="width:100%" ! style="width: 50%;"|<translate><!--T:303--> You type</translate> ! style="width: 50%;"|<translate><!--T:304--> You get</translate> |- | style="padding: 5px;"| <pre> {| class="wikitable" style="margin-left: auto; margin-right: 0px;" | <translate nowrap><!--T:305--> Orange</translate> | <translate nowrap><!--T:306--> Apple</translate> |- | <translate nowrap><!--T:307--> Bread</translate> | <translate nowrap><!--T:308--> Pie</translate> |- | <translate nowrap><!--T:309--> Butter</translate> | <translate nowrap><!--T:310--> Ice cream</translate> |} Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </pre> | style="padding: 5px;"| {| class="wikitable" style="margin-left: auto; margin-right: 0px;" | <translate><!--T:311--> Orange</translate> | <translate><!--T:312--> Apple</translate> |- | <translate><!--T:313--> Bread</translate> | <translate><!--T:314--> Pie</translate> |- | <translate><!--T:315--> Butter</translate> | <translate><!--T:316--> Ice cream</translate> |} Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |} <translate> <!--T:317--> And a center-aligned table: </translate> {| style="width:100%" ! style="width: 50%;"|<translate><!--T:318--> You type</translate> ! style="width: 50%;"|<translate><!--T:319--> You get</translate> |- | style="padding: 5px;"| <pre> {| class="wikitable" style="margin: auto;" | <translate nowrap><!--T:320--> Orange</translate> | <translate nowrap><!--T:321--> Apple</translate> |- | <translate nowrap><!--T:322--> Bread</translate> | <translate nowrap><!--T:323--> Pie</translate> |- | <translate nowrap><!--T:324--> Butter</translate> | <translate nowrap><!--T:325--> Ice cream</translate> |} Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </pre> | style="padding: 5px;"| {| class="wikitable" style="margin: auto;" | <translate><!--T:326--> Orange</translate> | <translate><!--T:327--> Apple</translate> |- | <translate><!--T:328--> Bread</translate> | <translate><!--T:329--> Pie</translate> |- | <translate><!--T:330--> Butter</translate> | <translate><!--T:331--> Ice cream</translate> |} Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |} <translate> === Table floating around text === <!--T:332--> </translate> <translate><!--T:333--> If you align a table to the right or the left side of the page, the text that comes after the table starts at the end of it, leaving an empty space around the table.</translate> <translate><!--T:334--> You can make the text to be wrapped around the table by making the table to ''float'' around the text instead of just aligning it.</translate> <translate><!--T:335--> This can be achieved using the <tvar name="1"><code>float</code></tvar> CSS attribute, which can specify whether the table floats to the right side or to the left.</translate> <translate><!--T:336--> When using ''float'', margins don't control table alignment and can be used to specify the margin between the table and the surrounding text.</translate> {| style="width:100%" ! style="width: 50%;"|<translate><!--T:337--> You type</translate> ! style="width: 50%;"|<translate><!--T:338--> You get</translate> |- | style="padding: 5px;"| <pre> {| class="wikitable" style="float:right; margin-left: 10px;" | <translate nowrap><!--T:339--> Orange</translate> | <translate nowrap><!--T:340--> Apple</translate> |- | <translate nowrap><!--T:341--> Bread</translate> | <translate nowrap><!--T:342--> Pie</translate> |- | <translate nowrap><!--T:343--> Butter</translate> | <translate nowrap><!--T:344--> Ice cream</translate> |} Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </pre> | style="padding: 5px;"| {| class="wikitable" style="float:right; margin-left: 10px;" | <translate><!--T:345--> Orange</translate> | <translate><!--T:346--> Apple</translate> |- | <translate><!--T:347--> Bread</translate> | <translate><!--T:348--> Pie</translate> |- | <translate><!--T:349--> Butter</translate> | <translate><!--T:350--> Ice cream</translate> |} Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. |} <translate> === Cell contents alignment === <!--T:351--> </translate> <translate><!--T:352--> The alignment of cell contents can be controlled with 2 different CSS properties: <tvar name="1"><code>text-align</code></tvar> and <tvar name="2"><code>vertical-align</code></tvar>.</translate> <translate><!--T:353--> <tvar name="1"><code>text-align</code></tvar> can be specified at the table, row or individual cells, while <tvar name="2"><code>vertical-align</code></tvar> only can be specified at individual rows or cells.</translate> {| style="width:100%" ! style="width: 50%;"|<translate><!--T:354--> You type</translate> ! style="width: 50%;"|<translate><!--T:355--> You get</translate> |- | style="padding: 5px;"| <pre> {| class="wikitable" |- style="vertical-align:top;" | style="height:100px; width:100px; text-align:left;" | A | style="height:100px; width:100px; text-align:center;" | B | style="height:100px; width:100px; text-align:right;" | C |- style="vertical-align:middle;" | style="height:100px; width:100px; text-align:left;" | D | style="height:100px; width:100px; text-align:center;" | E | style="height:100px; width:100px; text-align:right;" | F |- style="vertical-align:bottom;" | style="height:100px; width:100px; text-align:left;" | G | style="height:100px; width:100px; text-align:center;" | H | style="height:100px; width:100px; text-align:right;" | I |} </pre> | style="padding: 5px;"| {| class="wikitable" |- style="vertical-align:top;" | style="height:100px; width:100px; text-align:left;" | A | style="height:100px; width:100px; text-align:center;" | B | style="height:100px; width:100px; text-align:right;" | C |- style="vertical-align:middle;" | style="height:100px; width:100px; text-align:left;" | D | style="height:100px; width:100px; text-align:center;" | E | style="height:100px; width:100px; text-align:right;" | F |- style="vertical-align:bottom;" | style="height:100px; width:100px; text-align:left;" | G | style="height:100px; width:100px; text-align:center;" | H | style="height:100px; width:100px; text-align:right;" | I |} |} <translate>
Summary:
Please note that all contributions to Numinix MediaWiki Demo may be edited, altered, or removed by other contributors. If you do not want your writing to be edited mercilessly, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource (see
Project:Copyrights
for details).
Do not submit copyrighted work without permission!
Cancel
Editing help
(opens in new window)
