Template:Table style
Usage edit
- This template allows shorthand table styling parameters. It supports up to 10 CSS style commands (e.g. "text-align:right;"), each bound to a shorthand code.
- If you want to add a shorthand entry, add it to {{table style/parse}}.
- Natural language codes that are not in the list of below, can be used in addition, or in combination with the shorthand codes. Natural language codes need to be terminated with the semicolon (;), while shorthand codes include the semicolon (;).
- Units are px, em, %, but they are not part of the code. Consider the units in context.
Suggested codes edit
- Suggested shorthand codes, indicated with yellow background do not exist.
- The new shorthand codes (added on 2019-09-03) are additions and not replacements. Both codes are valid.
- The digits in the suggested codes were padded with 0 for uniformity.
List of parameters edit
- The suggested shorthand codes don't exist.
- They would be additions and all codes both codes are valid.
- These suggested shorthand codes were padded uniformity.
- Shorthand codes may use use px, em, %, but these not indicated in the code.
| natural language code |
original shorthand |
additional shorthand |
table | row | cell | notes |
|---|---|---|---|---|---|---|
| background-color: transparent; | bgt | bgt | y | ? | y | "border: none" doesn't work on many browsers, use "transparent" instead |
| border: 1px dotted black; | ba. | ba1. | y | n | y | |
| border: 1px solid black; | ba | ba01 | y | n | y | |
| border: 2px solid black; | ba2 | ba02 | y | n | y | |
| border: 3px solid black; | ba3 | ba03 | y | n | y | |
| border: 4px double black; | bad | ba04d | y | n | y | |
| border-bottom: 1px dotted black; | bb. | bb01. | y | n | y | |
| border-bottom: 2px dotted black; | bb2. | bb02. | y | n | y | |
| border-bottom: 1px solid black; | bb | bb01. | y | n | y | |
| border-bottom: 1px solid transparent; | bbt1 | bb01t | y | ? | y | "border: none" doesn't work on many browsers, use "transparent" instead |
| border-bottom: 2px solid black; | bb2 | bb02 | y | n | y | |
| border-bottom: 3px solid black; | bb3 | bb03 | y | n | y | |
| border-bottom: 4px double black; | bbd | bb04d | y | n | y | |
| border-collapse: collapse; | bc | bc | n | y | n | |
| border-left: 1px dotted black; | bl. | bl01. | y | n | y | |
| border-left: 1px solid black; | bl | bl01x | y | n | y | |
| border-left: 1px solid transparent; | blt1 | bl1t | y | ? | y | "border: none" doesn't work on many browsers, use "transparent" instead |
| border-left: 2px solid black; | bl2 | bl2 | y | n | y | |
| border-left: 3px solid black; | bl3 | bl3 | y | n | y | |
| border-left: 4px double black; | bld | bl4 | y | n | y | |
| border-right: 1px dotted black; | br. | br01. | y | n | y | |
| border-right: 2px dotted black; | br2. | br02. | y | n | y | |
| border-right: 1px solid black; | br | br01 | y | n | y | |
| border-right: 1px solid transparent; | brt1 | br01t | y | ? | y | "border: none" doesn't work in many browsers, use "transparent" instead |
| border-right: 2px solid black; | br2 | br02 | y | n | y | |
| border-right: 3px solid black; | br3 | br03 | y | n | y | |
| border-right: 4px double black; | brd | br04d | y | n | y | |
| border-top: 1px dotted black; | bt. | bt01. | y | n | y | |
| border-top: 1px solid black; | bt | bt01 | y | n | y | |
| border-top: 1px solid transparent; | btt1 | bt1t | y | ? | y | "border: none" doesn't work on many browsers, use "transparent" instead |
| border-top: 2px solid black; | bt2 | bt02 | y | n | y | |
| border-top: 3px solid black; | bt3 | bt03 | y | n | y | |
| border-top: 4px double black; | btd | bt04d | y | n | y | |
| direction: rtl; | rtl | rtl | ? | ? | y | |
| float: left; | fll | fll | y | n | n | <div> based, breaks text flow. |
| float: right; | flr | flr | y | n | n | <div> based, breaks text flow. |
| font-family: sans-serif; | ffn | ffn | y | y | y | sans serif |
| font-family: serif; | ffs | ffs | y | y | y | serif |
| font-size: 58%; | xxs | fs058 | y | y | y | |
| font-size: 69%; | xs | fs069 | y | y | y | |
| font-size: 80%; | sm80 | fs080 | y | y | y | |
| font-size: 83%; | sm | fs083 | y | y | y | |
| font-size: 85%; | sm85 | fs085 | y | y | y | |
| font-size: 90%; | sm90 | fs090 | y | y | y | |
| font-size: 92%; | sm92 | fs092 | y | y | y | equivalent to {{fine}} |
| font-size: 95%; | sm95 | fs095 | y | y | y | |
| font-size: 105%; | fs105 | fs105 | y | y | y | |
| font-size: 110%; | fs110 | fs110 | y | y | y | sm110 also supported |
| font-size: 120%; | lg | fs120 | y | y | y | |
| font-size: 144%; | xl | fs144 | y | y | y | |
| font-size: 182%; | xxl | fs182 | y | y | y | |
| font-size: 207%; | 3xl | fs207 | y | y | y | |
| font-size: 249%; | 4xl | fs249 | y | y | y | |
| font-size: 260%; | fs260 | y | y | y | ||
| font-size: 280% | fs280 | y | y | y | ||
| font-size: 300% | fs300 | y | y | y | ||
| font-style: italic; | fsi | fsi | y | y | y | |
| font-style: normal; | fsn | fsn | y | y | y | |
| font-weight: bold; | fwb | fwb | y | y | y | equivalent to font-weight:700 [1] |
| font-weight: normal; | fwn | fwn | y | y | y | equivalent to font-weight:400 [2] |
| line-height: 90% | lh9 | lh090 | y | y | y | |
| line-height: 95% | lh95 | lh095 | y | y | y | |
| line-height: 100% | lh10 | lh100 | y | y | y | |
| line-height: 110% | lh11 | lh110 | y | y | y | |
| line-height: 120% | lh12 | lh120 | y | y | y | |
| line-height: 130% | lh13 | lh130 | y | y | y | |
| line-height: 140% | lh140 | y | y | y | standard line height for Arial font-size:100% | |
| line-height: 1.5 | lh15 | lh150 | y | y | y | default height multiplied by 1.5 |
| line-height: 2.0 | lh2 | lh200 | y | y | y | default height multiplied by 2 |
| line-height: 3.0 | lh3 | lh300 | y | y | y | default height multiplied by 3 |
| line-height: normal | lhn | y | y | y | same as line-height:initial | |
| margin: 0 auto 0 auto; | mc | mc | y | ? | y | margin center |
| margin-right: auto; margin-left: auto; | ma | ma | y | ? | ? | margin auto |
| margin: 5px; | m5 | m05 | y | ? | y | |
| margin: 10px; | ma10 | m10 | y | ? | y | |
| margin-bottom: 5px; | mb5 | mb05 | y | ? | y | |
| margin-bottom: 10px; | mb10 | mb10 | y | ? | y | |
| margin-left: 5px; | ml5 | ml05 | y | ? | y | |
| margin-left: 10px; | ml10 | ml10 | y | ? | y | |
| margin-right: 5px; | mr5 | mr05 | y | ? | y | |
| margin-right: 10px; | mr10 | mr10 | y | ? | y | |
| margin-top: 5px; | mt5 | mt05 | y | ? | y | |
| margin-top: 10px; | mt10 | mt10 | y | ? | y | |
| padding-left: 1.0em;text-indent: -1.0em; | it1 | hi10 | y | n | y | 1em hanging indent |
| padding-left: 1.5em; text-indent: -1.0em; | it1p.5 | hi15.10 | y | n | y | 1.5em x 1em hanging indent |
| padding-left: 2.0em; text-indent: -1.0em; | itp | hi20.10 | y | n | y | 2em x 1em hanging indent |
| padding-left: 2.0em;text-indent: -2.0em; | it | hi20 | y | n | y | 2em hanging indent |
| padding-left: 2.5em; text-indent: -2.0em; | itp.5 | hi25.20 | y | n | y | 2.5em x 2 hanging indent |
| padding-left: 3.0em; text-indent: -1.0em; | it1p2 | hi30.10 | y | n | y | 3em x 1em hanging indent |
| padding-left: 4.0em;text-indent: -2.0em; | it42 | hi40.20 | y | ? | y | 4em x 2em hanging indent |
| padding-bottom: 0.5em; | pb.5 | pb05 | y | n | y | |
| padding-bottom: 1.0em; | pb1 | pb10 | y | n | y | |
| padding-bottom: 1.5em; | pb15 | pb15 | y | n | y | |
| padding-bottom: 2.0em; | pb2 | pb20 | y | n | y | |
| padding-bottom: 3.0em; | pb3 | pb30 | y | n | y | |
| padding-bottom: 4.0em; | pb4 | pb40 | y | n | y | |
| padding-bottom: 5.0em; | pb5 | pb50 | y | n | y | |
| padding-left: 0.5em; | pl.5 | pl05 | y | n | y | |
| padding-left: 1.0em; | pl1 | pl10 | y | n | y | |
| padding-left: 1.5em; | pl15 | pl15 | y | n | y | |
| padding-left: 2.0em; | pl2 | pl20 | y | n | y | |
| padding-left: 2.5em; | pl2.5 | pl25 | y | n | y | |
| padding-left: 3.0em; | pl3 | pl30 | y | n | y | |
| padding-left: 3.5em; | pl3.5 | pl35 | y | n | y | |
| padding-left: 4.0em; | pl4 | pl40 | y | n | y | |
| padding-left: 5.0em; | pl5 | pl50 | y | n | y | |
| padding-left: 6.0em; | pl6 | pl60 | y | n | y | |
| padding-left: 7.0em; | pl7 | pl70 | y | n | y | |
| padding-right: 0.5em; | pr.5 | pr05 | y | n | y | |
| padding-right: 1.0em; | pr1 | pr10 | y | n | y | |
| padding-right: 1.5em; | pr15 | pr15 | y | n | y | |
| padding-right: 2.0em; | pr2 | pr20 | y | n | y | |
| padding-right: 2.5em; | pr2.5 | pr25 | y | n | y | |
| padding-right: 3.0em; | pr3 | pr30 | y | n | y | |
| padding-right: 3.5em; | pr3.5 | pr35 | y | n | y | |
| padding-right: 4.0em; | pr4 | pr40 | y | n | y | |
| padding-right: 5.0em; | pr5 | pr50 | y | n | y | |
| padding-right: 6.0em; | pr6 | pr60 | y | n | y | |
| padding-right: 7.0em; | pr7 | pr70 | y | n | y | |
| padding-top: 0.5em; padding-bottom: 0.5em; | ptb.5 | ptb05 | y | n | y | used for table cell spacing above and below label |
| padding-top: 1em; padding-bottom: 1em; | ptb1 | ptb10 | y | n | y | used for table cell spacing above and below label |
| padding-top: 0.5em; | pt.5 | pt05 | y | n | y | |
| padding-top: 1.0em; | pt1 | pt10 | y | n | y | |
| padding-top: 1.5em; | pt15 | pt15 | y | n | y | |
| padding-top: 2.0em; | pt2 | pt20 | y | n | y | |
| padding-top: 3.0em; | pt3 | pt30 | y | n | y | |
| padding-top: 4.0em; | pt4 | pt40 | y | n | y | |
| padding-top: 5.0em; | pt5 | pt50 | y | n | y | |
| padding-top: 6.0em; | pt6 | pt60 | y | n | y | |
| padding-top: 7.0em; | pt7 | pt70 | y | n | y | |
| text-align: center; | ac | ac | y | y | y | |
| text-align: justify; | aj | aj | y | y | y | |
| text-align: left; | al | al | y | y | y | |
| text-align: right; | ar | ar | y | y | y | |
| text-decoration:line-through; | tds | tdl | y | y | y | |
| text-decoration:underline; | tdu | tdu | y | y | y | |
| text-transform: capitalize; | cap | cap | y | y | y | |
| text-transform: lowercase; | lc | lc | y | y | y | |
| text-transform: uppercase; | uc | uc | y | y | y | |
| vertical-align: baseline; | vbs | vbs | y | y | y | |
| vertical-align: bottom; | vbm | vbm | y | y | y | |
| vertical-align: middle; | vmi | vmi | y | y | y | |
| vertical-align: text-bottom; | vtb | vtb | y | y | n | Does not apply to table-cells[1] |
| vertical-align: text-top; | vtt | vtt | n | y | y | Does not apply to table-cells[2] |
| vertical-align: top; | vtp | vtp | n | y | y | |
| white-space: nowrap; | wnw | wnw | y | ? | y | |
| width: 100em; | w100 | w100e | y | n | y | |
| width: 5%; | w5 | w5 | y | n | y | |
| width: 10%; | w10 | w010 | y | n | y | |
| width: 15%; | w15 | w015 | y | n | y | |
| width: 20%; | w20 | w020 | y | n | y | |
| width: 25%; | w25 | w025 | y | n | y | |
| width: 30%; | w30 | w030 | y | n | y | |
| width: 33%; | w33 | w033 | y | n | y | |
| width: 40%; | w40 | w040 | y | n | y | |
| width: 50%; | w50 | w050 | y | n | y | |
| width: 60%; | w60 | w060 | y | n | y | |
| width: 67%; | w67 | w067 | y | n | y | |
| width: 70%; | w70 | w070 | y | n | y | |
| width: 75%; | w75 | w075 | y | n | y | |
| width: 80%; | w80 | w080 | y | n | y | |
| width: 90%; | w90 | w090 | y | n | y | |
| width: 500px; | w500 | y | n | y | ||
| width: 100%; | wa | w100 | y | n | y | |
Examples edit
{{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:top; padding-right:2.0em;"
Natural language code combined with shorthand code: edit
{{ts|text-align:right;|pr2}} produces style="text-align:right; padding-right:2.0em;"
Where to place the template in a table? edit
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 |