User:Timeshifter/Sandbox240

More cell operations.

Help:Table#More cell operations

Setting cell parameters

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

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

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 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

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.