editor
7,290
edits
Changes
Jump to navigation
Jump to search
m
Saving changes
This *could* be useful in some cases, but generally when making a table, you'll probably want it to look like a table and not just a bunch of floating words. For example, on the Animals article, there is a giant table that looks like this:
[[File:Handbook28.png]]
To make your table look like a table, you need to tell it that you'd like there to be a border, for example. We'll take a look at some different formatting options available for tables now.
===Table Alignment===
You can align the entire table as well as text within the table.
For table alignment, you have the option of right alignment, centered alignment, or left alignment (which is just default). You can also float the table in the article, meaning that the article's text will wrap around your table.
So let's look at how to achieve these alignment styles!
To align the table to the right, you'll add
<pre>style="margin-left:auto;"</pre>
to your table start line, which is
<pre> {|</pre>
[[File:Handbook29.png]]
Below is the code to create this table:
<pre>
{|style="border-style: solid; margin-left:auto;" border="1"
!Column 1
!Column 2
!Column 3
|-
|Row 1||Row 1||Row 1
|-
|Row 2||Row 2||Row 2
|}
</pre>
To align the table to the center, you'll add
<pre>style="margin:auto;" </pre>
to your table start line.
[[File:Handbook30.png]]
Finally, you can float the table alongside the article text by adding the following to your table start line:
<pre>
style="float:left;"
</pre>
or
<pre>
style="float:right;"
</pre>
[[File:Handbook31.png]]
==Text Alignment==
Text alignment in cells can be left, right, or center-aligned, as well as vertically aligned to the top, middle, or bottom.
===Horizontal Alignment===
To align to the left, right or center, use
<pre>
style="text-align:center;"
</pre>
This code can be used in the table start, row start, or cell start levels.
If placed at the table start level, it will align all text within the table the way specified.
[[File:Handbook32.png]]
<pre>{|style="text-align:center;"</pre>
If placed at the row start level, it will only align the text within that row's cells the way specified.
[[File:Handbook33.png]]
<pre>|-style="text-align:center;"</pre>
If placed at the cell level, it will only align that individual cell the way specified.
[[File:Handbook34.png]]
<pre>|-style="text-align:center;"</pre>
Note: When adding styling code such as this to the cell level, you need to add a vertical bar after your code, dividing it from the text your cell contains. For example, the second row in this code looks like this:
<pre>
|Row 2||style="text-align:center;"|Row 2||Row 2
</pre>
===Vertical Alignment===
Vertical alignment can be set to top, middle, or bottom with, at cell or row level.
<pre>
style="vertical-align:bottom;"
</pre>
The first row is vertically aligned to the top, the second to the middle, and the third to the bottom. In this example, the code is applied to the whole row.
{| 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
|}
You can use the code at the cell level as well, which will modify the individual cell.
{| border="1" style="width:300px; height:200px;"
|-
|style="vertical-align:top;"|Row 1||style="vertical-align:bottom;"|Row 1||style="vertical-align:top;"|Row 1
|-
|Row 2||Row 2||Row 2
|}
Note: When adding styling code such as this to the cell level, you need to add a vertical bar after your code, dividing it from the text your cell contains.
