User:WikiMaster/Tables & Columns

From PortlandWiki
Revision as of 17:20, 18 February 2014 by WikiMaster (talk | contribs) (→‎Miscellaneous: Change column header name to CSS Layout Tricks.)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Wiki Tables & Wiki Columns

This category contains templates which are used to create or aid putting together wikitables.
See also the cleanup template Template:List to table and its category Category:Articles requiring tables
{{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}}
This page gives you information about syntax to build wiki-tables in MediaWiki.

Multi-Column Examples

Shows example of <div style="-moz-column-count:3;"> div tag.
This Wikipedia tutorial page shows a good example of tabbed layout.

Sortable WikiTable

Sortable Table[1][2]
DATA SET NOTES SOURCE SOURCE SOURCE SOURCE

CSS Layout Tricks

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

One of the minor holy grails of XHTML and CSS is to produce a single, semantically logical ordered list that wraps into vertical columns.
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

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;
}
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;
}

References