Wikibooks

Armchair

Joined 21 December 2007
User page Discussion

Various Time SaversEdit

Style Rule Notes DropEdit


CSS Style Notes
HTML Attributes

HTML attributes include such items as cellpadding, cellspacing, and align. There are also several others which apply to tables. They all use two terms separated by an equals sign. It is usual for several such items to be set in the table line. The general format is:

attribute1=value1 attribute1=value2 attributeN=valueN

Note in the above example that the rules are separated by a space. Another listing, this time with a practical example for the three mentioned attributes is:

cellpadding=10px cellspacing=8px align=center


CSS Styles CSS styles have many more formatting rules than do the HTML attributes. They include all of the colouring, fonts, spacing, padding, margin, and other items. There are often several of these in a table element, with the table line itself containing most. The general format is:

style = "property1:value1; property2:value2; ... propertyN:valueN;"

Note from the above general form:

  • Each style rule comprises a property and a value.
  • Separators between the properties and values are full colons.
  • Separators between the style rules themselves are semi-colons.
  • The entire set of rules is enclosed in double quotes.
  • The set forms the right hand side of an expression equated to style.

Another listing, which could be placed in a table element, a row element, or a cell element, to set their background and text colors, is just:

style="background:lightyellow; color:royalblue;"

Note that the color names have been used, and that they are each spelled as one word. The two formatting methods are mixed frequently in the same lines as follows:

align=right width=300px style="background:lightyellow; color:royalblue;"


CSS Style Punctuation Rules Sometimes style rules look a bit compact and need spread out to make them more readable. The rules for spacing between the table elements themselves was covered earlier. These notes apply to the punctuation within a CSS statement.

Main Points to Avoid

  • Line breaks are not permitted within style expressions.
  • Colons and semi-colons must not have a space before them.

These have Latitude

  • Spaces after colons and semi-colons are OK.
  • Space between a table, row, or cell symbol and the word style is OK.
  • Space around any equals symbol is OK.
  • Space between the style rules and their bounding quotes is OK.
  • Optionally, a semi-colon can be placed immediately after the last style rule.

In addition

  • Compound values like ''2px solid black'' must be space-separated.
  • Attributes must be separated from CSS style expressions with space.



Cell Spacing Drop ControlEdit

Cell Spacing Summary
Cellspacing notes
  • There are two ways to set cell spacing; using an HTML attribute called cellspacing, or using the style property combination border-collapse and border-spacing. See the table rules within the main page for the syntax.
  • There can be problems with the cellspacing attribute. For example, when a table is to be displayed as the parameter of a template, the template is likely to fail. To avoid it, the table should be made in HTML, the cellspacing attribute should be removed, and the styles properties should be used for the cell spacing.
  • The border-spacing code can take two forms depending upon whether uniform spacing is required or horizontal spacing different from the vertical. This style sets uniform spacing:
style="border-collapse:separate;border-spacing:10px;"

and this version sets the horizontal as half that of the vertical cell spacing:

style="border-collapse:separate;border-spacing:10px 20px;"
  • The style property pair functions well only when the border-collapse property is present and set to separate, and there is a clear intent as to the spacing. In some other settings there can be overlaps of borders, and unexpected spacings.
  • When both of these two properties is missing, the cellspacing attribute will set the spacing.
  • The priorities work like this. The border-spacing property's value will supersede the cellspacing attribute when both are present. If the border-spacing property is omitted, then the attribute will set the spacing. Clearly, provided that the pair of style properties is present and specified, the attribute might also be present without any mishap.
  • For best results, always specify both border-collapse and border-spacing and set a spacing value. This is the case even when the intention is to set the collapsed state with zero border-spacing.



Table SpacesEdit

The Table Work Spaces
 


The Table Design Spaces

Tables have several spaces that require attention in design; in particular, margins, padding, and cell spacing. Refer to the graphic above and the descripions below for their details.

  • Margins are used to create a space between the table and adjacent items on a page. The four sides of a table can have different margins for each side, or all the same. In addition to margin, there is a related style property which allows the table to place itself clear of other objects and text. Margins are not shown on the above graphic. This property is set in the table line styles as follows:
style="margin:10px 10px 20px 0px;"

This code applies table margins to all sides at once, in the sequence corresponding to top, right, bottom, and left. This sequence is common for many such properties.

  • Table padding describes an area immediately within the outer table border. (Table space A in the graphic). It is used to improve appearance when the contents need a bit more space. It too can be specified for all sides separately or all together. This property is set in the table line styles as follows:
style="padding:20px 10px 20px 10px;"

where this code applies table padding to all sides at once, in the sequence corresponding to top, right, bottom, and left. This property has no effect on other parts of the table when used in the table line.

  • Table spacing describes an area around every cell. (Table space B in the graphic). It exists at the top and sides of the table in addition to any table padding which may be in use. One value sets the spacing for all of the cells. Adjusting the appearance of parts of borders makes sense only when there is some cell spacing to separate the cell borders. This CSS property applies only when the borders are not collapsed. An extra property is therefore needed to set the stage for spacing. The overall combination for cell spacing in the table line, becomes:
