User:WikiMaster/Tables & Columns

Wiki Tables & Wiki Columns

• Category:Table and column templates

• Template:Multicol

{{Multicol}} is used to start a multi-column section of a page. Between each block of column text insert {{Multicol-break}} and close the last column with {{Multicol-end}}. For example:

{{Multicol}}
This text appears in the first column.
{{Multicol-break}}
This text appears in the second column.
{{Multicol-break}}
This text appears in the third column.
{{Multicol-end}}

• Help:Table

This page gives you information about syntax to build wiki-tables in MediaWiki.

Worthy Examples

• Wikipedia:Tutorial/Wrap-up and more info

This Wikipedia tutorial page shows a good example of tabbed layout.

Miscellaneous

<img size=500>http://www.alistapart.com/d/multicolumnlists/example7.jpg</img>

Example 7: Gettin’ fancy with CSS Swag: Multi-Column Lists

• Using CSS multi-column layouts (Mozilla Developer Network)

People have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. Therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do.

A List Apart Tricks

• CSS Swag: Multi-Column Lists

One of the minor holy grails of XHTML and CSS is to produce a single, semantically logical ordered list that wraps into vertical columns.

• Introducing the CSS3 Multi-Column Module

The W3C multi-column module is a CSS level-three working draft, proposed by the W3C to extend the current CSS box model. The module’s intent is to allow content to flow into multiple columns inside an element. It offers new CSS properties that let the designers specify in how many columns an element should be rendered. The browser takes care of formatting the text so that the columns are balanced.

Stack Overflow Questions

• HTML newspaper columns

Q: I'm trying to create newspaper style columns using a block of text. I would like the text to be evenly spread out across 2 columns which could react to change of length in the text. Is this possible using just HTML/CSS, if not could javascript be used?

A: (One of the answers.) If you decide to do this, it is already possible in Mozilla and WebKit (and Prince) with only CSS:

selector {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

• Implementing columns in HTML/CSS

Q: I have a bunch of DIVs that contain textual information. They're all the same width (maybe 400px or so), but different heights. For space reasons, I'd like to have two or three columns of these DIVs (sort of like a want-ad section in a newspaper).

A: (One of the answers.) You could wrap div1 and div2 in a wrapper div, and div 3 and div 4 in a wrapper div, then wrap those two in an outer wrapper. Use some css to the get formatting right and you should be good to go. The html might look something like this:

<div class="wrap">
  <div class="col">
     <div>div1</div>
     <div>div2</div>
  </div>
  <div class="col">
     <div>div3</div>
     <div>div4</div>
  </div>
</div>

Then, have some css like this:

.wrap {
  position: relative;
  overflow: auto;
}
.col {
  float: left;
  width: 400px;
}