Difference between revisions of "Template:Columns/doc"

From blackwiki
Jump to navigation Jump to search
imported>Vanisaac
m (→‎See also: clean up per WP:CAT#T and WP:AWBREQ add template:Sandbox other)
imported>Great Brightstar
 
Line 4: Line 4:
 
{{tl|Columns}} may be used to create up to ten columns across a page.
 
{{tl|Columns}} may be used to create up to ten columns across a page.
  
{{caution|This template creates a [[Help:Tables|table]] rather than actual columns.  This means that it displays poorly on mobile devices or narrow screens and is sub-optimal in terms of [[WP:ACCESS|accessibility]].  Approximately half of the readers of English Wikipedia articles are using mobile devices and may have trouble reading the content that is wrapped in this template.  Please consider using one of the CSS-based column templates listed in the {{Section link||See also}} section instead, or not using columns at all.}}
+
{{caution|This template creates a [[Help:Tables|table]] rather than actual columns.  This means that it may displays poorly on mobile devices or narrow screens and is sub-optimal in terms of [[WP:ACCESS|accessibility]].  Approximately half of the readers of English Wikipedia articles are using mobile devices and may have trouble reading the content that is wrapped in this template.  Please consider using one of the CSS-based column templates listed in the {{Section link||See also}} section instead, or not using columns at all if there is any trouble affects page layout.}}
  
 
== Syntax ==
 
== Syntax ==

Latest revision as of 01:01, 22 July 2020

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

<section begin="table" />

Family Type
Handles wiki
 table code?Script error: No such module "If empty".
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}}

Script error: No such module "If empty". 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" />