style="border-collapse:separate;border-spacing:10px"
  • Another cellspacing method exists; there is an HTML attribute for cellspacing, which can also set the spacing without the need for a CSS style. There are issues in its use for certain purposes, such as when an HTML table is to go into some sort of template; it can prevent operation at such times, or not work at all. When this problem occurs, the above CSS version should be used to correct the problem. It is mentioned here because outside of these exceptions it is quite useful; it needs no stage setting over collapsed or separated borders, and has the typical form:
cellspacing=10px


  • Cell padding describes the space around text in a cell and separates it from the cell border. (Table space C in the graphic). It has an identical code description to table padding except that it is written in the cell line.
style="padding:10px 5px 10px 5px;"

It cannot be written in a style within a row, so when there is much custom padding to be done, any number of style statements for cells become necessary. There is an HTML attribute which can apply padding to all cells at once, and it written in the table line. It has few problems, unlike the spacing attribute. It has the typical form:

cellpadding=10px


  • Table caption is a line of text which is placed above the table and is centered. This text clearly comes inside the top margin, and if added, will shift the table downwards slightly. There is a property to move it to either side or below the table, but the CSS property is not available for all browsers.


Borders Drop PanelEdit

Border Styles and Coding
Solid:
style="border:5px solid maroon"		 Dotted:
style="border:5px dotted blue"		 Groove:
style="border:5px groove oldlace"		 Ridge:
style="border:5px ridge green"
Dashed:
style="border:5px dashed salmon"		 Inset:
style="border:5px inset gray"		 Double:
style="border:5px double maroon"		 Outset:
style="border:5px outset dimgray"
Top only:
style="border-top:5px solid tomato"		 Right only:
style="border-right:5px solid royalblue"		 Bottom only:
style="border-bottom:5px solid darkred"		 Left only:
style="border-left:5px solid fuchsia"

Notes

  • Border styles can be set at table or cell level, and will affect only that element.
  • The above border samples are made with the supplied styles at cell level.
  • Border attributes can be set only at table level and set borders everywhere.
  • The borders attribute , set in the table line, is just border=1px.
  • Partial border styles might need other borders removed for a given effect.
  • To remove a styled border, enter style="border:none" at the same level.
  • To remove borders set by attributes, enter border=0 in the table line.
  • Removed borders can be restored in styles which follow the removal.
  • Cell border styles superimpose on attribute set borders.
  • For a table perimeter, use one of the sample styles but in the table line. This perimeter uses:
style="border:2px solid dimgray"
  • Borders for separate rows are not supported and cell borders must be applied needed.


ColorsEdit

Selected Color Names
Light Colors for Backgrounds
Ivory Linen Beige
Papayawhip Lemonchiffon Floralwhite
Oldlace Lightyellow Azure
Mistyrose Lavenderblush Mintcream
Ghostwhite Whitesmoke Lightgrey
Darkgray Gray Dimgray
Dark Colors for Text
Black Darkblue Midnightblue
Darkgreen Darkolivegreen Royalblue
Navy Darkslateblue Blue
Darkred Maroon Brown
Firebrick Red White




TOC Box
Gray
rgb(249,249,249)
#F9F9F9; 		Block Template
Blue
rgb(240,248,255)
#F0F8FF;


Pre-wrap notes for White-spaceEdit

Press for Pre-wrap notes

Styling the Preformatting Tags

The Use of the White-space Property's Pre-wrap Value

At the time of writing, (July 2008), Opera 8 correctly depicts the use of Pre-wrap. Other browsers are just getting around to adjusting their specifications for its use. The feature has existed in all CSS versions since CSS 2.1. It is said that it will be included soon in Firefox version 3, though it is unclear at which point the Internet Explorer will accommodate this feature. Despite the various browser incompatibilities, it is proposed to describe the use of this method with the hope that the matter will be soon resolved.

The property value finds use in displaying blocks of mark up code with long lines. At the same time, styling methods are found useful to modify the appearance of the preformatting tags. In determining whether or not a given browser supports this property value, note whether or not overflow is apparent in the narrow yellow box example below, and whether or not the box width extends to the right margin; if they do , then the browser cannot make any use of this feature.

To nonetheless see how the method can be used on a browser which can display it, follow the sequence of Wikitext code listings below.

Listing the following table code block in preformatting tags results in overflow... 

<!--Pre-wrap wraps long lines; the rest preformatted.-->
{| cellpadding=7px cellspacing=5px style="border:1px solid lightgray; font-style:italic; background: transparent; color:maroon; width: 250px;"
|+ '''The Table Caption'''
| This is the table cell text
|}

...but by enclosing it in styled preformatting tags... 

<pre style="white-space: pre-wrap; width: 400px;">
The code block goes here
</pre>

...it produces this: Note that the box width and the wrapping of long lines have been modified: 

<!--Pre-wrap wraps long lines; the rest preformatted.-->
{| cellpadding=7px cellspacing=5px style="border:1px solid lightgray; font-style:italic; background: transparent; color:maroon; width: 250px;"
|+ '''The Table Caption'''
| This is the table cell text
|}<!--  -->

The further addition of style rules like this... 

<pre style="white-space: pre-wrap; line-height:2em; border: 1px solid lightgray; background: lightyellow; color: black; width: 400px; font-family: courier new;">
<!--Pre-wrap wraps long lines; the rest preformatted.-->
{| cellpadding=7px cellspacing=5px style="border:1px solid lightgray; font-style:italic; background: transparent; color:maroon; width: 250px;"
|+ '''The Table Caption'''
| This is the table cell text
|}
</pre>


