Difference between revisions of "Template:Columns/doc"

From blackwiki
Jump to navigation Jump to search
imported>Sardanaphalus
m (→‎Syntax: <!--between-->)
imported>Great Brightstar
 
(8 intermediate revisions by 7 users not shown)
Line 1: Line 1:
 
{{Documentation subpage}}
 
{{Documentation subpage}}
 
<!-- EDIT TEMPLATE DOCUMENTATION AFTER THIS LINE -->
 
<!-- EDIT TEMPLATE DOCUMENTATION AFTER THIS LINE -->
 +
{{When on basepage|{{Uses TemplateStyles|Template:Columns/styles.css}}}}
 +
{{tl|Columns}} may be used to create up to ten columns across a page.
  
Template <!-- ?: in the vein of navbox templates such as {{tl|Navbox}} --> to aid the creation of (up to ten) columns across a page.
+
{{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 ==
 +
Values for ''col1'' and ''col2'', i.e. the contents of the first and second columns, are expected.
  
 
<pre>
 
<pre>
 
{{Columns
 
{{Columns
| background =     <!-- Background colo(u)r (default is none) -->
+
| background =   <!-- Background (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<!--between--> =     <!-- Gap (gutter) between each column (default 1.25em) -->
+
| gapbetween =   <!-- Gap (gutter) between each column (default 1.25em) -->
| col1width =       <!-- Use to set a different width for col1 -->
+
| col1width =   <!-- Use to set a custom width for col1 -->
| col1 =           <!-- First column's contents (mandatory) -->
+
| col1 =         <!-- (REQUIRED) First column's contents -->
| col2width =       <!-- Use to set a different width for col2 (and so on) -->
+
| col2width =   <!-- Use to set a custom width for col2 (and so on) -->
| col2 =           <!-- Second column's contents (mandatory) -->
+
| col2 =         <!-- (REQUIRED) Second column's contents -->
 
| col3width =  
 
| col3width =  
 
| col3 =  
 
| col3 =  
Line 27: Line 30:
  
 
== Examples ==
 
== Examples ==
 
+
; {{larger|Code}}
; Code
 
 
<pre>
 
<pre>
 
{{Columns
 
{{Columns
Line 36: Line 38:
 
</pre>
 
</pre>
  
; Result
+
; {{larger|Result}}
 
{{Columns{{#ifeq:{{SUBPAGENAME}}|sandbox |/sandbox}}
 
{{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
Line 42: Line 44:
 
}}
 
}}
  
<br/>
+
<br />
 
<hr/>
 
<hr/>
  
; Code
+
; {{larger|Code}}
 
<pre>
 
<pre>
 
{{Columns |background=beige |colwidth=8.5em |gap<!--between-->=3.25em
 
{{Columns |background=beige |colwidth=8.5em |gap<!--between-->=3.25em
Line 57: Line 59:
  
 
| col2 =
 
| col2 =
The<br/>background<br/>is<br/>beige
+
The<br />background<br />is<br />beige
  
 
| col3 =
 
| col3 =
Line 79: Line 81:
 
</pre>
 
</pre>
  
; Result
+
; {{larger|Result}}
 
{{Columns{{#ifeq:{{SUBPAGENAME}}|sandbox |/sandbox}}
 
{{Columns{{#ifeq:{{SUBPAGENAME}}|sandbox |/sandbox}}
 
|background=beige |colwidth=8.5em |gap<!--between-->=3.25em
 
|background=beige |colwidth=8.5em |gap<!--between-->=3.25em
Line 91: Line 93:
  
 
| col2 =
 
| col2 =
The<br/>background<br/>is<br/>beige
+
The<br />background<br />is<br />beige
  
 
| col3 =
 
| col3 =
Line 113: Line 115:
  
 
== See also ==
 
== See also ==
{{Column templates/others}}
+
{{Column-generating template families}}
  
<includeonly>
+
 
{{#ifeq:{{SUBPAGENAME}}|sandbox | |
+
<includeonly>{{Sandbox other|
<!-- Categories -->
+
| <!-- Categories below this line, please: -->
[[Category:Table and column templates]]
+
[[Category:Multi-column templates]]
}}
+
}}</includeonly>
</includeonly>
 

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" />