Template:Columns/doc
{{Columns}} may be used to create up to ten columns across a page.
Contents
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
Column-generating template families
The templates listed here are not interchangeable. For example, using {{col-float}} with {{col-end}} instead of {{col-float-end}} would leave a HTML "div" (division) open, potentially harming any subsequent formatting.
Type | Family |
Handles wiki
table code? |
Responsive/ Mobile suited |
Start template | Column divider | End template |
---|---|---|---|---|---|---|
Float | "Col-float" | Yes | Yes | {{Col-float}} | {{Col-float-break}} | {{Col-float-end}} |
"Columns-start" | Yes | Yes | {{Columns-start}} | {{Column}} | {{Columns-end}} | |
Columns | "Div col" | Yes | Yes | {{Div col}} | – | {{Div col end}} |
"Columns-list" | No | Yes | {{Columns-list}} (wraps div col) | – | – | |
Flexbox | "Flex columns" | No | Yes | {{Flex columns}} | – | – |
Table | "Col" | Yes | No | {{Col-begin}}, {{Col-begin-fixed}} or {{Col-begin-small}} |
{{Col-break}} or {{Col-2}} .. {{Col-5}} |
{{Col-end}} |
Can template handle the basic wiki markup {| | || |- |}
used to create tables? If not, special templates that produce these elements (such as {{(!}}, {{!}}, {{!!}}, {{!-}}, {{!)}})—or HTML tags (<table>...</table>
, <tr>...</tr>
, etc.)—need to be used instead.
- 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
Column-generating template families
The templates listed here are not interchangeable. For example, using {{col-float}} with {{col-end}} instead of {{col-float-end}} would leave a HTML "div" (division) open, potentially harming any subsequent formatting.
Type | Family |
Handles wiki
table code? |
Responsive/ Mobile suited |
Start template | Column divider | End template |
---|---|---|---|---|---|---|
Float | "Col-float" | Yes | Yes | {{Col-float}} | {{Col-float-break}} | {{Col-float-end}} |
"Columns-start" | Yes | Yes | {{Columns-start}} | {{Column}} | {{Columns-end}} | |
Columns | "Div col" | Yes | Yes | {{Div col}} | – | {{Div col end}} |
"Columns-list" | No | Yes | {{Columns-list}} (wraps div col) | – | – | |
Flexbox | "Flex columns" | No | Yes | {{Flex columns}} | – | – |
Table | "Col" | Yes | No | {{Col-begin}}, {{Col-begin-fixed}} or {{Col-begin-small}} |
{{Col-break}} or {{Col-2}} .. {{Col-5}} |
{{Col-end}} |
Can template handle the basic wiki markup {| | || |- |}
used to create tables? If not, special templates that produce these elements (such as {{(!}}, {{!}}, {{!!}}, {{!-}}, {{!)}})—or HTML tags (<table>...</table>
, <tr>...</tr>
, etc.)—need to be used instead.
See also
Column-generating template families
The templates listed here are not interchangeable. For example, using {{col-float}} with {{col-end}} instead of {{col-float-end}} would leave a HTML "div" (division) open, potentially harming any subsequent formatting.
Type | Family |
Handles wiki
table code? |
Responsive/ Mobile suited |
Start template | Column divider | End template |
---|---|---|---|---|---|---|
Float | "Col-float" | Yes | Yes | {{Col-float}} | {{Col-float-break}} | {{Col-float-end}} |
"Columns-start" | Yes | Yes | {{Columns-start}} | {{Column}} | {{Columns-end}} | |
Columns | "Div col" | Yes | Yes | {{Div col}} | – | {{Div col end}} |
"Columns-list" | No | Yes | {{Columns-list}} (wraps div col) | – | – | |
Flexbox | "Flex columns" | No | Yes | {{Flex columns}} | – | – |
Table | "Col" | Yes | No | {{Col-begin}}, {{Col-begin-fixed}} or {{Col-begin-small}} |
{{Col-break}} or {{Col-2}} .. {{Col-5}} |
{{Col-end}} |
Can template handle the basic wiki markup {| | || |- |}
used to create tables? If not, special templates that produce these elements (such as {{(!}}, {{!}}, {{!!}}, {{!-}}, {{!)}})—or HTML tags (<table>...</table>
, <tr>...</tr>
, etc.)—need to be used instead.