...gives this version of preformatted text, with formats and long-line wrapping... 

<!--Pre-wrap wraps long lines; the rest preformatted.-->
{| cellpadding=7px cellspacing=5px style="border:1px solid lightgray; font-style:italic; background: transparent; color:maroon; width: 250px;"
|+ '''The Table Caption'''
| This is the table cell text
|}


Testing the above code block display by copying and pasting it works well.



HTML table in DropimageEdit

HTML Table Example
This is the table caption.
Description Column Heading 1 Column Heading 2
Heading 1 The time has come for all good men to come to the aid of the party. The quick brown fox jumps over the lazy dog 0123456789 times. Of all the fishes in the sea the mermaid is the one for me. Peter Piper picked a pot of pickled pepper. The Leith police inhibiteth us. The time has come for all good men to come to the aid of the party. The quick brown fox jumps over the lazy dog 0123456789 times. Of all the fishes in the sea the mermaid is the one for me. Peter Piper picked a pot of pickled pepper. The Leith police inhibiteth us.
Heading 2 The time has come for all good men to come to the aid of the party. The quick brown fox jumps over the lazy dog 0123456789 times. Of all the fishes in the sea the mermaid is the one for me. Peter Piper picked a pot of pickled pepper. The Leith police inhibiteth us. The time has come for all good men to come to the aid of the party. The quick brown fox jumps over the lazy dog 0123456789 times. Of all the fishes in the sea the mermaid is the one for me. Peter Piper picked a pot of pickled pepper. The Leith police inhibiteth us.
Heading 3 The time has come for all good men to come to the aid of the party. The quick brown fox jumps over the lazy dog 0123456789 times. Of all the fishes in the sea the mermaid is the one for me. Peter Piper picked a pot of pickled pepper. The Leith police inhibiteth us. The time has come for all good men to come to the aid of the party. The quick brown fox jumps over the lazy dog 0123456789 times. Of all the fishes in the sea the mermaid is the one for me. Peter Piper picked a pot of pickled pepper. The Leith police inhibiteth us.
Heading 4 The time has come for all good men to come to the aid of the party. The quick brown fox jumps over the lazy dog 0123456789 times. Of all the fishes in the sea the mermaid is the one for me. Peter Piper picked a pot of pickled pepper. The Leith police inhibiteth us. The time has come for all good men to come to the aid of the party. The quick brown fox jumps over the lazy dog 0123456789 times. Of all the fishes in the sea the mermaid is the one for me. Peter Piper picked a pot of pickled pepper. The Leith police inhibiteth us.



HTML table code
<!-- This is the code for an HTML table within a drop-control-->  
{{dropimage
| cp= 10px 0 30px 10px
| chta=center
| 1=HTML Table Example
| 2=<table class="wikitable" width=800px align=center style="text-align:left;background:lightyellow;color:maroon;">
<caption style="color:black;font-weight:normal;font-size:12pt">This is the table caption.</caption>
<tr>
 <th style="background:papayawhip;color:black;">Description</th>
 <th style="background:papayawhip;color:black;">Column Heading 1</th>
 <th style="background:papayawhip;color:black;">Column Heading 2</th>
</tr>
<tr>
 <th style="background:papayawhip;color:black;">Heading 1</th>
 <td>{{text}}</td>
 <td>{{text}}</td>
</tr>
<tr>
 <th style="background:papayawhip;color:black;">Heading 2</th>
 <td>{{text}}</td>
 <td>{{text}}</td>
</tr>
<tr>
 <th style="background:papayawhip;color:black;">Heading 3</th>
 <td>{{text}}</td>
 <td>{{text}}</td>
</tr>
<tr>
 <th style="background:papayawhip;color:black;">Heading 4</th>
 <td>{{text}}</td>
 <td>{{text}}</td>
</tr>
</table>
}}



Ring of Images FormatEdit

Press for ring code
<br clear=all>
{|
|<Gallery align=center perrow=1 widths=200px>
image:gerbera_pink.jpg|Pink Gerbera
</gallery>
|<Gallery align=center perrow=1 widths=200px>
image:gerbera_pink.jpg|Pink Gerbera
</gallery>
|<Gallery align=center perrow=1 widths=200px>
image:gerbera_pink.jpg|Pink Gerbera
</gallery>
|-
|<Gallery align=center perrow=1 widths=200px>
image:gerbera_pink.jpg|Pink Gerbera
</gallery>
| style="padding:10px;line-height:2em;" align=justify valign=top width=200px|<h3>Heading Goes Here</h3>{{text}} 
|<Gallery align=center perrow=1 widths=200px>
image:gerbera_pink.jpg|Pink Gerbera
</gallery>
|-
|<Gallery align=center perrow=1 widths=200px>
image:gerbera_pink.jpg|Pink Gerbera
</gallery>
|<Gallery align=center perrow=1 widths=200px>
image:gerbera_pink.jpg|Pink Gerbera
</gallery>
|<Gallery align=center perrow=1 widths=200px>
image:gerbera_pink.jpg|Pink Gerbera
</gallery>
|}
<br clear=all>



