Template:Ph:Table
From Wikipedia, the free encyclopedia
- [ This section is local to Wikipedia, in Template:Ph:Table. ]
[edit] Wikitable as image gallery
A wikitable can be used to display side-by-side images, in the manner of an image gallery (formatted by "<gallery>"), but with larger images and less vacant area around photos.
A simple framed gallery can be formatted using class="wikitable" to generate the minimal thin-lines around images/photos within the table:
{| class="wikitable"
|-
|<!--column1-->[[Image:Worms 01.jpg|265px]]
|<!--column2-->[[Image:Worms Wappen 2005-05-27.jpg|235px]]
|-
|<!--column1-->Nibelungen Bridge to Worms<br/>across the [[Rhine]]
|<!--column2-->Worms and its sister cities
|}<!--end wikitable-->
Note the result below (with thin-lined cells):
 |
 |
| Nibelungen Bridge to Worms across the Rhine |
Worms and its sister cities |
Another issue about the standard "<gallery>" tag, in 2007, was that it put 4 images per line, overrunning the right margin of a wiki article, unless the gallery was stopped at 3 images. However, a wikitable uses typical image-links with sizes, such as "[[Image:XXX.jpg|130px]]" so 4 images could be displayed on a wikitable line within a 600px width (for 800x600 resolution screens).
{| class="wikitable"
|-
|<!--col1-->[[Image:Worms 01.jpg|130px]]
|<!--col2-->[[Image:Worms Wappen 2005-05-27.jpg|125px]]
|<!--col3-->[[Image:Liberty-statue-with-manhattan.jpg|125px]]
|<!--col4-->[[Image:New-York-Jan2005.jpg|125px]]
|-
|<!--col1-->Nibelungen Bridge to Worms
|<!--col2-->Worms and its sister cities
|<!--col3-->Statue of Liberty
|<!--col4-->New York City
|}<!--end wikitable-->
 |
 |
 |
 |
| Nibelungen Bridge to Worms | Worms and its sister cities | Statue of Liberty | New York City |
Another advantage about wikitable images, compared to "<gallery>" formatting, is the ability to "square" each image when similar heights are needed, so consider putting 2-number image sizes (such as "199x95px"), where the 2nd number limits height:
{| class=wikitable
|-
|<!--col1-->[[Image:Liberty-statue-with-manhattan.jpg|199x95px]]
|<!--col2-->[[Image:New-York-Jan2005.jpg|199x95px]]
|<!--col3-->[[Image:Gold star on blue.gif|199x95px]]
|<!--col4-->[[Image:Worms 01.jpg|100x95px]]<!--smaller-->
|-
|<!--col1-->Statue of Liberty
|<!--col2-->New York City
|<!--col3-->Star on blue
|<!--col4-->Bridge to Worms
|}<!--end wikitable-->
Note the 3 images sized "199x95px" appear identical height, of 95px (4th image purposely smaller). The "95px" forces height, while "199x" fits the various widths (could even be "999x"):
 |
 |
 |
 |
| Statue of Liberty | New York City | Star on blue | Bridge to Worms |
Therefore, the use of size "199x95px" (or "999x95px") produces the auto-height-sizing beyond the "<gallery>" tag, and with the option to set taller thumbnails ("199x105px"), or even to have some images purposely smaller than other images of "95px" height. A very short height ("70px") allows many more images across the table:
{| class=wikitable
|-
|<!--col1-->[[Image:Liberty-statue-with-manhattan.jpg|199x70px]]
|<!--col2-->[[Image:Gold star on blue.gif|199x70px]]
|<!--col3-->[[Image:New-York-Jan2005.jpg|199x70px]]
|<!--col4-->[[Image:Gold star on deep red.gif|199x70px]]
|<!--col5-->[[Image:Worms 01.jpg|199x70px]]<!--same height-->
|<!--col6-->[[Image:Gold star on blue.gif|199x70px]]
|}
The above wikitable-coding produces the result below, of 6 columns:
 |
 |
 |
 |
 |
|
Once images have been placed in a wikitable, control of formatting can be adjusted when more images are added.
[edit] Shifting/centering
Images within a wikitable can be shifted by inserting non-breaking spaces (" ") before or after the image-link (" [[Image:]]"). However, auto-centering simply requires use of center-tags to be placed around an image-link for centering in a cell ("<center>[[Image:..]]</center>").
In the example below, note how Col2 uses <center>, but Col3 uses " ":
{| class=wikitable
|-
|<!--Col1-->[[Image:Domtoren_vanaf_Brigittenstraat.jpg|299x125px]]
|<!--Col2--><center>[[Image:Utrecht 003.jpg|299x125px]]</center>
|<!--Col3--> [[Image:Uitzicht--Domtoren.jpg|299x125px]]
|-
|<!--Col1-->Dom tower from Brigittenstraat
|<!--Col2-->Cloister garth of the Utrecht Dom Church
|<!--Col3--> <small>View from bell tower</small>
|}
The above coding generates the table below: note the middle garden image is centered (but not the left image), and the right image has 2 spaces before " View...":
 |
 |
 |
| Dom tower from Brigittenstraat | Cloister garth of the Utrecht Dom Church | View from bell tower |
Also note that tag "<small>" made a smaller text-size caption.
[edit] Speed/transfer rates
Sometimes, the larger wikitable images are much faster (3x-8x faster) than formatting the smaller <gallery> images, contrary to the notion that "smaller images should use less data" (not always true). It is not easy to predict why wikitables (with larger images) are so much faster: perhaps older gallery images were thumbnailed as larger data-blocks, but when reformatted as larger images for a wikitable, the new (larger) thumbnails become 3x-8x more streamlined, so 3x-8x faster in data transfer than <gallery> images.
However, actual transfer/display speeds depend on the individual files. In October 2007, PNG-format files often stored as 5%-10% slightly smaller than equivalent GIF files, but upon wiki-thumbnailing, the PNG files were converted to massive high-resolution form, where a PNG-format image became a gargantuan data file, often 9x-21x times heavier (more data) than a similar JPEG thumbnail. However, even the quick JPEG photo images might become another 3x-8x faster in a wikitable, rather than as <gallery> images.
 Utrecht Cathedral |
In this gallery, the left 120x90 thumbnail has file-size: 43925b, ~8x slower than the larger wikitable image above, 167x125 with file-size 5693 bytes. Garden image is 22823b v. 8175b in the wikitable (data sizes Jan. 2008).
|
 Utrecht garden |
Transfer display speeds are difficult to predict, so beware standardizing any image format as better or "faster" than another. Whereas a trimmed, full-size PNG file might display 10% faster than a full-size GIF file, the thumbnailed PNG was typically 4x slower than GIF thumbnails, while PNG was 9x-21x times slower than JPEG thumbnails.
The most important issue is that wikitable-images can be larger, clearer than <gallery> images, more important than some wikitable images being 3x-8x faster than the smaller gallery images.
- [ End of Wikipedia section, from Template:Ph:Table. ]
