Help:Columns
 | This help page is ahow-to guide. It explains concepts or processes used by the Wikipedia community. It is not one ofWikipedia's policies or guidelines,and may reflect varying levels ofconsensus. |
colbegin and colend
[edit]To create columns in an article one may use{{colbegin}}and{{colend}}.Note that this is not supported by Internet Explorer version 9 and below or Opera version 11 and below — see{{Div col}}for details. To illustrate the use of these templates, this example uses the{{lorem}}template to generateLorem ipsumplaceholder text.
{{colbegin}}
{{lorem}}
{{lorem}}
{{colend}}
produces:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
You can also use{{col-begin}},{{col-break}},and{{col-end}}.But don't use this variety to set numbered or bulletedlistsin columns, because{{col-break}}breaks the list up, which is a problem foraccessibility.
As such:
{{col-begin}}
{{col-break}}
{{lorem}}
{{col-break}}
{{lorem}}
{{col-break}}
{{lorem}}
{{col-end}}
creates
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
CSS
[edit]MediaWiki:Common.cssdefines the following styles:
- "div.columns-2", "div.columns-3", "div.columns-4" and "div.columns-5" which need to contain a "div.column"
Templates
[edit]- {{colbegin}}and{{divbegin}}– utilizes CSS3 features
- {{Columns-start}}– defines CSS classes (see above)
- {{col-begin}}– uses an HTML table (also adds a MULTICOL attribute)
- {{col-begin-small}}
- {{div col}}– uses CSS3
- {{columns-list}}– uses CSS3
CSS3 multicolumn support
[edit]| Property | Internet Explorer |
Firefox | Safari | Chrome | Opera |
|---|---|---|---|---|---|
| column-width column-count |
≥ 10 (2012) |
≥ 1.5 (2005) |
≥ 3 (2007) |
≥ 1 (2008) |
≥ 11.1 (2011) |
| columns | ≥ 10 (2012) |
≥ 9 (2011) |
≥ 3 (2007) |
≥ 1 (2008) |
≥ 11.1 (2011) |
| break-before break-after break-inside |
≥ 10 (2012) |
≥ 65 (2019) |
≥ 10 (2016) |
≥ 65 (2016) |
≥ 15 (2013) |
The templates{{div col}}and{{divbegin}}use a feature inCSS3that is implemented in:
- Gecko-based browsers, such asFirefox1.5
- Presto-based browsers, such asOpera11.1
- WebKit-based browsers, such asSafari (web browser)3 andGoogle Chrome1
- MSHTML-based browsers, such asInternet Explorer10