LinksEdit

Press for Links Box
Related Templates

Work Tools

Making Templates

Text Block Inserts

Top Section Templates

Text Templates

Box Templates

Editing Links

Programming Links

Drop Control Templates

Image Sources

Editing Wikitext/ Pictures



Sub-Page DropEdit

The initial width is determined by aesthetics alone, since ordinary text will wrap.

Module 1: Colourful Sub-page
Coloured Page Layout : the alternative look...
 
L
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
 
L
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
 
L
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
 
L
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
 
L
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
 
L
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
 
L
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
 
L
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Code: Module 1
{{dropimage|align=center|width=600px|Alternative Sub-page Format|
{{fancy3|Coloured Page Layout : | the alternative look...}}
{{block|ff=arial|ta=left|background=lightyellow|[[image:SunFlower1.jpg|130px|left]]{{drop|L}}{{lorem ipsum}} }}
{{block|ff=arial|ta=left|background=rgb(240,240,240)|[[image:gerbera_pink.jpg|120px|right]]{{drop|L}}{{lorem ipsum}} }}
{{block|ff=arial|ta=left|background=papayawhip|[[Image:Hippeastrum flower.jpg|140px|left]]{{drop|L}}{{lorem ipsum}} }}
{{block|ff=arial|ta=left|background=rgb(240,240,240)|[[image:Red_chrysanthemum.jpg|100px|right]]{{drop|L}}{{lorem ipsum}} }}
{{block|ff=arial|ta=left|background=lemonchiffon|[[image:crocus_4.jpg|130px|left]]{{drop|L}}{{lorem ipsum}} }}
{{block|ff=arial|ta=left|background=rgb(240,240,240)|[[image:petunia2.jpg|130px|right]]{{drop|L}}{{lorem ipsum}} }}
{{block|ff=arial|ta=left|background=lavenderblush|[[Image:Marigold top (aka).jpg|130px|left]]{{drop|L}}{{lorem ipsum}} }}
{{block|ff=arial|ta=left|background=rgb(240,240,240)|[[Image:Rose Unknown 100 20070601.jpg|170px|right]]{{drop|L}}{{lorem ipsum}} }}
}}



Top SectionsEdit

These templates will remove any existing Table of Contents and then remake them in-line with the images. To save work use the template Imageontop, or Textontop, unless like this example a links box is needed. In that case use the discrete table code as follows; the two-image result is shown below.

Code: Module 2
Two Image Version
<!--Table for top section of a page-->
<!--Set height of 2 images same and exaggerate widths eg: 900x200px for both--> 
<!--Choose image shape and scaling to suit the space-->
<!--make a table and place at page right--> 
{| align=left style="background:transparent" 
<!--set whole row vertical alignment to top of cells--> 
|- valign=top  
<!--horizontal align TOC, and set cell width--> 
|align=center width=180px| __TOC__{{tocbox|width=150px|align=center|Other pages|[[Editing Wikitext/Pictures/The Quick Course|'''The Quick Course''']]<br>[[Editing Wikitext/Pictures/Tiled Images|'''Tiled Images''']]<br>[[Editing Wikitext/Pictures/Images in Containers|'''Images in Containers''']]}} 
<!--place left image and use template:caption to format caption italic and 0.9em --> 
|[[Image:Coleostephus_February_2008-2.jpg|500x215px]]<br>{{caption|Marigold : | 267x215 pixels}}
<!--place right image and use template:caption to format caption italic and 0.9em --> 
|[[image:Cerasus blossom.jpg|500x215px]]<br>{{caption|Hawthorn Blossom; | 500x215 pixels}}
|}
<br clear=all>

Three Image Version

<!--Table for top section of a page-->
<!--Set height of 3 images same and exaggerate widths eg: 900x200px for both--> 
<!--Choose image shape and scaling to suit the space-->
<!--make a table and place at page right--> 
{| align=right style="background:transparent" 
<!--set whole row vertical alignment to top of cells--> 
|- valign=top  
<!--horizontal align TOC, and set cell width--> 
|align=center width=200px| __TOC__{{tocbox|width=160px|align=center|Other pages|[[Editing Wikitext/Pictures/Tiled Images|Tiled Images]]<br>[[Editing Wikitext/Pictures/Images in Containers|Images in Containers]]}} 
<!--place leftmost image and use template:caption to format caption italic and 0.9em --> 
|[[Image:Lilium longiflorum.jpg|500x215px]]<br>{{caption|Lily : | Longiflorum}}
<!--place middle image and use template:caption to format caption italic and 0.9em --> 
|[[Image:Hyacinthoides_non-scripta_(Common_Bluebell).jpg|500x215px]]<br>{{caption|Bluebell| <noinclude><gallery></gallery></noinclude>}}
<!--place rightmost image and use template:caption to format caption italic and 0.9em --> 
|[[Image:Prettypinkflowersfromuva.jpg|500x215px]]<br>{{caption|Pelargonium : | Geranium}}
|}
<br clear="all" />



Other pages
The Quick Course
Tiled Images
Images in Containers
 

Marigold : 267x215 pixels

  

Hawthorn Blossom; 500x215 pixels




Flower Image SetEdit

