Template:Table style/sandbox

This is the template sandbox page for Template:Table style (diff).
See also the companion subpage for test cases.

Template documentation[view] [edit] [history] [purge]

Shortcut: {{ts}}

This template uses Lua:

Module:Table style (sandbox)

Usage

When transcribing in the Page: namespace this template can be used, though the preferred methodology is to now use each dedicated css page that every Index: page has. Use of a work's css page minimises the amount of code in a table, and it also lessens the number of template calls, which are limited within a MediaWiki page. See Help:Page styles

This template allows shorthand table styling parameters. It supports an unlimited number of shorthand codes, each of which will output one or more CSS style rules.
Raw CSS style rules that do not have a shortcut in the list below can be used instead of or in combination with the shorthand codes. Any parameter provided to the template that is not recognised as a defined shortcut code will be treated as a presumed raw CSS style rule and output essentially as is.
- The template automatically adds a terminal semicolon (;) for all the CSS style rules it outputs. This means that technically you should not end the raw CSS rules you include with a semicolon, but since this only results in ;; which web browsers handle just fine, it really doesn't matter.
Shorthand codes are managed in Module:Table style/styles and Module:Table style/aliases.

List of parameters

The following list is automatically generated from the data in Module:Table style/styles and Module:Table style/aliases. It shows all currently valid formatting codes, their associated aliases, and the actual CSS rules generated from them.

