Template:Table style
This template uses Lua: |
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.
- The template automatically adds a terminal semicolon (
- Shorthand codes are managed in Module:table style/data.
List of parameters
The following list is automatically generated from the data in Module:Table style/data. It shows all currently valid formatting codes, their associated aliases, and the actual CSS rules generated from them.
Code | Aliases | Output CSS Style |
---|---|---|
abs |
| position:absolute; |
ac |
| text-align:center; |
aj |
| text-align:justify; |
al |
| text-align:left; |
alc | text-align-last:center; | |
all | text-align-last:left; | |
alr | text-align-last:right; | |
ar |
| text-align:right; |
asc |
| font-variant:all-small-caps; |
auxtoc | background:#E6F2E6;color: #202122 | |
ba |
| border:1px solid black; |
ba. | border:1px dotted black; | |
ba2 | border:2px solid black; | |
ba3 | border:3px solid black; | |
bad | border:4px double black; | |
bb |
| border-bottom:1px solid black; |
bb. | border-bottom:1px dotted black; | |
bb2 | border-bottom:2px solid black; | |
bb2. | border-bottom:2px dotted black; | |
bb3 | border-bottom:3px solid black; | |
bb4xd |
| border-bottom:4px double black; |
bbt | border-bottom:0px solid transparent; | |
bbt1 | border-bottom:1px solid transparent; | |
bc |
| border-collapse:collapse; |
bgt |
| background-color:transparent;color:inherit |
bl |
| border-left:1px solid black; |
bl. | border-left:1px dotted black; | |
bl2 | border-left:2px solid black; | |
bl3 | border-left:3px solid black; | |
bld | border-left:4px double black; | |
blt | border-left:0px solid transparent; | |
blt1 | border-left:1px solid transparent; | |
bn |
| border:none; |
br |
| border-right:1px solid black; |
br. | border-right:1px dotted black; | |
br2 | border-right:2px solid black; | |
br2. | border-right:2px dotted black; | |
br3 | border-right:3px solid black; | |
brd | border-right:4px double black; | |
brt | border-right:0px solid transparent; | |
brt1 | border-right:1px solid transparent; | |
bt |
| border-top:1px solid black; |
bt. | border-top:1px dotted black; | |
bt2 | border-top:2px solid black; | |
bt3 | border-top:3px solid black; | |
btd | border-top:4px double black; | |
btt | border-top:0px solid transparent; | |
btt1 | border-top:1px solid transparent; | |
cap |
| 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; |
flr |
| float:right; |
fs058 |
| font-size:58%; |
fs069 |
| font-size:69%; |
fs080 |
| font-size:80%; |
fs083 |
| font-size:83%; |
fs085 |
| font-size:85%; |
fs090 |
| font-size:90%; |
fs092 |
| font-size:92%; |
fs095 |
| font-size:95%; |
fs105 | font-size:105%; | |
fs110 |
| font-size:110%; |
fs120 |
| font-size:120%; |
fs130 |
| font-size:130%; |
fs144 |
| font-size:144%; |
fs182 |
| font-size:182%; |
fs207 |
| font-size:207%; |
fs249 |
| font-size:249%; |
fs260 | font-size:260%; | |
fs280 | font-size:280%; | |
fs300 | font-size:300%; | |
fsi |
| font-style:italic; |
fsn |
| font-style:normal; |
fvn | font-variant:normal; | |
fwb |
| font-weight:bold; |
fwbfsi |
| font-weight:bold;font-style:italic; |
fwn |
| font-weight:normal; |
h0 |
| height:0; |
h10 |
| height:10%; |
h100 |
| height:100%; |
h15 |
| height:15%; |
h17 |
| height:calc(100% / 6); |
h20 |
| height:20%; |
h25 |
| height:25%; |
h30 |
| height:30%; |
h33 |
| height:calc(100% / 3); |
h40 |
| height:40%; |
h5 |
| height:5%; |
h50 |
| height:50%; |
h60 |
| height:60%; |
h67 |
| height:calc(100% / 1.5); |
h70 |
| height:70%; |
h75 |
| height:75%; |
h80 |
| height:80%; |
h83 |
| height:calc(100% / 1.2); |
h90 |
| height:90%; |
hmax |
| height:max-content; |
hmin |
| height:min-content; |
it |
| padding-left:2em; text-indent:-2em; |
it1 | padding-left:1em; text-indent:-1em; | |
it1p.5 |
| 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 |
| padding-left:2.5em; text-indent:-2em; |
lc |
| text-transform:lowercase; |
lh100 |
| line-height:100%; |
lh110 |
| line-height:110%; |
lh120 |
| line-height:120%; |
lh130 |
| line-height:130%; |
lh150 |
| line-height:150%; |
lh200 |
| line-height:200%; |
lh250 |
| line-height:250%; |
lh300 |
| line-height:300%; |
lh90 |
| 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 |
| 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 |
| padding:0.5em; |
p0 | padding:0; | |
p1 | padding:1em; | |
p1.5 |
| padding:1.5em; |
p2 | padding:2em; | |
p2.5 |
| padding:2.5em; |
p3 | padding:3em; | |
p3.5 |
| padding:3.5em; |
p4 | padding:4em; | |
p5 | padding:5em; | |
p6 | padding:6em; | |
p7 | padding:7em; | |
pb.5 |
| padding-bottom:0.5em; |
pb0 | padding-bottom:0; | |
pb1 | padding-bottom:1em; | |
pb1.5 |
| padding-bottom:1.5em; |
pb2 | padding-bottom:2em; | |
pb2.5 |
| padding-bottom:2.5em; |
pb3 | padding-bottom:3em; | |
pb3.5 |
| padding-bottom:3.5em; |
pb4 | padding-bottom:4em; | |
pb5 | padding-bottom:5em; | |
pb6 | padding-bottom:6em; | |
pb7 | padding-bottom:7em; | |
pl.5 |
| padding-left:0.5em; |
pl0 | padding-left:0; | |
pl1 | padding-left:1em; | |
pl1.5 |
| padding-left:1.5em; |
pl2 | padding-left:2em; | |
pl2.5 |
| padding-left:2.5em; |
pl3 | padding-left:3em; | |
pl3.5 |
| padding-left:3.5em; |
pl4 | padding-left:4em; | |
pl5 | padding-left:5em; | |
pl6 | padding-left:6em; | |
pl7 | padding-left:7em; | |
plr.5 |
| padding-left:0.5em; padding-right:0.5em; |
plr0 | padding-left:0em; padding-right:0em; | |
plr1 | padding-left:1em; padding-right:1em; | |
plr1.5 |
| padding-left:1.5em; padding-right:1.5em; |
plr2 | padding-left:2em; padding-right:2em; | |
plr2.5 |
| padding-left:2.5em; padding-right:2.5em; |
plr3 | padding-left:3em; padding-right:3em; | |
plr3.5 |
| 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 |
| padding-right:0.5em; |
pr0 | padding-right:0; | |
pr1 | padding-right:1em; | |
pr1.5 |
| padding-right:1.5em; |
pr2 | padding-right:2em; | |
pr2.5 |
| padding-right:2.5em; |
pr3 | padding-right:3em; | |
pr3.5 |
| padding-right:3.5em; |
pr4 | padding-right:4em; | |
pr5 | padding-right:5em; | |
pr6 | padding-right:6em; | |
pr7 | padding-right:7em; | |
pt.5 |
| padding-top:0.5em; |
pt0 | padding-top:0; | |
pt1 | padding-top:1em; | |
pt1.5 |
| padding-top:1.5em; |
pt2 | padding-top:2em; | |
pt2.5 |
| padding-top:2.5em; |
pt3 | padding-top:3em; | |
pt3.5 |
| padding-top:3.5em; |
pt4 | padding-top:4em; | |
pt5 | padding-top:5em; | |
pt6 | padding-top:6em; | |
pt7 | padding-top:7em; | |
ptb.5 |
| padding-top:0.5em; padding-bottom:0.5em; |
ptb0 | padding-top:0em; padding-bottom:0em; | |
ptb1 | padding-top:1em; padding-bottom:1em; | |
ptb1.5 |
| padding-top:1.5em; padding-bottom:1.5em; |
ptb2 | padding-top:2em; padding-bottom:2em; | |
ptb2.5 |
| padding-top:2.5em; padding-bottom:2.5em; |
ptb3 | padding-top:3em; padding-bottom:3em; | |
ptb3.5 |
| 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 |
| position:relative; |
rtl | direction:rtl; | |
sc |
| font-variant:small-caps; |
tds |
| text-decoration:line-through; |
tdu |
| text-decoration:underline; |
uc |
| text-transform:uppercase; |
vbm |
| vertical-align:bottom; |
vbs |
| vertical-align:baseline; |
vmi |
| vertical-align:middle; |
vtb |
| vertical-align:text-bottom; |
vtp |
| vertical-align:top; |
vtt |
| vertical-align:text-top; |
w0 |
| width:0; |
w10 |
| width:10%; |
w100 |
| width:100%; |
w15 |
| width:15%; |
w17 |
| width:calc(100% / 6); |
w20 |
| width:20%; |
w25 |
| width:25%; |
w30 |
| width:30%; |
w33 |
| width:calc(100% / 3); |
w40 |
| width:40%; |
w5 |
| width:5%; |
w50 |
| width:50%; |
w60 |
| width:60%; |
w67 |
| width:calc(100% / 1.5); |
w70 |
| width:70%; |
w75 |
| width:75%; |
w80 |
| width:80%; |
w83 |
| width:calc(100% / 1.2); |
w90 |
| width:90%; |
wmax |
| width:max-content; |
wmin |
| width:min-content; |
wnw |
| 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 (
). Then on the second row (after the heading row) all the text in the row to be left justified ({{ts|ac}}
), finally the third row second column (the number of years) to be right justified ({{ts|al}}
).
{{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.