These images are selected from the Wiki database's Mayflower Search Engine as being of good quality, and are suitable for illustrations. See The Quick Course for the way to do so. The code to produce the gallery is shown below.

  • High Quality Images of Flowers

  • Magnolia Blossom

  • Alpine Violet

  • Pansy

  • Clematis Josephine

  • Clematis Hybrid

  • Narcissus

  • Camomile

  • Dahlia

  • Snowdrop

  • Tulip

  • Gerbera

  • Gerbera, Big yellow

  • Waterlily

  • Primula

  • Sunflower

  • Hippeastrum

  • Chrysanthemum

  • Crocus

  • Petunia

  • Marigold

  • Oriental Poppy

  • Rose

  • Rose

  • Rose

  • Gazania

  • Chicory

  • Hawthorn

  • Ascocenda Orchid

  • Crocus

  • Daisy

  • Hatiora

  • Coleostephus

  • Almond

  • Magnolia

  • Gazania

  • Helianthus

  • Chrysanthemum

  • Gladiolus

  • Lilium

  • Lilium Longiflorum

  • Bluebell

  • Dahlia

  • Pelargonium

  • Fire Tulips

  • Pink Tulips

  • Pink Magnolia


Code: Module 3; High Qualty Images of Flowers
<!--Code for the second example-->
<!--This version has a few options-->
<gallery  widths="80px" heights="80px" perrow="5" align=center Caption="Good Quality Images">
Image:Pink_Magnolia_Blossom_1847px.jpg|Magnolia Blossom
Image:Alpine Violet Viola labradorica Flower Closeup 1456px.jpg|Alpine Violet
Image:Pansy_Viola_tricolor_Flower_2448px.jpg|Pansy
Image:Clematis Josephine1.jpg|Clematis Josephine
Image:Clematis hybrid3 ies.jpg|Clematis Hybrid
Image:Jonquil flowers06.jpg|Narcissus
Image:Chamomile@original size.jpg|Camomile
Image:2006-10-18Dahlia03m.jpg|Dahlia
Image:Galanthus nivalis close-up aka.jpg|Snowdrop
Image:Tulip - floriade canberra.jpg|Tulip
Image:Gerbera pink.jpg|Gerbera
Image:Big yellow.jpg|Gerbera, ''Big yellow''
Image:Nymphaea tetragona.jpg|Waterlily 
Image:Primula aka.jpg|Primula
Image:SunFlower1.jpg|Sunflower
Image:Hippeastrum flower.jpg|Hippeastrum
Image:Red_chrysanthemum.jpg|Chrysanthemum
Image:crocus_4.jpg|Crocus
Image:petunia2.jpg|Petunia
Image:Marigold top (aka).jpg|Marigold
Image:Oriental poppy.jpg|Oriental Poppy
Image:Rose Unknown 100 20070601.jpg|Rose
Image:Rose Queen Elizabeth 20070601.jpg|Rose
Image:Unidentified_dark_pink_open_rose_blossom.jpg|Rose
Image:Gazania_rigens-1.jpg|Gazania
Image:Cichorium_intybus-alvesgaspar1.jpg|Chicory
Image:Cerasus blossom.jpg|Hawthorn
Image:Ascocenda_Princess_Mikasa_.jpg|Ascocenda Orchid
Image:Krokus-kih.jpg|Crocus
Image:Leucanthemum_vulgare_'Filigran'_Flower_2200px.jpg|Daisy
Image:Hatiora_×graeseri_flower.jpg|Hatiora
Image:Coleostephus_February_2008-2.jpg|Coleostephus
Image:Blossoming almond tree.jpg|Almond
Image:Magnolia_Watsoni.JPG|Magnolia
Image:Flower_jtca001.jpg|Gazania
Image:A_sunflower.jpg|Helianthus
Image:Chrysanthemum morifolium November 2007 Osaka Japan.jpg|Chrysanthemum
Image:Gladiolus 7-19-06.JPG|Gladiolus
Image:Smithsoniangardens1.jpg|Lilium
Image:Lilium longiflorum.jpg|Lilium Longiflorum
Image:Hyacinthoides_non-scripta_(Common_Bluebell).jpg|Bluebell
Image:Dahlia."Davids Choice".7404.jpg|Dahlia
Image:Prettypinkflowersfromuva.jpg|Pelargonium
Image:Fire tulip.jpg|Fire Tulips
Image:チューリップTulip1.JPG|Pink Tulips
</gallery>
Image Code to Try
Ready-to-use Image Code : the flowers set...


This list contains a selection of ready-made flower image formats. These make thumbnail images with a base dimension of 250 pixels, have a border on them and a caption. They are located by default on the right of the page, though an extra option can be added to specify left, right, or center.

Copy individual image lines into the Sandbox or directly into your work to experiment with their formats. Satisfy yourself as to the copyright conditions on the individual image pages when planning their use. For an overview of how to use images, read The Quick Course, and the other pages in the Editing Wikitext/Pictures series. 

[[Image:Pink_Magnolia_Blossom_1847px.jpg|250px||thumb|Magnolia Blossom]]

[[Image:Alpine Violet Viola labradorica Flower Closeup 1456px.jpg|250px|thumb|Alpine Violet]]

[[Image:Pansy_Viola_tricolor_Flower_2448px.jpg|250px|thumb|Pansy]]

