close
Sayahna Sayahna
Search

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="background:{{{bgcol|transparent}}}; {{#if:{{{text-align|}}}
+
<table class="multicol"
  |text-align:{{{text-align}}};
+
      style="{{#switch:{{{align|}}} |left|right=float:{{{align}}}; |center=margin:0.5em auto;}}<!--
  }} {{#switch:{{{align|}}}|left|right=float:{{{align}}};|center=margin:0.5em auto;
+
          -->border-spacing:0;background:{{{background|{{{bgcol|transparent}}}}}};<!--
  }}" cellspacing="0" cellpadding="0" role="presentation">
+
          -->{{#if:{{{text-align|}}} |text-align:{{{text-align}}};}}<!--
<tr valign="top">
+
          -->{{{style|}}}"
<td style="width:{{{col1width|{{{colwidth|{{{width|15em}}}}}}}}};{{{colstyle|}}};{{{col1style}}};">{{#if:1|{{{col1}}}}}</td>
+
      role="presentation">
<td style="width:{{{gap|1.25em}}};"></td>
+
<tr style="vertical-align:top;">
<td style="width:{{{col2width|{{{colwidth|{{{width|15em}}}}}}}}};{{{colstyle|}}};{{{col2style}}};">{{#if:1|{{{col2}}}}}</td>
+
    <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|15em}}}}}}}}};{{{colstyle|}}};{{{col3style}}};">{{#if:1|{{{col3}}}}}</td>
+
  -->{{#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|15em}}}}}}}}};{{{colstyle|}}};{{{col4style}}};">{{#if:1|{{{col4}}}}}</td>
+
  -->{{#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|15em}}}}}}}}};{{{colstyle|}}};{{{col5style}}};">{{#if:1|{{{col5}}}}}</td>
+
  -->{{#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|15em}}}}}}}}};{{{colstyle|}}};{{{col6style}}};">{{#if:1|{{{col6}}}}}</td>
+
  -->{{#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|15em}}}}}}}}};{{{colstyle|}}};{{{col7style}}};">{{#if:1|{{{col7}}}}}</td>
+
  -->{{#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|15em}}}}}}}}};{{{colstyle|}}};{{{col8style}}};">{{#if:1|{{{col8}}}}}</td>
+
  -->{{#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|15em}}}}}}}}};{{{colstyle|}}};{{{col9style}}};">{{#if:1|{{{col9}}}}}</td>
+
  -->{{#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|15em}}}}}}}}};{{{colstyle|}}};{{{col10style}}};">{{#if:1|{{{col10}}}}}</td>
+
  -->{{#if:{{{col10<includeonly>|</includeonly>}}}
}}</tr></table><noinclude>
+
      | <td style="width:{{{gapbetween|{{{gap|1.25em}}}}}};"></td>
{{documentation}}
+
        <td style="width:{{{col10width|{{{colwidth|{{{width|15.0em}}}}}}}}};{{{colstyle|}}};{{{col10style}}};">{{#if:1|{{{col10}}}}}</td>}}
<!-- PLEASE ADD CATEGORIES TO THE /doc SUBPAGE, THANKS -->
+
</tr>
</noinclude>
+
</table><noinclude>{{Documentation}}</noinclude>

Latest revision as of 07:25, 22 August 2014

Documentation icon Template documentation[view] [edit] [history] [purge]

{{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



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

See also

Column-generating template families

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-6}} or use {{Col-break|width=16.6%}}, i.e. with width ≈ 100%/6.
{{Col-7}} or use {{Col-break|width=14.2%}}, i.e. with width ≈ 100%/7.
{{Col-8}} or use {{Col-break|width=12.5%}}, i.e. with width = 100%/8.
For nine or even more columns, use {{Col-break|width=[W]%}}, where
[W] ≈ 100 divided by the number of columns desired.
{{Col-end}}
or {{End}}
"Col-float" 13pxY {{Col-float}} {{Col-float-break}} {{Col-float-end}}
"Columns" 13pxY {{Columns}}
"Columns-start" 13pxY {{Columns-start}} {{Column}} {{Columns-end}}
"Div col" 13pxY {{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.