Difference between revisions of "Template:Columns"
(adding role=presentation to aid screen readers, but doesn't work in all of them, and long term, we should get rid of this template.) |
m (1 revision) |
||
| (2 intermediate revisions by 2 users not shown) | |||
| 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> |
Latest revision as of 07:25, 22 August 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. |