[[Image:Clematis Josephine1.jpg|Clematis Josephine|250px|thumb|Clematis]]

[[Image:Clematis hybrid3 ies.jpg|Clematis Hybrid|250px|thumb|Clematis]]

[[Image:Jonquil flowers06.jpg|250px|thumb|Narcissus]]

[[Image:Chamomile@original size.jpg|250px|thumb|Camomile]]

[[Image:2006-10-18Dahlia03m.jpg|250px|thumb|Dahlia]]

[[Image:Galanthus nivalis close-up aka.jpg|250px|250px|thumb|Snowdrop]]

[[Image:Tulip - floriade canberra.jpg|250px|250px|thumb|Tulip]]

[[Image:Gerbera pink.jpg|250px|thumb|Gerbera]]

[[Image:Big yellow.jpg|250px|thumb|Gerbera, ''Big yellow'']]

[[Image:Nymphaea tetragona.jpg|250px|thumb|Waterlily]] 

[[Image:Primula aka.jpg|250px|thumb|Primula]]

[[Image:SunFlower1.jpg|250px|thumb|Sunflower]]

[[Image:Hippeastrum flower.jpg|250px|thumb|Hippeastrum]]

[[Image:Red_chrysanthemum.jpg|250px|thumb|Chrysanthemum]]

[[Image:crocus_4.jpg|250px|thumb|Crocus]]

[[Image:petunia2.jpg|250px|thumb|Petunia]]

[[Image:Marigold top (aka).jpg|250px|thumb|Marigold]]

[[Image:Oriental poppy.jpg|250px|thumb|Oriental Poppy]]

[[Image:Rose Unknown 100 20070601.jpg|250px|thumb|Rose]]

[[Image:Gazania_rigens-1.jpg|250px|thumb|Gazania]]

[[Image:Cichorium_intybus-alvesgaspar1.jpg|250px|thumb|Chicory]]

[[Image:Cerasus blossom.jpg|250px|thumb|Hawthorn]]

[[Image:Ascocenda_Princess_Mikasa_.jpg|250px|thumb|Ascocenda Orchid]]

[[Image:Krokus-kih.jpg|250px|thumb|Crocus]]

[[Image:Leucanthemum_vulgare_'Filigran'_Flower_2200px.jpg|250px|thumb|Daisy]]

[[Image:Hatiora_×graeseri_flower.jpg|250px|thumb|Hatiora]]

[[Image:Coleostephus_February_2008-2.jpg|250px|thumb|Coleostephus]]

[[Image:Blossoming almond tree.jpg|250px|thumb|Almond]]

[[Image:Magnolia_wieseneri.jpg|250px|thumb|Magnolia]]

[[Image:Rose Unknown 100 20070601.jpg|250px|thumb|Rose]]

[[Image:Rose Queen Elizabeth 20070601.jpg|250px|thumb|Rose]]

[[Image:Unidentified_dark_pink_open_rose_blossom.jpg|250px|thumb|Rose]]

[[Image:Flower_jtca001.jpg|250px|thumb|Gazania]]

[[Image:A_sunflower.jpg|250px|thumb|Helianthus]]

[[Image:Chrysanthemum morifolium November 2007 Osaka Japan.jpg|250px|thumb|Chrysanthemum]]

[[Image:Gladiolus 7-19-06.JPG|250px|thumb|Gladiolus]]

[[Image:Smithsoniangardens1.jpg|250px|thumb|Lilium]]

[[Image:Lilium longiflorum.jpg|250px|thumb|Lilium Longiflorum]]

[[Image:Hyacinthoides_non-scripta_(Common_Bluebell).jpg|250px|thumb|Bluebell]]

[[Image:Prettypinkflowersfromuva.jpg|250px|thumb|Pelargonium]]

[[Image:Fire tulip.jpg|250px|thumb|Fire Tulips]]

[[Image:チューリップTulip1.JPG|250px|thumb|Pink Tulips]]



Structures in LineEdit

Multiple structures can be placed in-line, but because some browsers differ, images should be kept clear of the middle position. The following line-up works with all three of the Internet Explorer, Firefox, and Opera browsers, though even slight changes can spoil the rendering. (IE6 lowers middle images; Firefox shifts centered galleries to the left). The code can be found in the drop-down box.

  • Gallery Example

  • Narcissus

  • Camomile

 
Best Keep Images Away from Center
Test Heading Test Test Test
Test Test Test Test
Test Test Test Test
Test Test Test Test
Multi-structure Line-up Code
<!--Code for the gallery-->
<gallery  perrow="2" align="left" widths=77px heights=77px Caption="Gallery Example">
Image:Jonquil flowers06.jpg|Narcissus
Image:Chamomile@original size.jpg|Camomile
</gallery> <!--Code for the first example-->
[[image:gerbera_pink.jpg|right|250px]]
{| border=1 align="center" width=250px
|+''Best Keep Images Away from Center''
!Test Heading!!Test!!Test!!Test
|-
|'''Test'''||Test||Test||Test
|-
|'''Test'''||Test||Test||Test
|-
|'''Test'''||Test||Test||Test
|}


Drop with Table CodeEdit

Table Style Rules
Commonly used style rules for markup tables :

 