Code	Aliases	Output CSS Style
`abs`	`absolute`	`position:absolute`
`ac`	`align center` `align centre` `center` `center align` `centre` `centre align`	`text-align:center`
`aj`	`align justify` `justify` `justify align`	`text-align:justify`
`al`	`align left` `left` `left align`	`text-align:left`
`alc`		`text-align-last:center`
`all`		`text-align-last:left`
`alr`		`text-align-last:right`
`ar`	`align right` `right` `right align`	`text-align:right`
`asc`	`all small capitals` `all small caps`	`font-variant:all-small-caps`
`auxtoc`		`background:#E6F2E6;color:#202122`
`ba`	`border` `border all`	`border:1px solid`
`ba.`		`border:1px dotted`
`ba2`		`border:2px solid`
`ba3`		`border:3px solid`
`bad`		`border:4px double`
`bb`	`border bottom` `bottom border`	`border-bottom:1px solid`
`bb.`		`border-bottom:1px dotted`
`bb2`		`border-bottom:2px solid`
`bb2.`		`border-bottom:2px dotted`
`bb3`		`border-bottom:3px solid`
`bb4xd`	`bbd`	`border-bottom:4px double`
`bbt`		`border-bottom:0px solid transparent`
`bbt1`		`border-bottom:1px solid transparent`
`bc`	`border collapse` `collapse`	`border-collapse:collapse`
`bgt`	`transparency` `transparent`	`background-color:transparent;color:inherit`
`bl`	`border left` `left border`	`border-left:1px solid`
`bl.`		`border-left:1px dotted`
`bl2`		`border-left:2px solid`
`bl3`		`border-left:3px solid`
`bld`		`border-left:4px double`
`blt`		`border-left:0px solid transparent`
`blt1`		`border-left:1px solid transparent`
`bn`	`border none` `no border`	`border:none`
`br`	`border right` `right border`	`border-right:1px solid`
`br.`		`border-right:1px dotted`
`br2`		`border-right:2px solid`
`br2.`		`border-right:2px dotted`
`br3`		`border-right:3px solid`
`brd`		`border-right:4px double`
`brt`		`border-right:0px solid transparent`
`brt1`		`border-right:1px solid transparent`
`bt`	`border top` `top border`	`border-top:1px solid`
`bt.`		`border-top:1px dotted`
`bt2`		`border-top:2px solid`
`bt3`		`border-top:3px solid`
`btd`		`border-top:4px double`
`btt`		`border-top:0px solid transparent`
`btt1`		`border-top:1px solid transparent`
`cap`	`capitalise` `capitalize`	`text-transform:capitalize`
`db`		`display:block`
`dc`		`display:contents`
`df`		`display:flex`
`di`		`display:inline`
`dib`		`display:inline-block`
`dn`		`display:none`
`dt`		`display:table`
`ffn`		`font-family:sans-serif`
`ffs`		`font-family:serif`
`fll`	`float left`	`float:left`
`flr`	`float right`	`float:right`
`fs058`	`xx-smaller` `xxs`	`font-size:58%`
`fs069`	`x-smaller` `xs`	`font-size:69%`
`fs080`	`sm80`	`font-size:80%`
`fs083`	`sm` `smaller`	`font-size:83%`
`fs085`	`sm85`	`font-size:85%`
`fs090`	`sm90`	`font-size:90%`
`fs092`	`fine` `sm92`	`font-size:92%`
`fs095`	`sm95`	`font-size:95%`
`fs105`		`font-size:105%`
`fs110`	`sm110`	`font-size:110%`
`fs120`	`larger` `lg`	`font-size:120%`
`fs130`	`llg`	`font-size:130%`
`fs144`	`x-larger` `xl`	`font-size:144%`
`fs182`	`2xl` `xx-larger` `xxl`	`font-size:182%`
`fs207`	`3xl` `xxx-larger` `xxxl`	`font-size:207%`
`fs249`	`4xl` `xxxx-larger` `xxxxl`	`font-size:249%`
`fs260`		`font-size:260%`
`fs280`		`font-size:280%`
`fs300`		`font-size:300%`
`fsi`	`i` `italic`	`font-style:italic`
`fsn`	`roman`	`font-style:normal`
`fvn`		`font-variant:normal`
`fwb`	`b` `bold`	`font-weight:bold`
`fwbfsi`	`bi` `bold italic` `fwbsi`	`font-weight:bold;font-style:italic`
`fwn`	`normal`	`font-weight:normal`
`h0`	`height narrow`	`height:0`
`h10`	`h1/10`	`height:10%`
`h100`	`brace` `full height` `h1` `ha` `height all`	`height:100%`
`h15`	`h3/20`	`height:15%`
`h17`	`h1/6`	`height:calc(100% / 6)`
`h20`	`h1/5`	`height:20%`
`h25`	`h1/4` `quarter height`	`height:25%`
`h30`	`h3/10`	`height:30%`
`h33`	`h1/3` `third height`	`height:calc(100% / 3)`
`h40`	`h2/5`	`height:40%`
`h5`	`h1/20`	`height:5%`
`h50`	`h1/2` `half height`	`height:50%`
`h60`	`h3/5`	`height:60%`
`h67`	`h2/3` `two thirds height`	`height:calc(100% / 1.5)`
`h70`	`h7/10`	`height:70%`
`h75`	`h3/4` `three quarter height`	`height:75%`
`h80`	`h4/5`	`height:80%`
`h83`	`h5/6`	`height:calc(100% / 1.2)`
`h90`	`h9/10`	`height:90%`
`hmax`	`brace table` `bracetable` `height max` `hf`	`height:max-content`
`hmin`	`height min`	`height:min-content`
`it`	`hi`	`padding-left:2em; text-indent:-2em`
`it1`		`padding-left:1em; text-indent:-1em`
`it1p.5`	`it1p0.5` `it1p05`	`padding-left:1.5em; text-indent:-1em`
`it1p2`		`padding-left:3em; text-indent:-1em`
`it32`		`padding-left:3em; text-indent:-2em`
`it42`		`padding-left:4em; text-indent:-2em`
`it52`		`padding-left:5em; text-indent:-2em`
`itp`		`padding-left:2em; text-indent:-1em`
`itp.5`	`itp0.5` `itp05`	`padding-left:2.5em; text-indent:-2em`
`lc`	`lower case` `lower-case` `lowercase`	`text-transform:lowercase`
`lh100`	`lh1` `lh10`	`line-height:100%`
`lh110`	`lh11`	`line-height:110%`
`lh120`	`lh12`	`line-height:120%`
`lh130`	`lh13`	`line-height:130%`
`lh150`	`lh15`	`line-height:150%`
`lh200`	`lh2` `lh20`	`line-height:200%`
`lh250`	`lh25`	`line-height:250%`
`lh300`	`lh3`	`line-height:300%`
`lh90`	`lh9`	`line-height:90%`
`lh95`		`line-height:95%`
`ltr`		`direction:ltr`
`ma`		`margin-right:auto; margin-left:auto`
`ma10`		`margin:10px`
`ma5`		`margin:5px`
`mb10`		`margin-bottom:10px`
`mb5`		`margin-bottom:5px`
`mc`	`float` `float center` `float centre`	`margin:0 auto 0 auto`
`ml10`		`margin-left:10px`
`ml5`		`margin-left:5px`
`mr10`		`margin-right:10px`
`mr5`		`margin-right:5px`
`mt10`		`margin-top:10px`
`mt5`		`margin-top:5px`
`ofh`		`overflow:hidden`
`p.5`	`p0.5` `p05`	`padding:0.5em`
`p0`		`padding:0`
`p1`		`padding:1em`
`p1.5`	`p15`	`padding:1.5em`
`p2`		`padding:2em`
`p2.5`	`p25`	`padding:2.5em`
`p3`		`padding:3em`
`p3.5`	`p35`	`padding:3.5em`
`p4`		`padding:4em`
`p5`		`padding:5em`
`p6`		`padding:6em`
`p7`		`padding:7em`
`pb.5`	`pb0.5` `pb05`	`padding-bottom:0.5em`
`pb0`		`padding-bottom:0`
`pb1`		`padding-bottom:1em`
`pb1.5`	`pb15`	`padding-bottom:1.5em`
`pb2`		`padding-bottom:2em`
`pb2.5`	`pb25`	`padding-bottom:2.5em`
`pb3`		`padding-bottom:3em`
`pb3.5`	`pb35`	`padding-bottom:3.5em`
`pb4`		`padding-bottom:4em`
`pb5`		`padding-bottom:5em`
`pb6`		`padding-bottom:6em`
`pb7`		`padding-bottom:7em`
`pl.5`	`pl0.5` `pl05`	`padding-left:0.5em`
`pl0`		`padding-left:0`
`pl1`		`padding-left:1em`
`pl1.5`	`pl15`	`padding-left:1.5em`
`pl2`		`padding-left:2em`
`pl2.5`	`pl25`	`padding-left:2.5em`
`pl3`		`padding-left:3em`
`pl3.5`	`pl35`	`padding-left:3.5em`
`pl4`		`padding-left:4em`
`pl5`		`padding-left:5em`
`pl6`		`padding-left:6em`
`pl7`		`padding-left:7em`
`plr.5`	`plr0.5` `plr05`	`padding-left:0.5em; padding-right:0.5em`
`plr0`		`padding-left:0em; padding-right:0em`
`plr1`		`padding-left:1em; padding-right:1em`
`plr1.5`	`plr15`	`padding-left:1.5em; padding-right:1.5em`
`plr2`		`padding-left:2em; padding-right:2em`
`plr2.5`	`plr25`	`padding-left:2.5em; padding-right:2.5em`
`plr3`		`padding-left:3em; padding-right:3em`
`plr3.5`	`plr35`	`padding-left:3.5em; padding-right:3.5em`
`plr4`		`padding-left:4em; padding-right:4em`
`plr5`		`padding-left:5em; padding-right:5em`
`plr6`		`padding-left:6em; padding-right:6em`
`plr7`		`padding-left:7em; padding-right:7em`
`pr.5`	`pr0.5` `pr05`	`padding-right:0.5em`
`pr0`		`padding-right:0`
`pr1`		`padding-right:1em`
`pr1.5`	`pr15`	`padding-right:1.5em`
`pr2`		`padding-right:2em`
`pr2.5`	`pr25`	`padding-right:2.5em`
`pr3`		`padding-right:3em`
`pr3.5`	`pr35`	`padding-right:3.5em`
`pr4`		`padding-right:4em`
`pr5`		`padding-right:5em`
`pr6`		`padding-right:6em`
`pr7`		`padding-right:7em`
`pt.5`	`pt0.5` `pt05`	`padding-top:0.5em`
`pt0`		`padding-top:0`
`pt1`		`padding-top:1em`
`pt1.5`	`pt15`	`padding-top:1.5em`
`pt2`		`padding-top:2em`
`pt2.5`	`pt25`	`padding-top:2.5em`
`pt3`		`padding-top:3em`
`pt3.5`	`pt35`	`padding-top:3.5em`
`pt4`		`padding-top:4em`
`pt5`		`padding-top:5em`
`pt6`		`padding-top:6em`
`pt7`		`padding-top:7em`
`ptb.5`	`ptb0.5` `ptb05`	`padding-top:0.5em; padding-bottom:0.5em`
`ptb0`		`padding-top:0em; padding-bottom:0em`
`ptb1`		`padding-top:1em; padding-bottom:1em`
`ptb1.5`	`ptb15`	`padding-top:1.5em; padding-bottom:1.5em`
`ptb2`		`padding-top:2em; padding-bottom:2em`
`ptb2.5`	`ptb25`	`padding-top:2.5em; padding-bottom:2.5em`
`ptb3`		`padding-top:3em; padding-bottom:3em`
`ptb3.5`	`ptb35`	`padding-top:3.5em; padding-bottom:3.5em`
`ptb4`		`padding-top:4em; padding-bottom:4em`
`ptb5`		`padding-top:5em; padding-bottom:5em`
`ptb6`		`padding-top:6em; padding-bottom:6em`
`ptb7`		`padding-top:7em; padding-bottom:7em`
`rel`	`relative`	`position:relative`
`rtl`		`direction:rtl`
`sc`	`small capitals` `small caps`	`font-variant:small-caps`
`tds`	`strike`	`text-decoration:line-through`
`tdu`	`underline`	`text-decoration:underline`
`uc`	`upper case` `upper-case` `uppercase`	`text-transform:uppercase`
`vbm`	`bottom` `vertical align bottom`	`vertical-align:bottom`
`vbs`	`baseline` `vertical align baseline`	`vertical-align:baseline`
`vmi`	`middle` `vertical align middle`	`vertical-align:middle`
`vtb`	`text bottom` `vertical align text bottom`	`vertical-align:text-bottom`
`vtp`	`top` `vertical align top`	`vertical-align:top`
`vtt`	`text top` `vertical align text top`	`vertical-align:text-top`
`w0`	`narrow` `width narrow`	`width:0`
`w10`	`w1/10`	`width:10%`
`w100`	`full` `full width` `w1` `wa` `width all`	`width:100%`
`w15`	`w3/20`	`width:15%`
`w17`	`w1/6`	`width:calc(100% / 6)`
`w20`	`w1/5`	`width:20%`
`w25`	`quarter` `quarter width` `w1/4`	`width:25%`
`w30`	`w3/10`	`width:30%`
`w33`	`third` `third width` `w1/3`	`width:calc(100% / 3)`
`w40`	`w2/5`	`width:40%`
`w5`	`w1/20`	`width:5%`
`w50`	`half` `half width` `w1/2`	`width:50%`
`w60`	`w3/5`	`width:60%`
`w67`	`two third` `two thirds` `two thirds width` `two-third` `two-thirds` `w2/3`	`width:calc(100% / 1.5)`
`w70`	`w7/10`	`width:70%`
`w75`	`three quarter` `three quarter width` `three quarters` `three-quarter` `three-quarters` `w3/4`	`width:75%`
`w80`	`w4/5`	`width:80%`
`w83`	`w5/6`	`width:calc(100% / 1.2)`
`w90`	`w9/10`	`width:90%`
`wmax`	`wf` `width max`	`width:max-content`
`wmin`	`width min`	`width:min-content`
`wnw`	`nowrap`	`white-space:nowrap`

