Difference between revisions of "Template:Columns/doc"
Jump to navigation
Jump to search
imported>Sardanaphalus (sandbox non-categorization) |
imported>Sardanaphalus (sandbox handling) |
||
| Line 7: | Line 7: | ||
<pre> | <pre> | ||
| − | {{ | + | {{Columns |
| − | |background = <!-- Background colo(u)r (default none) --> | + | | background = <!-- Background colo(u)r (default is none) --> |
| − | |style = <!-- Use to add extra overall CSS styling --> | + | | style = <!-- Use to add extra overall CSS styling --> |
| − | |colwidth = <!-- Width of each column (default 15.0em) --> | + | | colwidth = <!-- Width of each column (default 15.0em) --> |
| − | |gap = <!-- Gap (gutter) between each column (default 1.25em) --> | + | | gap = <!-- Gap (gutter) between each column (default 1.25em) --> |
| − | |col1width = <!-- Use to set a different width for col1 --> | + | | col1width = <!-- Use to set a different width for col1 --> |
| − | |col1 = <!-- First column's contents (mandatory) --> | + | | col1 = <!-- First column's contents (mandatory) --> |
| − | |col2width = <!-- Use to set a different width for col2 (and so on) --> | + | | col2width = <!-- Use to set a different width for col2 (and so on) --> |
| − | |col2 = <!-- Second column's contents (mandatory) --> | + | | col2 = <!-- Second column's contents (mandatory) --> |
| − | |col3width = | + | | col3width = |
| − | |col3 = | + | | col3 = |
... | ... | ||
| − | |col10width = | + | | col10width = |
| − | |col10 = | + | | col10 = |
}} | }} | ||
</pre> | </pre> | ||
| Line 30: | Line 30: | ||
; Code | ; Code | ||
<pre> | <pre> | ||
| − | {{ | + | {{Columns |
| − | |col1 = This is a simple application of the columns template, demonstrating the default column widths | + | | 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. | + | | col2 = and gaps between columns. See the next example for a more customized use of the template. |
}} | }} | ||
</pre> | </pre> | ||
; Result | ; Result | ||
| − | {{ | + | {{Columns{{#ifeq:{{SUBPAGENAME}}|sandbox |/sandbox}} |
| − | |col1 = This is a simple application of the columns template, demonstrating the default column widths | + | | 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. | + | | col2 = and gaps between columns. See the next example for a more customized use of the template. |
}} | }} | ||
| Line 47: | Line 47: | ||
; Code | ; Code | ||
<pre> | <pre> | ||
| − | {{ | + | {{Columns |background=beige |colwidth=8.5em |gap<!--between-->=3.25em |
| − | |col1 = | + | | col1 = |
* These | * These | ||
* columns | * columns | ||
| Line 56: | Line 56: | ||
* complex | * complex | ||
| − | |col2 = | + | | col2 = |
| − | The <br/>background <br/>is <br/>beige | + | The<br/>background<br/>is<br/>beige |
| − | |col3 = | + | | col3 = |
; Each : column | ; Each : column | ||
; is : 8.5 [[Em (typography)|''em'']] | ; is : 8.5 [[Em (typography)|''em'']] | ||
; wide | ; wide | ||
| − | |col4 = | + | | col4 = |
{{{!}} | {{{!}} | ||
!colspan="2"{{!}} and | !colspan="2"{{!}} and | ||
| Line 80: | Line 80: | ||
; Result | ; Result | ||
| − | {{ | + | {{Columns{{#ifeq:{{SUBPAGENAME}}|sandbox |/sandbox}} |
| + | |background=beige |colwidth=8.5em |gap<!--between-->=3.25em | ||
| − | |col1 = | + | | col1 = |
* These | * These | ||
* columns | * columns | ||
| Line 89: | Line 90: | ||
* complex | * complex | ||
| − | |col2 = | + | | col2 = |
| − | The <br/>background <br/>is <br/>beige | + | The<br/>background<br/>is<br/>beige |
| − | |col3 = | + | | col3 = |
; Each : column | ; Each : column | ||
| − | ; is : 8. | + | ; is : 8.5 [[Em (typography)|''em'']] |
; wide | ; wide | ||
| − | |col4 = | + | | col4 = |
{{{!}} | {{{!}} | ||
!colspan="2"{{!}} and | !colspan="2"{{!}} and | ||
| Line 107: | Line 108: | ||
{{!}} each {{!!}} is | {{!}} each {{!!}} is | ||
{{!-}} | {{!-}} | ||
| − | !colspan="2" align="center"{{!}} 3. | + | !colspan="2" align="center"{{!}} 3.25 ''em'' |
{{!}}} | {{!}}} | ||
}} | }} | ||
Revision as of 18:05, 28 June 2014
| This is a documentation subpage for Template:Columns. It contains usage information, categories and other content that is not part of the original template page. |
Template to aid the creation of (up to ten) columns across a page.
Syntax
{{Columns
| background = <!-- Background colo(u)r (default is none) -->
| style = <!-- Use to add extra overall CSS styling -->
| colwidth = <!-- Width of each column (default 15.0em) -->
| gap = <!-- Gap (gutter) between each column (default 1.25em) -->
| col1width = <!-- Use to set a different width for col1 -->
| col1 = <!-- First column's contents (mandatory) -->
| col2width = <!-- Use to set a different width for col2 (and so on) -->
| col2 = <!-- Second column's contents (mandatory) -->
| 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
| 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. |
<section begin="table" />
| Family | Type | Handles wiki
table code? |
Responsive/ Mobile suited |
Start template | Column divider | End template |
|---|---|---|---|---|---|---|
| "Col" | Table | Yes | Yes | {{Col-begin}}, {{Col-begin-fixed}} or {{Col-begin-small}} |
{{Col-break}} or {{Col-2}} .. {{Col-5}} |
{{Col-end}} |
| "Col-float" | CSS float | Yes | Yes | {{Col-float}} | {{Col-float-break}} | {{Col-float-end}} |
| "Columns" | Table | No | Yes | {{Columns}} | – | – |
| "Columns-list" | CSS columns | Yes | Yes | {{Columns-list}} (wrapper) | – | – |
| "Columns-start" | CSS float | Yes | Yes | {{Columns-start}} | {{Column}} | {{Columns-end}} |
| "Flex columns" | CSS flexbox | Yes | Yes | {{Flex columns}} | – | – |
| "Div col" | CSS columns | Yes | Yes | {{Div col}} | – | {{Div col end}} |
I.e., can the columns handle the wiki markup {| | || |- |} used to create tables? If not, templates that produce these elements (such as {{(!}}, {{!}}, {{!!}}, {{!-}}, {{!)}}) or HTML tags (<table>...</table>, <tr>...</tr>, etc.) will need to be used instead.<section end="table" />