There are two different sets of syle rules in use; a set of HTML attributes which are associated with specific element tags, and CSS, (cascading style sheet) , properties. A short list of each is given for quick reference. These listings are by no means complete, but a link is provided at the bottom of this list for the full CSS properties reference.


HTML Attributes for Tables; use the format;

attribute1=value1 attribute2=value2 attributeN=valueN 

 
Example               Values                     Element*   Purpose 

align=left**          left,right,center,justify  T, R, C    positions table or text**            
valign=top****        top, middle, bottom        R, C       vertical alignment of TEXT

border=1              0 for none, 1-7            T          all borders at once
cellpadding=5px       0 for none, px, pt, em     T          padding for all cell text
cellspacing=5px       0 for none, px, pt, em     T          around all cells 

height=100px***       px, pt, cm, em, %          C          cell height

width=200px***        px, pt, cm, em, %          T, C       table or cell width

colspan="2"           number of columns.         C          joins cells rightwards 
rowspan="2"           number of rows.            C          joins cells downwards

*    T=Table, R=Rows, C=Cells of any kind
**   Align in cells applies horizontal text-alignment.
***  If not specified, the dimensions will adjust to the text.
**** If not specified, the default is middle


CSS Style Rules; use the format;

style="property1:value1; property2:value2; propertyN:valueN;" 

Example               Values                     Elements*    Purpose 

caption-side:top      top,right,bottom,left      T           only some browsers
text-align:right      left,right,center,justify  T, R, C     horizontal alignment of text
vertical-align:top    top, middle, bottom        C           Vertical align text or image

background:yellow     name, rgb, hex             T, R, C     background color
color:blue            name, rgb, hex             T, R, C     text color

font-family:arial     font or generic name       T, R, C     font or font-list      
font-size:20pt        px, pt, cm, em             T, R, C     text size
font-style:italic     italic, normal             T, R, C     text style
font-weight:bold      bold, normal               T, R, C     text weight

padding:5px 0 0 0     px, pt, cm, em             T, C        sequence top,right,bottom,left
margin:0 0 5px 0      px, pt, cm, em             T           sequence top,right,bottom,left
border:2px solid red* thickness style color      T, C        border on all four sides
border-collapse:      separate or collapse       T           cellspacing or not
border-spacing:       px, pt, cm, em             T           cellspacing when separate 

table-layout:fixed    auto or fixed              T           expands with text or not  
width:400px           px, pt, cm, em  %          T, C        sets table or cell width 
height:200px          px, pt, cm, em  %          T, C        sets table or cell height 

line-height:2em       px, pt, cm, em             T, R, C     height between text lines
letter-spacing:5px    px, pt, cm, em             T, R, C     space between text characters
word-spacing:10px     px, pt, cm, em             T, R, C     space between words of text

white-space:pre-wrap                             T           long line text wrapping,(soon)

* Separate border properties also exist; border-top,border-right,border-bottom, and border-left.
**   T=Table, R=Rows, C=Cells of any kind


Style Expression Spacing Rules for WIKITEXT

Main Points to Avoid

  • Line breaks are not permitted within style expressions.
  • Spaces are not permitted immediately before colons and semi-colons.

These have Latitude

  • Space between the various table symbols and the word style is OK.
  • Space around any equals symbol is OK.
  • Space between the style rules and their outside parentheses is OK.
  • Spaces after colons and semi-colons are OK.
  • A semi-colon can be placed immediately after the last style rule.

In addition

  • Compound values like '2px solid black' must be space-separated.
  • Legacy styles must be separated from CSS style expressions with space.
  • HTML element spacing is itself tolerant.
  • Wikitext tables can be indented for clarity.


Combining the two style rule methods:

It is possible to mix the attributes with CSS styles provided that they keep to their own local formats. That is to say; nothing with an equals sign between the quotes, and no CSS rules outside of them. Note that the Wiki apostrophe codes and various HTML codes can still be used for cell and other text. An example of mixed styles is shown below. 

{| border=1 width=300px style="background:lightyellow;color:maroon;"
| height=100px| ''First'' cell
| style="background:black;color:white;" width=200px align=center|''Second'' cell
|}
;


Refer to CSS Reference List for more detailed descriptions of properties and values.



The Template Version TablestylesEdit

CSS Properties Summary
Commonly used style rules for Wiki markup tables :

 

There are two different sets of style rules in use; a set of HTML attributes that is associated with the specific elements in tables, and a Cascading Style Sheet set, CSS properties, that is of more general use.

Each of table, caption, row, and cell can be considered as separate elements in the more general building of tables. In each case where an attribute refers to the same format as a CSS property at the same level of the same element, the CSS property takes priority.

A short list of each style-set is given for quick reference though these listings are by no means complete. A link has been provided at the bottom of this drop-list for a full CSS properties reference.


HTML Attributes for Tables; use the format;

attribute1=value1 attribute2=value2 attributeN=valueN 

 
Example               Values                     Element*   Purpose 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

align=left**          left,right,center,         T, R, C    positions table or text**            
                      (plus justify for text)               in immediate container 

valign=top****        top, middle, bottom        R, C       vertical alignment of TEXT

border=1*****         0 for none, 1-7            T          all borders at once

