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:
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:
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:
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.
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:
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 bothborder-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.
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:
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.
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.
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>
}}
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.
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" />
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.
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.
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
|}
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.
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
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.
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.
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.
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
mix-blend-mode:multiply mode T blend mode
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
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.
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.
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)
.jpg)
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
.jpg)
Narcissus
Camomile
