ਫਰਮਾ:Table style
 | ਇਹ ਫਰਮਾ ਹੇਠ ਲਿਖੇ ਲੂਆ ਨੂੰ ਵਰਤਦਾ ਹੈ: |
Usage
[ਸੋਧੋ]- 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 ({{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.