Difference between revisions of "Template:Columns"
m (1 revision) |
(Update from sandbox (gapbetween)) |
||
Line 1: | Line 1: | ||
− | <table class="multicol" style=" | + | <table class="multicol" |
− | + | style="{{#switch:{{{align|}}} |left|right=float:{{{align}}}; |center=margin:0.5em auto;}}<!-- | |
− | + | -->border-spacing:0;background:{{{background|{{{bgcol|transparent}}}}}};<!-- | |
− | + | -->{{#if:{{{text-align|}}} |text-align:{{{text-align}}};}}<!-- | |
− | <tr | + | -->{{{style|}}}" |
− | <td style="width:{{{col1width|{{{colwidth|{{{width| | + | role="presentation"> |
− | <td style="width:{{{gap|1.25em}}};"></td> | + | <tr style="vertical-align:top;"> |
− | <td style="width:{{{col2width|{{{colwidth|{{{width| | + | <td style="width:{{{col1width|{{{colwidth|{{{width|15.0em}}}}}}}}};{{{colstyle|}}};{{{col1style}}};">{{#if:1|{{{col1}}}}}</td> |
− | {{#if:{{{col3<includeonly>|</includeonly>}}} | | + | <td style="width:{{{gapbetween|{{{gap|1.25em}}}}}};"></td> |
− | <td style="width:{{{gap|1.25em}}};"></td> | + | <td style="width:{{{col2width|{{{colwidth|{{{width|15.0em}}}}}}}}};{{{colstyle|}}};{{{col2style}}};">{{#if:1|{{{col2}}}}}</td><!-- |
− | <td style="width:{{{col3width|{{{colwidth|{{{width| | + | -->{{#if:{{{col3<includeonly>|</includeonly>}}} |
− | }}{{#if:{{{col4<includeonly>|</includeonly>}}} | | + | | <td style="width:{{{gapbetween|{{{gap|1.25em}}}}}};"></td> |
− | <td style="width:{{{gap|1.25em}}};"></td> | + | <td style="width:{{{col3width|{{{colwidth|{{{width|15.0em}}}}}}}}};{{{colstyle|}}};{{{col3style}}};">{{#if:1|{{{col3}}}}}</td>}}<!-- |
− | <td style="width:{{{col4width|{{{colwidth|{{{width| | + | -->{{#if:{{{col4<includeonly>|</includeonly>}}} |
− | }}{{#if:{{{col5<includeonly>|</includeonly>}}} | | + | | <td style="width:{{{gapbetween|{{{gap|1.25em}}}}}};"></td> |
− | <td style="width:{{{gap|1.25em}}};"></td> | + | <td style="width:{{{col4width|{{{colwidth|{{{width|15.0em}}}}}}}}};{{{colstyle|}}};{{{col4style}}};">{{#if:1|{{{col4}}}}}</td>}}<!-- |
− | <td style="width:{{{col5width|{{{colwidth|{{{width| | + | -->{{#if:{{{col5<includeonly>|</includeonly>}}} |
− | }}{{#if:{{{col6<includeonly>|</includeonly>}}} | | + | | <td style="width:{{{gapbetween|{{{gap|1.25em}}}}}};"></td> |
− | <td style="width:{{{gap|1.25em}}};"></td> | + | <td style="width:{{{col5width|{{{colwidth|{{{width|15.0em}}}}}}}}};{{{colstyle|}}};{{{col5style}}};">{{#if:1|{{{col5}}}}}</td>}}<!-- |
− | <td style="width:{{{col6width|{{{colwidth|{{{width| | + | -->{{#if:{{{col6<includeonly>|</includeonly>}}} |
− | }}{{#if:{{{col7<includeonly>|</includeonly>}}} | | + | | <td style="width:{{{gapbetween|{{{gap|1.25em}}}}}};"></td> |
− | <td style="width:{{{gap|1.25em}}};"></td> | + | <td style="width:{{{col6width|{{{colwidth|{{{width|15.0em}}}}}}}}};{{{colstyle|}}};{{{col6style}}};">{{#if:1|{{{col6}}}}}</td>}}<!-- |
− | <td style="width:{{{col7width|{{{colwidth|{{{width| | + | -->{{#if:{{{col7<includeonly>|</includeonly>}}} |
− | }}{{#if:{{{col8<includeonly>|</includeonly>}}} | | + | | <td style="width:{{{gapbetween|{{{gap|1.25em}}}}}};"></td> |
− | <td style="width:{{{gap|1.25em}}};"></td> | + | <td style="width:{{{col7width|{{{colwidth|{{{width|15.0em}}}}}}}}};{{{colstyle|}}};{{{col7style}}};">{{#if:1|{{{col7}}}}}</td>}}<!-- |
− | <td style="width:{{{col8width|{{{colwidth|{{{width| | + | -->{{#if:{{{col8<includeonly>|</includeonly>}}} |
− | }}{{#if:{{{col9<includeonly>|</includeonly>}}} | | + | | <td style="width:{{{gapbetween|{{{gap|1.25em}}}}}};"></td> |
− | <td style="width:{{{gap|1.25em}}};"></td> | + | <td style="width:{{{col8width|{{{colwidth|{{{width|15.0em}}}}}}}}};{{{colstyle|}}};{{{col8style}}};">{{#if:1|{{{col8}}}}}</td>}}<!-- |
− | <td style="width:{{{col9width|{{{colwidth|{{{width| | + | -->{{#if:{{{col9<includeonly>|</includeonly>}}} |
− | }}{{#if:{{{col10<includeonly>|</includeonly>}}} | | + | | <td style="width:{{{gapbetween|{{{gap|1.25em}}}}}};"></td> |
− | <td style="width:{{{gap|1.25em}}};"></td> | + | <td style="width:{{{col9width|{{{colwidth|{{{width|15.0em}}}}}}}}};{{{colstyle|}}};{{{col9style}}};">{{#if:1|{{{col9}}}}}</td>}}<!-- |
− | <td style="width:{{{col10width|{{{colwidth|{{{width| | + | -->{{#if:{{{col10<includeonly>|</includeonly>}}} |
− | }}</tr></table><noinclude> | + | | <td style="width:{{{gapbetween|{{{gap|1.25em}}}}}};"></td> |
− | {{ | + | <td style="width:{{{col10width|{{{colwidth|{{{width|15.0em}}}}}}}}};{{{colstyle|}}};{{{col10style}}};">{{#if:1|{{{col10}}}}}</td>}} |
− | + | </tr> | |
− | </noinclude> | + | </table><noinclude>{{Documentation}}</noinclude> |
Revision as of 18:30, 28 June 2014
{{{col1}}} | {{{col2}}} | {{{col3}}} | {{{col4}}} | {{{col5}}} | {{{col6}}} | {{{col7}}} | {{{col8}}} | {{{col9}}} | {{{col10}}} |
{{Columns}} may be used to create up to ten columns across a page.
Syntax
Values for col1 and col2, i.e. the contents of the first and second columns, are expected.
{{Columns | background = <!-- Background (default is none) --> | style = <!-- Use to add extra overall CSS styling --> | colwidth = <!-- Width of each column (default 15.0em) --> | gapbetween = <!-- Gap (gutter) between each column (default 1.25em) --> | col1width = <!-- Use to set a custom width for col1 --> | col1 = <!-- (REQUIRED) First column's contents --> | col2width = <!-- Use to set a custom width for col2 (and so on) --> | col2 = <!-- (REQUIRED) Second column's contents --> | col3width = | col3 = ... | col10width = | col10 = }}
The parameters colstyle
and col1style
to col10style
may also be used to tailor all and/or individual columns' CSS styling.
Examples
- Code
{{Columns | col1 = This is a simple application of the columns template, demonstrating the default column widths | col2 = and gaps between columns. See the next example for a more customized use of the template. }}
- Result
This is a simple application of the columns template, demonstrating the default column widths | and gaps between columns. See the next example for a more customized use of the template. |
- Code
{{Columns |background=beige |colwidth=8.5em |gap<!--between-->=3.25em | col1 = * These * columns * are * more * complex | col2 = The<br/>background<br/>is<br/>beige | col3 = ; Each : column ; is : 8.5 [[Em (typography)|''em'']] ; wide | col4 = {{{!}} !colspan="2"{{!}} and {{!-}} {{!}} the {{!!}} gap {{!-}} {{!}}colspan="2"{{!}} between {{!-}} {{!}} each {{!!}} is {{!-}} !colspan="2" align="center"{{!}} 3.25 ''em'' {{!}}} }}
- Result
|
The background is beige |
|
|
See also
Column-generating template families
Caution | The templates listed in the table below are not interchangeable across rows (i.e. across families). For example, using {{Multicol}} with {{End}} instead of {{Multicol-end}} would leave an HTML "div" (division) open, potentially harming any subsequent formatting. |
Family | Wiki table codeFile:Dagger-14-plain.png | Starting template | Break between columns | Ending template |
"Col" | {{Col-begin}} or {{Col-begin-small}} | {{Col-break}}
| {{Col-end}} or {{End}} | |
"Col-float" | 13px | {{Col-float}} | {{Col-float-break}} | {{Col-float-end}} |
"Columns" | 13px | {{Columns}} | – | – |
"Columns-start" | 13px | {{Columns-start}} | {{Column}} | {{Columns-end}} |
"Div col" | 13px | {{Div col}} or {{Columns-list}} | – | {{Div col end}} |
"Multicol" | {{Multicol}} | {{Multicol-break}} | {{Multicol-end}} | |
"TMB" | {{Top}} | {{Mid}} | {{Bottom}} |
File:Dagger-14-plain.png i.e. can the columns handle the wiki markup {| | || |- |} used to create tables? If not, templates that produce these elements (such as {{(!}}, {{!}}, {{!!}}, {{!-}}, {{!)}}) and/or HTML tags (<table>...</table>
, <tr>...</tr>
, etc) will need to be used instead.
The above documentation is transcluded from Template:Columns/doc. (edit | history) Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages. Please add categories to the /doc subpage. Subpages of this template. |