cellpadding=5px       0 for none, px, pt, em     T          padding for all cell text
                                                            with one entry      

cellspacing=5px****** 0 for none, px, pt, em     T          between all table cells 
                                                            with one entry 

height=100px***       px, pt, cm, em, %          C          cell height, though likely
                                                            to increase with contents     

width=200px***        px, pt, cm, em, %          T, C       table or cell width

colspan="2"           number of columns.         C          joins cells rightward 

rowspan="2"           number of rows.            C          joins cells downward

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
*      T=Table, R=Rows, C=Cells of any kind
**     Align in cells applies horizontal text-alignment.
***    If not specified, the dimensions will adjust to the text.
****   If not specified, the default is middle
*****  Do not use border spacing styles with this attribute; only ''cellspacing''.
****** Do not use border styles with this attribute; only the ''border'' attribute.


CSS Style Rules; use the format;

style="property1:value1; property2:value2; propertyN:valueN;" 

Example                   Values                     Elements**    Purpose 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

caption-side:top          top,right,bottom,          T           only some browsers
                          and left

text-align:right          left,right,center,         T, R, C     horizontal alignment of text
                          and justify 

vertical-align:top        top, middle, bottom        C           Vertical-align text or image

background:yellow         name, rgb, hex,            T, R, C     background color
                          and transparent

color:blue                name, rgb, hex             T, R, C     text color

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

font-family:arial         font or family name        T, R, C     font or font-list      

font-size:20pt            px, pt, cm, em, %          T, R, C     text size

font-style:italic         italic, normal             T, R, C     text style

font-weight:bold          bold, normal               T, R, C     text weight

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

padding:5px 0 0 0         px, pt, cm, em             T, C        sequence top,right,bottom,left

margin:0 0 5px 0          px, pt, cm, em, %          T           sequence top,right,bottom,left

border:2px solid red*     width, type, color         T, C        border on all four sides

border-collapse:          separate or collapse       T           cell spacing or not

border-spacing:10px       px, pt, cm, em             T           cell spacing all-round

border-spacing:7px 5px    px, pt, cm, em             T           in form horizontal vertical 

table-layout:fixed        auto or fixed              T           expands with text or not  

width:400px               px, pt, cm, em  %          T, C        sets table or cell width 

height:200px              px, pt, cm, em  %          T, C        sets table or cell height 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

line-height:2em***        px, pt, cm, em             T, R, C     height between text lines

letter-spacing:5px        px, pt, cm, em             T, R, C     space between text characters

word-spacing:10px         px, pt, cm, em             T, R, C     space between words of text

white-space:pre-wrap      browser issues             T           long line text wrapping,(soon)

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

* Separate border properties also exist; border-top,border-right,border-bottom, and border-left.
**   T=Table, R=Rows, C=Cells of any kind
***    Line-height applies only to Block Level Elements; e.g. <blockquote>, <center>,<div>,
      <h1-h6>, <hr>, <ol>, <p>, <pre>, <table>, and <ul>.  Line-height fails within a <span>.


Style Expression Spacing Rules for WIKITEXT

Main Points to Avoid

  • Line breaks are not permitted within style expressions. Let the software do the wrapping.
  • Spaces are not permitted immediately before colons or semi-colons.

These have Latitude

  • Space between the various table symbols and the word style is OK.
  • Space around any equals symbol is OK.
  • Space between the style rules and their outside parentheses is OK.
  • Spaces after colons and semi-colons are OK.
  • A semi-colon can be placed immediately after the last style rule.

In addition

  • Compound values like '2px solid black' must be space-separated.
  • HTML attributes must be separated from CSS style expressions with space.
  • HTML element line-spacing is permitted but not for Wikitext elements.
  • Wikitext and HTML table elements can be indented for clarity.
  • Long lines in code LISTINGS can wrap only if there are some spaces added.


Combining the two style rule methods:

It is possible to mix the attributes with CSS styles provided that they keep to their own local formats. That is to say; nothing with an equals sign between the quotes, and no CSS rules outside of them. Note that the Wiki apostrophe codes and various HTML tags can still be used directly on text. An example of mixed styles is shown below. 

{| border=1 width=300px style="background:lightyellow;color:maroon;"
| height=100px| <u>''First''</u> cell
| style="background:black;color:white;" width=200px align=center|''Second'' cell
|}


Priorities for Inline Styles.

When there is a contest at the same level between an attribute and a style, the style will have priority.

When two similar properties exist in a style expression, each having a different value, the second value will be taken.

When there are two entire style expressions in the same table line, the second is ignored. The same situation applies for two similar attributes in a line; the second is ignored.



Refer to CSS Reference List for more detailed descriptions of properties and values.



Armchair, your guidance is marvellous!Edit

A short note to say how very much I have appreciated the thoroughness and helpfulness of your guidance on putting Wikitext images in containers. You have gone to great lengths to explain to Wikipedians who (like me) while not beginners, are not sufficiently proficient in coding to be successful in achieving results on our own. Thank you very much for extending my knowledge and giving me a sense of real achievement without first suffering angst! Best wishes, SCHolar44 (discuss • contribs) 09:33, 31 August 2019 (UTC)

Retrieved from "https://en.wikibooks.org/w/index.php?title=User:Armchair&oldid=3566208"