Examples

{{ts|ar|ba|sc}} produces style="text-align:right; border:1px solid black; font-variant:small-caps;"

{{table style|ar|vtb|pr2}} produces style="text-align:right; vertical-align:text-bottom; padding-right:2em;"

Shorthand codes combined with CSS style rules

{{ts|text-align:right|pr2}} produces style="text-align:right; padding-right:2em;"

Where to place the template in a table?

Either at the start of the table, or on a row break, or for an individual cell.

In the following example the templates first sets the text in all the cells to be centered ({{ts|ac}}). Then on the second row (after the heading row) all the text in the row to be left justified ({{ts|al}}), finally the third row second column (the number of years) to be right justified ({{ts|ar}}).

{|class="wikitable" {{ts|ac}}
 |-
 !Location
 !Number of years
 !Annual average rainfall in inches
 |-
 |Basra|||18||6-68
 |-{{ts|al}}
 |Bagdad||29||6-64
 |-
 |Mosul||{{ts|ar}}|4||16-71
 |}

Display as:

Location	Number of years	Annual average rainfall in inches
Basra	18	6-68
Bagdad	29	6-64
Mosul	4	16-71

Note

Not all table styling works everywhere, which is a limitation from HTML/CSS. As mentioned above, styles can be applied to a whole table, to an individual table row, or to individual table cells. Most styles work when applied to cells or whole tables. Far fewer styles work on table rows. If you see unexpected results even when the usage looks correct, this may be the problem.

The above documentation is transcluded from Template:Table style/doc.
Editors can experiment in this template's sandbox and testcases pages.
Add categories to the /doc subpage. Subpages of this template.