More cell operations.
Setting cell parameters edit
At the start of a cell, add your parameter followed by a single pipe. For example, style="width: 300px;"| sets that cell to a width of 300 pixels. To set more than one parameter, leave a space between each one.
Wikitext
{| style="color: white;"
|-
| style="background: red;"|cell1
| style="width: 300px; background: blue;"|cell2
| style="background: green;"|cell3
|}
Produces
| cell1 | cell2 | cell3 |
Vertical alignment in cells edit
By default, text is aligned to the vertical middle of the cell:
| Row header | A longer piece of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Imagine someone scrolling down the page, seeing the tops of "empty" columns, and wondering why they're empty. |
Short text |
|---|
To align the text to the top of the cell, apply the style="vertical-align: top;" CSS to the rows (unfortunately, it seems to be necessary to apply this individually to every single row). The valign=... attribute is deprecated and MediaWiki may stop using it.
Wikitext
{| class=wikitable style="width: 400px;"
|- style="vertical-align: top;"
! scope="row" style="width: 10%;" | Row header
| style="width: 70%;"|A longer piece ...
| style="width: 20%;"|Short text
|}
Produces
| Row header | A longer piece of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Imagine someone scrolling down the page, seeing the tops of "empty" columns, and wondering why they're empty. |
Short text |
|---|
Cell content indenting and padding edit
The contents of a cell can be indented or padded on any side. Also, the text can be aligned. In the second row the text is aligned to the right. See the following examples.
Wikitext
{| class=wikitable
|-
| Cell content that is not indented or padded
|-
| style="padding-left: 2em;" | style="padding-left: 2em;"
|-
| style="text-align:right; padding-right: 2em;" | style="text-align:right; padding-right: 2em;"
|-
| style="padding-top: 2em;" | style="padding-top: 2em;"
|-
| style="padding-bottom: 2em;" | style="padding-bottom: 2em;"
|-
| style="padding: 3em 5%;" | style="padding: 3em 5%;" {{space|4}} (Top and Bottom: 3em. Left and Right: 5%)
|-
| style="padding: 3em 4em 5%;" | style="padding: 3em 4em 5%;" {{space|4}} (Top: 3em. Left and Right: 4em. Bottom: 5%)
|-
| style="padding: 3%;" | style="padding: 3%;" {{space|4}} (Top, Right, Bottom, and Left: all 3%)
|-
| style="padding: 1em 20px 8% 9em;" | style="padding: 1em 20px 8% 9em;" {{space|4}} (Top: 1em. Right: 20px. Bottom: 8%. and Left: 9em.)
|}
Produces
| Cell content that is not indented or padded |
| style="padding-left: 2em;" |
| style="text-align:right; padding-right: 2em;" |
| style="padding-top: 2em;" |
| style="padding-bottom: 2em;" |
| style="padding: 3em 5%;" (Top and Bottom: 3em. Left and Right: 5%) |
| style="padding: 3em 4em 5%;" (Top: 3em. Left and Right: 4em. Bottom: 5%) |
| style="padding: 3%;" (Top, Right, Bottom, and Left: all 3%) |
| style="padding: 1em 20px 8% 9em;" (Top: 1em. Right: 20px. Bottom: 8%. and Left: 9em.) |
- Pattern for arguments
The arguments to style="padding: " can be seen as being ordered by a 12-hour clock, starting at noon and going clockwise, in the following sense: "top" is associated with noon (i.e. 12 o'clock, the top of a clock), "right" is 3 o'clock, "bottom" is 6 o'clock, and "left" is 9 o'clock. The arguments are ordered clockwise starting at noon: top → right → bottom → left (see this[note 1] footnote for an example with an explanation).
This same order is also used elsewhere, such as when specifying a cell's borders with border-style: .
Setting default cell padding
Use cellpadding= to set the default padding for each cell in a table. If class=wikitable is used then cellpadding is ignored.
The default space between cells can be changed using cellspacing=.
If cellpadding is not used
Wikitext
{| style="border:1px solid black"
|-
| Cell || Cell
|-
| Cell || Cell
|}
Produces
| Cell | Cell |
| Cell | Cell |
Using cellpadding=10:
Wikitext
{| cellpadding=10; style="border:1px solid black"
|-
| Cell || Cell
|-
| Cell || Cell
|}
Produces
| Cell | Cell |
| Cell | Cell |
Using cellpadding=0:
Wikitext
{| cellpadding=0; style="border:1px solid black"
|-
| Cell || Cell
|-
| Cell || Cell
|}
Produces
| Cell | Cell |
| Cell | Cell |
Using cellpadding=0 and cellspacing=0:
Wikitext
{| cellpadding=0; cellspacing=0; style="border:1px solid black"
|-
| Cell || Cell
|-
| Cell || Cell
|}
Produces
| Cell | Cell |
| Cell | Cell |
Individual cell borders edit
The same CSS used for tables can be used in a cell's format specifier (enclosed in |...|) to put a border around each cell:
Wikitext
{| style="border-spacing: 2px; border: 1px solid darkgray;"
! style="width: 140px;" | Left
! style="width: 150px;" | Center
! style="width: 130px;" | Right
|- style="text-align: center;"
| style="border: 1px solid blue;"|
[[File:Starred.svg |120px]]
| style="border: 1px solid #777777;"|
[[File:Star full.svg |120px]]
| style="border: 1px solid #22AA55;"|<!-- greenish border -->
[[File:Stargreen.svg |120px]]
|- style="text-align: center;"
|Red star || Orange star || Green star
|}
Produces
| Left | Center | Right |
|---|---|---|
|
|
|
|
| Red star | Orange star | Green star |
Note that only the image cells have individual borders, not the text. The lower hex-colors (such as: #616161) are closer to black. Typically, all borders in a table would be one specific color.
- Border styles
The style='border:' and style='border-style:' properties can accept the following arguments:
| Argument | Cell border | Additional notes |
|---|---|---|
none
|
style="border-style: none;" | |
solid
|
style="border-style: solid;" | |
double
|
style="border-style: double;" | |
dashed
|
style="border-style: dashed;" | |
dotted
|
style="border-style: dotted;" | |
ridge
|
style="border:5px ridge red;" | 3D ridged border |
groove
|
style="border:5px groove blue;" | 3D grooved border |
inset
|
style="border: 5px inset yellow;" | 3D inset border |
outset
|
style="border: 5px outset cyan;" | 3D outset border |
inherit
|
style="border-style: inherit;" | Inherit value from parent |
initial
|
style="border-style: initial;" | Set to default value |
- Borders of a cell using
border-top,border-right,border-bottom,border-left
Wikitext
{|
! style="border-top: solid;" | <code>style="border-top: solid;"</code>
|-
| style="border-top: solid 2px red; border-right: dashed 3px green; border-bottom: double 5px blue; border-left: dotted 6px yellow;" |<pre>border-top: solid 2px red;
border-right: dashed 3px green;
border-bottom: double 5px blue;
border-left: dotted 6px yellow;</pre>
|}
Produces
style="border-top: solid;"
|
|---|
border-top: solid 2px red; border-right: dashed 3px green; border-bottom: double 5px blue; border-left: dotted 6px yellow; |
- Top, right, bottom, and left borders of a cell using
style='border-style:'
To set the left, right, bottom, or top border of a single cell, one may use style='border-style:' which takes between 1 and 4 arguments, each of which is either none, solid, double, dotted, dashed, groove, ridge, inset, outset, inherit, or initial.
These arguments are ordered according to the pattern described here.
For instance, style="border-style: solid none solid none;" where the four parameters correspond respectively to the
'border-style: top right bottom left;'
borders of the cell.
For reasons described after this example, there are many ways to change the following code that would not result in any changes to the table that is actually displayed.
Wikitext
{| class=wikitable
|-
| Top_Left
<!-- border-style: top right bottom left; -->
| style="border-style: solid solid none none;" | Top_Center
| Top_Right
|-
| style="border-style: none none solid solid;" | Middle_Left
| style="border-style: none none none none;" | Middle_Center
| style="border-style: solid solid none none;" | Middle_Right
|-
| Bottom_Left
| style="border-style: none none solid solid;" | Bottom_Center
| Bottom_Right
|}
Produces
| Top_Left | Top_Center | Top_Right |
| Middle_Left | Middle_Center | Middle_Right |
| Bottom_Left | Bottom_Center | Bottom_Right |
Note, however, that in the following table, none of the central cell's (i.e. Middle_Center's) borders are removed despite the code style="border-style: none none none none;":
Wikitext
{| class=wikitable
|-
| Top_Left || Top_Center || Top_Right
|-
| Middle_Left
| style="border-style: none none none none;" | Middle_Center
| Middle_Right
|-
| Bottom_Left || Bottom_Center || Bottom_Right
|}
Produces
| Top_Left | Top_Center | Top_Right |
| Middle_Left | Middle_Center | Middle_Right |
| Bottom_Left | Bottom_Center | Bottom_Right |
This happens because the code class="wikitable" places a border (top, right, bottom, and left) around every cell in the table so that, for instance, there are actually two borders between the cells "Middle_Center" and "Middle_Right".
So to remove the border between cells "Middle_Center" and "Middle_Right", it is necessary to remove both the right border of "Middle_Center" and the left border of "Middle_Right":
Wikitext
{| class=wikitable
|-
| Top_Left || Top_Center || Top_Right
|-
| Middle_Left
<!-- 'border-style: top right bottom left;' -->
| style="border-style: none none none none;" | Middle_Center
| style="border-style: none none none none;" | Middle_Right
<!-- In the above line, the three left-most "none" arguments can be replaced with "solid" (or other valid arguments) and there would be no change to the table that is displayed. Only the fourth argument, which is Middle_Right's left border, needs to be "none". For example, the line above could be replaced with:
| style="border-style: solid solid solid none;" | Middle_Right
-->
|-
| Bottom_Left || Bottom_Center || Bottom_Right
|}
Produces
| Top_Left | Top_Center | Top_Right |
| Middle_Left | Middle_Center | Middle_Right |
| Bottom_Left | Bottom_Center | Bottom_Right |
To remove selected external borders of a wikitable, both remove them from the adjacent cells and begin the whole table with code like {| class="wikitable" style="border: none;".
Note that replacing {| class="wikitable" with
{| style="border-collapse: collapse;"
has the effect of removing all cell borders that would otherwise appear by default around every cell in the table.
With this change, you must insert a single cell border between two adjacent cells rather than remove two cell borders.
Cite error: There are <ref group=note> tags on this page, but the references will not show without a {{reflist|group=note}} template (see the help page).