From WikiHealth
Help:Formatting
Toolbar
The toobar above the edit window inserts commonly used markup code into the edit window at the current position of the cursor.
- Desc: Inserts a description box at the top of the FAQ.
<div class="faq_desc"> '''<u>Description</u>'''<br>Type description here</div>. Replace 'Type description here' with a brief description of the focus of your article, or highlight the description text before you push the button.
- B: Inserts Bold text.
'''Bold text''' Replace 'bold text' with the text you want bolded or highlight the text before you push the button.
- I: Insert Italic text.
''Italic text'' Replace 'Italic text' with the text you want italiced or highlight the text before you push the button.
- AB: Insert an internal link.
[[Page Title | link text]] 'Page title' is the name of a WikiHealth page and 'link text' is the text printed in the article.
- (globe): An external link. A link to a site outside wikihealth.
[http://www.example.com link title] Note that there is no | between the link address and the link text.
- A: Insert a Top level Headline.
== Headline text ==
- (Image): Insert an image.
[[Image:Example.jpg]] Images have to be uploaded to WikiHealth before they can be included. (As of this writing the upload image function is disabled due to security concerns.)
- Nowiki: Suppress wiki markup.
<nowiki>Insert non-formatted text here</nowiki>
- Signature: Insert your signature. Very usefull when working with 'Talk' pages.
- Line: Insert a horizontal dividing line.
Bullets, Numbering & Lists
| What it looks like
|
What you type
|
- Bullet points are easy to do:
- Start every line with a star.
- More stars means deeper levels.
marks the end of a list item.
- An empty line starts a new list.
|
* Lists are easy to do:
** Start every line with a star.
*** More stars means deeper levels.
**** A newline in a list
marks the end of a list item.
* An empty line starts a new list.
|
- Numbered lists are also good
- very organized
- easy to follow
- easier still
|
# Numbered lists are also good
## very organized
## easy to follow
### easier still
|
- You can even do mixed lists
- and nest them
|
* You can even do mixed lists
*# and nest them
*#* like this
|
- Definition list
- list of definitions : list of definitions
- item
- the item's definition
- another item
- the other item's definition
- One item per line; a newline can appear before the colon, but using a space before the colon improves parsing.
|
; Definition list
: list of definitions
: list of definitions
; item : the item's definition
; another item
: the other item's definition
|
|
|
Sections, Paragraphs, Line Breaks
| What it looks like
|
What you type
|
|
Start your sections as follows:
New section
Subsection
Question
- Start with a second-level heading (==); do not use first-level headings (=).
- Do not skip levels (e.g., second-level followed by fourth-level).
- A Table of Contents will automatically be added to an article that has four or more sections.
|
==New section==
===Subsection===
====Sub-subsection====
|
|
A single newline
generally has no effect on the layout.
These can be used to separate
sentences within a paragraph.
But an empty line
starts a new paragraph.
- When used in a list, a newline does affect the layout (see below).
|
A single ''newline''
generally has
no effect on the layout.
These can be used to separate
sentences within a paragraph.
But an empty line
starts a new paragraph.
|
|
You can break lines
without starting a new paragraph.
|
You can break lines<br>
without starting a new paragraph.
|
|
|
- A colon indents a line or paragraph.
A manual newline starts a new paragraph.
- This is primarily for displayed material, but is also used for discussion on Talk pages.
|
: A colon indents a line or
paragraph.
A manual newline starts a new
paragraph.
|
IF a line starts with a space
THEN it will be formatted
exactly as typed;
in a fixed-width font;
lines won't wrap;
ENDIF
|
IF a line starts with a space
THEN it will be formatted
exactly as typed;
in a fixed-width font;
lines won't wrap;
ENDIF
|
|
Centered text.
|
<center>Centered text.</center>
|
|
A horizontal dividing line:
this is above it
and this is below it.
|
A ''''horizontal dividing line'''':
this is above it
----
and this is below it.
|
Links and URLs
| What it looks like
|
What you type
|
|
WikiHealth has a Main Page.
- A link to another article.
- Internally, the first letter of the target page is automatically capitalized and spaces are represented as underscores (typing an underscore in the link has the same effect as typing a space, but is not recommended).
- Thus the link above is to the URL http://www.wikihealth.com/Main Page, which is the Main Page of WikiHealth.com
|
WikiHealth has a [[Main Page]].
|
|
This site has a WikiHealth Main Page.
- Same target, different name.
- This is a piped link.
|
This site has a
[[main page | WikiHealth Main Page]].
|
|
Economics#See also is a link
to a section within another page.
#Links and URLs is a link
to a section on the current page.
#example is a link to an
anchor that was created using
an id attribute
- The part after the number sign (#) must match a section heading on the page. Matches must be exact in terms of spelling, case and punctuation. Links to non-existent sections aren't broken; they are treated as links to the top of the page.
- Identifiers may be created by attaching an
id="..."> attribute to almost any HTML element.
|
[[Economics#See also]] is a link
to a section within another page.
[[#Links and URLs]] is a link
to a section on the current page.
[[#example]] is a link to an
anchor that was created using
<div id="example">an
id attribute</div>
|
|
Random Article is a page
that doesn't exist yet.
- You can create it by clicking on the link (but please don't do so with this particular link).
- To create a new page:
- Create a link to it on some other (related) page.
- Save that page.
- Click on the link you just made. The new page will open for editing.
- For more information, see Starting a new page and check out WikiHealth's title advice.
|
[[Random Article]] is a page
that doesn't exist yet.
|
|
When adding a comment to a Talk page,
you should sign it by adding
three tildes to add your user name:
- WikiHealth Admin
or four to add user name plus date/time:
- WikiHealth Admin 00:18, Nov 19, 2004
Five tildes gives the date/time alone:
- 00:18, Nov 19, 2004
- The first two both provide a link to your user page.
|
When adding a comment to a
Talk page, you should sign it
by adding three tildes to add
your user name:
: ~~~
or four for name plus date/time:
: ~~~~
Five gives the date/time alone:
: ~~~~~
|
|
A user's Contributions page can be linked as:
Special:Contributions/UserName
or
Special:Contributions/192.0.2.0
|
A user's '''Contributions'''
page can be linked as:
[[Special:Contributions/UserName]]
or
[[Special:Contributions/192.0.2.0]]
|
- To put an article in a category, place a link like the one to the right anywhere in the article. It does not matter where you put these links while editing as they will always show up in the same place when you save the page, but placement at the end of the edit box is recommended.
|
[[Category:Electronics]]
|
- To link to a category page without putting the article into the category, use an initial colon (:) in the link.
|
[[:Category:Character sets]]
|
|
Two ways to link to external (non-wiki) sources:
- Bare URL: http://www.nupedia.com/ (bad style)
- Named link: Nupedia
- Square brackets indicate an external link. Note the use of a space (not a pipe) to separate the URL from the link text in the "named" version.
- In the URL, all symbols must be among:
A-Z a-z 0-9 . _ \ / ~ % - + & # ? ! = ( ) @ \x80-\xFF
- If a URL contains a character not in this list, it should be encoded by using a percent sign (%) followed by the hex code of the character, which can be found in the table of ASCII printable characters. For example, the caret character (^) would be encoded in a URL as %5E.
|
Two ways to link to external
(non-wiki) sources:
# Bare URL:
: http://www.nupedia.com/
# Named link:
: [http://www.nupedia.com Nupedia]
|
|
Sound
- To include links to non-image uploads such as sounds, use a "media" link. For images, see next section.
Some uploaded sounds are listed at Wikipedia:Sound.
|
[[media:Sg_mrob.ogg|Sound]]
|
Character Formatting
DescriptionNote: For basic Character Formatting, you can also use the Toolbar at the top of every edit page, or visit the Toolbar Help section for more information.
| What it looks like
|
What you type
|
|
italics, bold, bold italics.
- These are double, triple, and quintuple apostrophes (single-quote marks), not double-quote marks.
|
''italics'',
'''bold''',
'''''bold italics'''''.
|
|
A typewriter font for monospace text
or for computer code: int main()
- For semantic reasons, using
<code> where applicable is preferable to using <tt>.
|
A typewriter font for
<tt>monospace text</tt>
or for computer code:
<code>int main()</code>
|
|
You can use small text for captions.
|
You can use
<small>small text</small>
for captions.
|
|
You can strike out deleted material
and underline new material.
You can also mark deleted material and
inserted material using logical markup
rather than visual markup.
- When editing regular Wikipedia articles, just make your changes and don't mark them up in any special way.
- When editing your own previous remarks in talk pages, it is sometimes appropriate to mark up deleted or inserted material.
|
You can
<s>strike out deleted material</s>
and
<u>underline new material</u>.
You can also mark
<del>deleted material</del>
and
<ins>inserted material</ins>
using logical markup
rather than visual markup.
|
|
Punctuation:
¿ ¡ § ¶
† ‡ •
– —
‹ › « »
‘ ’ “ ”
|
¿ ¡ § ¶
† ‡ •
– —
‹ › « »
‘ ’ “ ”
|
|
Commercial symbols:
™ © ®
¢ € ¥
£ ¤
|
™ © ®
¢ € ¥
£ ¤
|
|
Arrows:
Make a right arrow: →
Make a left arrow: ←
|
Make a right arrow: →
Make a left arrow: ←
|
|
Suppressing interpretation of markup:
Link → (''to'') the [[Wikipedia FAQ]]
- Used to show literal data that would otherwise have special meaning.
- Escape all wiki markup, including that which looks like HTML tags.
- Does not escape HTML character references.
- To escape HTML character references such as → use &rarr;
|
<nowiki>Link → (''to'')
the [[Wikipedia FAQ]]</nowiki>
|
|
Commenting page source:
not shown when viewing page
- Used to leave comments in a page for future editors.
- Note that most comments should go on the appropriate Talk page.
|
<!-- comment here -->
|
Tables & Boxes
Table is a HTML tag for creating boxes on web pages and to display data in those boxes.
- Template:XMLElement
table { display: table }
- Creates a table
- Template:XMLElement
caption { display: table-caption }
- Specifies a caption for the entire table.
- Template:XMLElement
colgroup { display: table-column-group }
- Specifies a column group in a table.
- Template:XMLElement
- col { display: table-column }
- Specifies attributes for an entire column in a table.
- Template:XMLElement
thead { display: table-header-group }
- Specifies the header part of a table. This section may be repeated by the user agent if the table is split across pages (in printing or other paged media).
- Template:XMLElement
tfoot { display: table-footer-group }
- Specifies the footer part of a table. Like
<thead>, this section may be repeated by the user agent if the table is split across pages (in printing or other paged media)
- Template:XMLElement
tbody { display: table-row-group }
- Specifies the main part of a table.
- Template:XMLElement
tr { display: table-row }
- Creates a row in the table.
- Template:XMLElement
- th { display: table-cell }
- Creates a table header cell within a row; contents are conventionally displayed bold and centered. An aural user agent may use a louder voice for these items.
- Template:XMLElement
- td { display: table-cell }
- Creates a table data cell within a row.
Template:Html series
TABLE
HTML table : <table> ... </table>
HTML table : <table params> ... </table>
CSS : TABLE { display: table }
TABLE tag can have following parameters (params): border, frame, rules, width, cellspacing, cellpadding, bgcolor, v-space, h-space, bordercolor, datapagesize, datasrc, clear, noflow, colspec, units, dp, background, summary, align, style, lang, dir, title, id, class.
CSS ( border-collapse: collapse | separate | inherit ; ).
CSS ( empty-cells: show | hide | inherit ; ).
CSS ( border-style: double | solid | dashed | dotted |
- ridge | outset | groove | inset | hidden | none ; ).
CSS ( table-layout : auto | fixed | inherit ; ).
HTML ( border = pixels ).
CSS ( border-width: multi-length ; ) (pixels).
- (border-top-width, border-right-width, border-bottom-width, border-left-width).
HTML ( width = multi-length ).
- (standard pixel, percentage, relative values, "0*"(zero asterisk)) ).
HTML ( rules = none | groups | rows | cols | all ).
HTML ( frame = void|above|below|hsides|lhs|rhs|vsides|box|border ).
HTML ( align=left|center|right ) (Deprecated, Use CSS).
HTML ( cellspacing = length ).
CSS ( border-spacing: multi-length | horizontal_length vertical_length; ).
HTML ( cellpadding = length ).
CSS ( padding: multi-length; ).
HTML ( dir ).
CSS ( direction: ltr | rtl ; ).
CSS ( unicode-bidi: normal | embed | bidi-override ; ).
HTML ( bordercolor = "#rrggbb" | "colorname" ).
- (Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, Yellow, White). For more, see Web colors.
CSS ( border-color: "#rrggbb" | "colorname"; ).
- (border-top-color, border-right-color, border-bottom-color, border-left-color).
CSS ( margin: multi-length; ).
CSS ( visibility: visible | hidden | collapse | inherit ; ).
CSS ( display: inline | block | list-item | run-in | inline-block |
- table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit | marker | compact | ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container ; ).
Simple Table
|
A simple table is displayed at right side:
|
| Header Cell: Column 1 | Header Cell: Column 2 |
| Data Cell: Row2 Column1 | Data Cell: Row2 Column2 |
| Data Cell: Row3 Column1 | Data Cell: Row3 Column2 |
|
|
HTML code:
|
<table>
<tr>
<th> Header Cell: Column 1 </th> <th> Header Cell: Column 2 </th>
</tr>
<tr>
<td> Data Cell: Row2 Column1 </td> <td> Data Cell: Row2 Column2 </td>
</tr>
<tr>
<td> Data Cell: Row3 Column1 </td> <td> Data Cell: Row3 Column1 </td>
</tr>
</table>
|
|
|
|
Wiki code:
|
{| border="1"
! Header Cell: Column 1 !! Header Cell: Column 2
|-
| Data Cell: Row2 Column1 || Data Cell: Row2 Column1
|-
| Data Cell: Row3 Column1 || Data Cell: Row3 Column1
|}
|
|
Note: To display | (pipe symbol), < (less than sign), ! (exclamation mark), { (beginning second/curly bracket) in wiki table, you should use following HTML decimal or entity codes: | (|), < (< or <), ! (!), { ({), } (}). For more, see Windows Alt keycodes.
|
CAPTION
Table caption is a title of the table.
HTML : <caption> ... </caption>
HTML : <caption params> ... </caption>
CSS : CAPTION { display: table-caption }
CAPTION tag can have "align" (HTML)(Deprecated) parameter, and/or "caption-side" css/stylesheet property. Other parameters (params) it can have are class, id, title, lang, dir.
HTML : ( align = "top | bottom | left | right" ).
CSS : ( caption-side: top | bottom | left | right | inherit ; ).
By default, caption uses align="top".
|
In the rightside table, the texts "Caption at bottom" are displaying a bottom side caption.
|
Caption at bottom
| Data-Type-1 | Data-Type-2 |
| Data-1a | Data-2x |
| Data-1b | Data-2y |
|
|
HTML code:
|
<table>
<caption align="bottom" style="caption-side: bottom"> <b> Caption at bottom </b> </caption>
<tr>
<th> Data-Type-1 </th> <th> Data-Type-2 </th>
</tr>
<tr>
<td> Data-1a </td> <td> Data-2a </td>
</tr>
<tr>
<td> Data-1b </td> <td> Data-2b </td>
</tr>
</table>
|
| Note: caption is using both HTML and stylesheet parameter. HTML parameter (align) is included for compatibility with IE (~v6.0) or similar web browser software, which doesn't support the stylesheet property yet (June, 2006). Future browsers will probably recognize only the stylesheet property instead of the HTML parameter.
|
|
Wiki code:
|
{| border="1"
|+ align="bottom" style="caption-side: bottom" | '''Caption at bottom'''
! Data-Type-1 !! Data-Type-2
|-
| Data-1a || Data-2a
|-
| Data-1b || Data-2b
|}
|
COLGROUP, COL
Table column groups and columns : colgroup, col, colgroup col.
HTML : <colgroup> ... </colgroup>
CSS : COLGROUP { display: table-column-group }
HTML : <colgroup params> ... </colgroup>
HTML : <col>
CSS : COL { display: table-column }
HTML : <col params>
HTML : <col />
HTML : <col params />
HTML : <colgroup> <col /> ... </colgroup>
HTML : <colgroup params> <col params /> ... </colgroup>
colgroup & col can have following parameters (params): span, width, align, char, charoff, valign, style, lang, dir, title, id, class.
HTML ( span = column_numbers ).
HTML ( align = " left | center | right | justify | char " ).
See TBODY for examples.
THEAD
See TBODY.
See TBODY.
TBODY
Table rowgroups : thead, tfoot, tbody.
HTML : <thead> ... </thead>
HTML : <tfoot> ... </tfoot>
HTML : <tbody> ... </tbody>
CSS : THEAD { display: table-header-group }
CSS : TFOOT { display: table-footer-group }
CSS : TBODY { display: table-row-group }
These three tags can have following parameters (params): align, char, charoff, valign, style, lang, dir, title, id, class. "tfoot" tag must appear before tbody for browser soft to know where to render/place it.
HTML ( align = " left | center | right | justify | char " ).
CSS ( text-align: left | right | center ; ).
HTML ( valign = " top | middle | bottom | baseline " ).
CSS ( vertical-align: top | middle | bottom | baseline ; ).
HTML ( char = character ).
HTML ( charoff = length ).
Column and Row groups
When large numbers of items or objects are needed to be displayed on the web page (or pages) with various associated or related data next to the item or object, then grouping is necessary. Data grouping identifies, differentiates and displays each item and related data in a easy understandable way, by using different color, or, boxes with different border width, etc.
Column and Row groups for cross browsers
|
Below table uses the colgroup, col, thead, tfoot, tbody, (tr, th, td) HTML tags with the following (HTML) parameters and (CSS) properties: border-collapse, border, border-top, border-right, border-bottom, border-left, cellspacing, border-spacing, cellpadding, padding, cols, rules, colspan, rowspan, etc.
|
|
|
File:Table-sample-collapse-colgroup-col-border-01.png
|
|
To display the above table (Unicode Number Forms Character List) with similar border width appearance in the Firefox (FF), Internet Explorer (IE), etc web browsers, which uses different rendering engines, below codes needs to be implemented, which are using functionally redundant HTML tags and parameters (and/or CSS properties) to bring the table appearance almost same across different browsers. Parameter scope is not a must required for same appearance, it is useful mostly for the speech processor.
|
|
HTML code:
|
<table border="3" cellspacing="0" cellpadding="2" cols="5"
rules="all" style="text-align: center; font-size: 85%; border-spacing: 0px;
border-collapse: collapse; padding: 2px; border: 3px solid;">
<colgroup align="center" style="border: 3px solid; padding: 2px;">
<col width="0*" style="border-left: 3px solid;
border-right: 1px solid; padding: 2px;" />
<col style="border-left: 1px solid;
border-right: 3px solid; padding: 2px;" />
</colgroup>
<colgroup align="center" style="border: 3px solid; padding: 2px;">
<col width="0*" style="border-left: 3px solid;
border-right: 1px solid; padding: 2px;" />
<col style="border-left: 1px solid;
border-right: 3px solid; padding: 2px;" />
</colgroup>
<col align="center" width="0*" style="border: 3px solid; padding: 2px;" />
<caption> <b> Unicode (ISO 10646) Character List - "Number Forms" Block (Partial) </b> </caption>
<thead style="border: 3px solid;">
<tr>
<th colspan="2" scope="colgroup" style="border: 3px solid;"> 2150 </th>
<th colspan="2" scope="colgroup" style="border: 3px solid;"> 2160 </th>
<th scope="col" style="border: 3px solid;"> </th>
</tr>
</thead>
<thead style="border: 3px solid;">
<tr>
<th scope="col"> <small> Symbol </small> </th>
<th rowspan="2" scope="col" style="border-right: 3px solid;"> Name </th>
<th scope="col"> <small> Symbol </small> </th>
<th rowspan="2" scope="col" style="border-right: 3px solid;"> Name </th>
<th rowspan="3" scope="col" style="border: 3px solid;">
<small><small> Last Hex# </small></small> </th>
</tr>
<tr> <th> Hex </th> <th> Hex </th> </tr>
<tr>
<th colspan="2" style="border-bottom: 3px solid;
border-right: 3px solid;">
<small> Symbol's Picture </small> </th>
<th colspan="2" style="border-bottom: 3px solid;
border-right: 3px solid;">
<small> Symbol's Picture </small> </th>
</tr>
</thead>
<tfoot style="border: 3px solid;">
<tr>
<th> <small> Symbol </small> </th>
<th rowspan="2" style="border-right: 3px solid;"> Name </th>
<th> <small> Symbol </small> </th>
<th rowspan="2" style="border-right: 3px solid;"> Name </th>
<th rowspan="3" style="border: 3px solid;">
<small><small> Last Hex# </small></small> </th>
</tr>
<tr> <th> Hex </th> <th> Hex </th> </tr>
<tr>
<th colspan="2" style="border-bottom: 3px solid;
border-right: 3px solid;">
<small> Symbol's Picture </small> </th>
<th colspan="2" style="border-bottom: 3px solid;
border-right: 3px solid;">
<small> Symbol's Picture </small> </th>
</tr>
<tr>
<th colspan="2" style="border: 3px solid;"> 2150 </th>
<th colspan="2" style="border: 3px solid;"> 2160 </th>
<th style="border: 3px solid;" </th>
</tr>
</tfoot>
<tbody style="border: 3px solid; border-width: 3px;">
<tr>
<td scope="row" style="font-size:200%;"> ⅞ </td>
<td rowspan="2" style="border-right: 3px solid;">
Vulger Fraction Seven Eighths </td>
<td style="font-size:200%;"> Ⅾ </td>
<td rowspan="2" style="border-right: 3px solid;">
Roman Numeral Five Hundred </td>
<td rowspan="3" style="border: 3px solid;"> <b> E </b> </td>
</tr>
<tr> <td> 0x215E </td> <td> 0x216E </td> </tr>
<tr>
<td colspan="2" style="border-bottom: 3px solid;
border-right: 3px solid;">
<img src="U+215E.gif" /> </td>
<td colspan="2" style="border-bottom: 3px solid;
border-right: 3px solid;">
<img src="U+216E.gif" /> </td>
</tr>
</tbody>
<tbody style="border: 3px solid;">
<tr>
<td scope="row" style="font-size:200%;"> ⅟ </td>
<td rowspan="2" style="border-right: 3px solid;">
Fraction Numerator One </td>
<td style="font-size:200%;"> Ⅿ </td>
<td rowspan="2" style="border-right: 3px solid;">
Roman Numeral One Thousand </td>
<td rowspan="3" style="border: 3px solid;"> <b> F </b> </td>
</tr>
<tr> <td> 0x215F </td> <td> 0x216F </td> </tr>
<tr>
<td colspan="2" style="border-bottom: 3px solid;
border-right: 3px solid;">
<img src="U+215F.gif" /> </td>
<td colspan="2" style="border-bottom: 3px solid;
border-right: 3px solid;">
<img src="U+216F.gif" /> </td>
</tr>
</tbody>
</table>
|
Column and Row groups with CSS border width supported browsers
|
Below table's appearance was rendered by the Gecko (/Mozilla /Mozilla Firefox (FF)) type of web-browser (/engine), and it contains shortest (less amount of) codes, for the same appearance, because, cells' properties are not individually defined, but instead they inherit those from the column and row groups. It uses the colgroup, col, thead, tfoot, tbody, (tr, th, td), etc HTML tags with the following (HTML) parameters and (CSS) properties: border-collapse, border, border-right, border-left, padding, colspan, rowspan, etc. Mozilla web-browsers renders properly the colgroup, col, thead, tfoot, tbody tags with CSS properties border width, border style, border color, but Trident (/MSHTML /Internet Explorer (IE) v6.0) engines (/web-browsers) fails to do that (June 2006). On the other hand, Trident engine browsers renders text color specified in both column and row groups (for both text and border), but Gecko engine browsers fails to do that for column groups (June 2006). These browsers renders the width and align parameters properly, when specified in the column and row groups tags.
|
|
|
File:Table-sample-collapse-colgroup-col-border-02.png
|
|
To display the above table with similar border width appearance in the FF web browsers, below codes are required.
|
|
HTML code:
|
<table border="3" cellspacing="0" cellpadding="2"
rules="all" style="text-align: center; font-size: 85%;
border-collapse: collapse; padding: 2px; border: 3px solid;">
<colgroup align="center" style="border: 3px solid; padding: 2px;">
<col /> <col />
</colgroup>
<colgroup align="center" style="border: 3px solid; padding: 2px;">
<col /> <col />
</colgroup>
<col align="center" style="border: 3px solid; padding: 2px;" />
<caption> <b> Unicode (ISO 10646) Number Forms Character List (Partial 02) </b> </caption>
<thead style="border: 3px solid;">
<tr>
<th colspan="2"> 2150 </th> <th colspan="2"> 2160 </th> <th> </th>
</tr>
</thead>
<thead style="border: 3px solid;">
<tr>
<th> <small> Symbol </small> </th> <th rowspan="2"> Name </th>
<th> <small> Symbol </small> </th> <th rowspan="2"> Name </th>
<th rowspan="3"> <small><small> Last Hex# </small></small> </th>
</tr>
<tr> <th> Hex </th> <th> Hex </th> </tr>
<tr>
<th colspan="2"> <small> Symbol's Picture </small> </th>
<th colspan="2"> <small> Symbol's Picture </small> </th>
</tr>
</thead>
<tfoot style="border: 3px solid;">
<tr>
<th> <small> Symbol </small> </th> <th rowspan="2"> Name </th>
<th> <small> Symbol </small> </th> <th rowspan="2"> Name </th>
<th rowspan="3"> <small><small> Last Hex# </small></small> </th>
</tr>
<tr> <th> Hex </th> <th> Hex </th> </tr>
<tr>
<th colspan="2"> <small> Symbol's Picture </small> </th>
<th colspan="2"> <small> Symbol's Picture </small> </th>
</tr>
<tr>
<th colspan="2"> 2150 </th> <th colspan="2"> 2160 </th> <th> </th>
</tr>
</tfoot>
<tbody style="border: 3px solid; border-width: 3px;">
<tr>
<td style="font-size:200%;"> ⅞ </td>
<td rowspan="2"> Vulger Fraction Seven Eighths </td>
<td style="font-size:200%;"> Ⅾ </td>
<td rowspan="2"> Roman Numeral Five Hundred </td>
<td rowspan="3"> <b> E </b> </td>
</tr>
<tr> <td> 0x215E </td> <td> 0x216E </td> </tr>
<tr>
<td colspan="2"> <img src="U+215E.gif" /> </td>
<td colspan="2"> <img src="U+216E.gif" /> </td>
</tr>
</tbody>
<tbody style="border: 3px solid;">
<tr>
<td style="font-size:200%;"> ⅟ </td>
<td rowspan="2"> Fraction Numerator One </td>
<td style="font-size:200%;"> Ⅿ </td>
<td rowspan="2"> Roman Numeral One Thousand </td>
<td rowspan="3"> <b> F </b> </td>
</tr>
<tr> <td> 0x215F </td> <td> 0x216F </td> </tr>
<tr>
<td colspan="2"> <img src="U+215F.gif" /> </td>
<td colspan="2"> <img src="U+216F.gif" /> </td>
</tr>
</tbody>
</table>
|
Column and Row groups with CSS border width non-supported browsers
|
IE (v6.0) renders all internal borders with 1px width by default, for the above table code. It doesn't support border width CSS properties, inside the column or row groups tags. So all appropriate individual cell, individually needs to have the border width CSS properties and values, for widening the cell borders for data grouping, and by doing so, code becomes longer. Below codes will keep the table appearance same in Gecko, Trident, etc browsers. If the contents of tfoot is placed as last data (tr) lines, then thead, tfoot, tbody tags and rules parameter can be removed.
|
|
|
File:Table-sample-collapse-border-css-01.png
|
|
To display the above table with similar border width appearance in the IE (and other) web browsers, below codes can be used.
|
|
HTML code:
|
<table border="3" cellspacing="0" cellpadding="2" rules="all" style="text-align: center; font-size: 85%; border-collapse: collapse; padding: 2px; border: 3px solid;">
<caption> <b> Unicode (ISO 10646) Number Forms Character List (Partial 03) </b> </caption>
<thead>
<tr>
<th colspan="2" style="border: 3px solid;"> 2150 </th>
<th colspan="2" style="border: 3px solid;"> 2160 </th>
<th style="border: 3px solid;"> </th>
</tr>
</thead>
<thead>
<tr>
<th> <small> Symbol </small> </th>
<th rowspan="2" style="border-right: 3px solid;"> Name </th>
<th> <small> Symbol </small> </th>
<th rowspan="2" style="border-right: 3px solid;"> Name </th>
<th rowspan="3" style="border: 3px solid;">
<small><small> Last Hex# </small></small> </th>
</tr>
<tr> <th> Hex </th> <th> Hex </th> </tr>
<tr>
<th colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;">
<small> Symbol's Picture </small> </th>
<th colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;">
<small> Symbol's Picture </small> </th>
</tr>
</thead>
<tfoot>
<tr>
<th> <small> Symbol </small> </th>
<th rowspan="2" style="border-right: 3px solid;"> Name </th>
<th> <small> Symbol </small> </th>
<th rowspan="2" style="border-right: 3px solid;"> Name </th>
<th rowspan="3" style="border: 3px solid;">
<small><small> Last Hex# </small></small> </th>
</tr>
<tr> <th> Hex </th> <th> Hex </th> </tr>
<tr>
<th colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;">
<small> Symbol's Picture </small> </th>
<th colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;">
<small> Symbol's Picture </small> </th>
</tr>
<tr>
<th colspan="2" style="border: 3px solid;"> 2150 </th>
<th colspan="2" style="border: 3px solid;"> 2160 </th>
<th style="border: 3px solid;"> </th>
</tr>
</tfoot>
<tbody>
<tr>
<td style="font-size:200%;"> ⅞ </td>
<td rowspan="2" style="border-right: 3px solid;">
Vulger Fraction Seven Eighths </td>
<td style="font-size:200%;"> Ⅾ </td>
<td rowspan="2" style="border-right: 3px solid;">
Roman Numeral Five Hundred </td>
<td rowspan="3" style="border: 3px solid;"> <b> E </b> </td>
</tr>
<tr> <td> 0x215E </td> <td> 0x216E </td> </tr>
<tr>
<td colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;">
<img src="U+215E.gif" /> </td>
<td colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;">
<img src="U+216E.gif" /> </td>
</tr>
</tbody>
<tbody>
<tr>
<td style="font-size:200%;"> ⅟ </td>
<td rowspan="2" style="border-right: 3px solid;">
Fraction Numerator One </td>
<td style="font-size:200%;"> Ⅿ </td>
<td rowspan="2" style="border-right: 3px solid;">
Roman Numeral One Thousand </td>
<td rowspan="3" style="border: 3px solid;"> <b> F </b> </td>
</tr>
<tr> <td> 0x215F </td> <td> 0x216F </td> </tr>
<tr>
<td colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;">
<img src="U+215F.gif" /> </td>
<td colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;">
<img src="U+216F.gif" /> </td>
</tr>
</tbody>
</table>
|
Column and Row groups in Wiki markup processor
|
Wiki table doesn't support colgroup, col, thead, tfoot, tbody tags yet (June, 2006). So all appropriate individual cell, individually needs to have the border width CSS properties and values, for widening the cell borders for data grouping, and by doing so, code becomes longer, for a table with more items. Below codes will keep the table appearance same in Gecko, Trident, etc browsers.
|
|
|
Unicode (ISO 10646) Number Forms Character List (Partial 03)
| 2150
|
2160
|
|
| Symbol
|
Name
|
Symbol
|
Name
|
Last Hex#
|
| Hex |
Hex
|
|
Symbol's Picture
|
Symbol's Picture
|
| ⅞
|
Vulger Fraction Seven Eighths
|
Ⅾ
|
Roman Numeral Five Hundred
|
E
|
| 0x215E |
0x216E
|
|
File:U+215E.gif
|
File:U+216E.gif
|
| ⅟
|
Fraction Numerator One
|
Ⅿ
|
Roman Numeral One Thousand
|
F
|
| 0x215F |
0x216F
|
|
File:U+215F.gif
|
File:U+216F.gif
|
| Symbol
|
Name
|
Symbol
|
Name
|
Last Hex#
|
| Hex |
Hex
|
|
Symbol's Picture
|
Symbol's Picture
|
| 2150
|
2160
|
|
|
|
To display the above table with similar border width appearance in most HTML web browsers, below codes can be used.
|
|
Wiki code:
|
{| border="3" cellspacing="0" cellpadding="2" style="text-align: center; font-size: 85%; border-collapse: collapse; padding: 2px; border: 3px solid;"
|+ ''' Unicode (ISO 10646) Number Forms Character List (Partial 03) '''
! colspan="2" style="border: 3px solid;" | 2150
! colspan="2" style="border: 3px solid;" | 2160
! style="border: 3px solid;" |
|-
! <small> Symbol </small>
! rowspan="2" style="border-right: 3px solid;" | Name
! <small> Symbol </small>
! rowspan="2" style="border-right: 3px solid;" | Name
! rowspan="3" style="border: 3px solid;" |
<small><small> Last Hex# </small></small>
|-
! Hex !! Hex
|-
! colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" |
<small> Symbol's Picture </small>
! colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" |
<small> Symbol's Picture </small>
|-
| style="font-size:200%;" | ⅞
| rowspan="2" style="border-right: 3px solid;" |
Vulger Fraction Seven Eighths
| style="font-size:200%;" | Ⅾ
| rowspan="2" style="border-right: 3px solid;" |
Roman Numeral Five Hundred
| rowspan="3" style="border: 3px solid;" | ''' E '''
|-
| 0x215E || 0x216E
|-
| colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" |
[[Image:U+215E.gif]]
| colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" |
[[Image:U+216E.gif]]
|-
| style="font-size:200%;" | ⅟
| rowspan="2" style="border-right: 3px solid;" |
Fraction Numerator One
| style="font-size:200%;" | Ⅿ
| rowspan="2" style="border-right: 3px solid;" |
Roman Numeral One Thousand
| rowspan="3" style="border: 3px solid;" | ''' F '''
|-
| 0x215F || 0x216F
|-
| colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" |
[[Image:U+215F.gif]]
| colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" |
[[Image:U+216F.gif]]
|-
! <small> Symbol </small>
! rowspan="2" style="border-right: 3px solid;" | Name
! <small> Symbol </small>
! rowspan="2" style="border-right: 3px solid;" | Name
! rowspan="3" style="border: 3px solid;" |
<small><small> Last Hex# </small></small>
|-
! Hex !! Hex
|-
! colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" |
<small> Symbol's Picture </small>
! colspan="2" style="border-bottom: 3px solid; border-right: 3px solid;" |
<small> Symbol's Picture </small>
|-
! colspan="2" style="border: 3px solid;" | 2150
! colspan="2" style="border: 3px solid;" | 2160
! style="border: 3px solid;" |
|}
|
TR
Table row.
HTML : <tr> ... </tr>
CSS : TR { display: table-row }
This tag can have following parameters: bgcolor, align, char, charoff, valign, style, lang, dir, title, id, class.
HTML ( align = " left | center | right | justify | char " ).
CSS ( text-align: left | center | right ; ).
TH
Table Header Cell.
HTML : <th> ... </th>
CSS : TH { display: table-cell }
This tag can have following parameters: scope, width, height, abbr, axis, rowspan, colspan, bgcolor, nowrap, style, lang, dir, title, id, class. See TD.
TD
Table Data Cell.
HTML : <td> ... </td>
CSS : TD { display: table-cell }
This tag can have following parameters: headers, scope, width, height, abbr, axis, rowspan, colspan, bgcolor, nowrap, style, lang, dir, title, id, class.
HTML ( headers = id_refs ).
HTML ( scope = row | col | rowgroup | colgroup ).
HTML ( abbr = text ).
HTML ( axis = category_data_name(s list) ).
HTML ( rowspan = row_number(s) ).
HTML ( colspan = column_number(s) ).
HTML ( nowrap ) (Deprecated, Use CSS).
CSS ( white-space: normal | pre | nowrap ; ).
HTML ( width = length ) (Deprecated, Use CSS).
HTML ( height = length ) (Deprecated, Use CSS).
CSS ( height: length ; ).
Rowspan, Colspan
|
Another simple HTML table is displayed below, applying the rowspan and colspan parameters:
|
|
|
| Purchased Equipments (June, 2006) |
| Item Num# |
Item Picture |
Item Description | Price |
| Shipping Handling, Installation, etc | Expense |
| 1. |
File:Crystal mycomputer.png |
IBM Clone Computer. | $ 400.00 |
| Shipping Handling, Installation, etc | $ 20.00 |
| 2. |
File:Crystal kcmmemory.png |
1GB RAM Module for Computer. | $ 50.00 |
| Shipping Handling, Installation, etc | $ 14.00 |
| Purchased Equipments (June, 2006) |
|
|
HTML code:
|
<table border="5" cellspacing="5" cellpadding="2">
<tr> <th colspan="4"> Purchased Equipments (June, 2006) </th> </tr>
<tr>
<th rowspan="2"> Item Num# </th>
<th rowspan="2"> Item Picture </th>
<th> Item Description </th> <th> Price </th>
</tr>
<tr>
<th> Shipping Handling, Installation, etc </th> <th> Expense </th>
</tr>
<tr>
<td rowspan="2"> 1. </td>
<td rowspan="2"> <img src="Crystal_mycomputer.png" /> </td>
<td> IBM Clone Computer. </td> <td> $ 400.00 </td>
</tr>
<tr>
<td> Shipping Handling, Installation, etc </td> <td> $ 20.00 </td>
</tr>
<tr>
<td rowspan="2"> 2. </td>
<td rowspan="2"> <img src="Crystal_kcmmemory.png" /> </td>
<td> 1GB RAM Module for Computer. </td> <td> $ 50.00 </td>
</tr>
<tr>
<td> Shipping Handling, Installation, etc </td> <td> $ 14.00 </td>
</tr>
<tr>
<th colspan="4"> Purchased Equipments (June, 2006) </th>
</tr>
</table>
|
|
To obtain the above exact table with same appearance, we have to apply below wiki code, because, appearance of default wiki table is different from default HTML table. In below codes, you may need to replace the default border color code for FF #C0C0C0 and the gray color, with #ECE9D8 for IE.
|
|
Wiki code:
|
{| border="5" cellspacing="5" cellpadding="2" style="border-color: #C0C0C0;"
! colspan="4" style="border: 1px groove gray;" | Purchased Equipments (June, 2006)
|-
! rowspan="2" style="border: 1px groove gray;" | Item Num#
! rowspan="2" style="border: 1px groove gray;" | Item Picture
! style="border: 1px groove gray;" | Item Description
! style="border: 1px groove gray;" | Price
|-
! style="border: 1px groove gray;" | Shipping Handling, Installation, etc
! style="border: 1px groove gray;" | Expense
|-
| rowspan="2" style="border: 1px groove gray;" | 1.
| rowspan="2" style="border: 1px groove gray;" | [[Image:Crystal_mycomputer.png]]
| style="border: 1px groove gray;" | IBM Clone Computer
| style="border: 1px groove gray;" | $ 400.00
|-
| style="border: 1px groove gray;" | Shipping Handling, Installation, etc
| style="border: 1px groove gray;" | $ 20.00
|-
| rowspan="2" style="border: 1px groove gray;" | 2.
| rowspan="2" style="border: 1px groove gray;" | [[Image:Crystal_kcmmemory.png]]
| style="border: 1px groove gray;" | 1GB RAM Module for Computer.
| style="border: 1px groove gray;" | $ 50.00
|-
| style="border: 1px groove gray;" | Shipping Handling, Installation, etc
| style="border: 1px groove gray;" | $ 14.00
|-
! colspan="4" style="border: 1px groove gray;" | Purchased Equipments (June, 2006)
|}
|
See also
Table of Contents (TOC)
For each page with more than three headings, a table of contents (TOC) is automatically generated from the section headings, unless:
- (for a user) preferences are set to turn it off
- (for an article) in the edit box the code __NOTOC__ is added
With __FORCETOC__ or __TOC__ in the wikitext a TOC is added even if the page has less than four headings.
The TOC is put before the first section header, or in the case of __TOC__, at the position of this code. Thus there may be some introductory text before it, known as the "lead". Although usually a header after the TOC is preferable, __TOC__ can be used to avoid being forced to insert a meaningless header just to position the TOC correctly, i.e., not too low.
Preferences can be set to number the sections automatically.
In a page calling a template with sections, the sections in the template are numbered according to their position in the rendered page, e.g. if the template tag is in the third section, then the first section of the template is numbered four. Any text in the template before its first section shows up as part of the section with the template tag, and any text after the tag before a new header shows up as part of the last section of the template. This may be done deliberately, but can usually better be avoided (see also below).
Page Statistics
- This page was originally created by TinyE at 17:06 on May 25, 2013.
- This page was last modified by An Anonymous User at 19:42 on March 27, 2007.
- This following users have made contributions: TinyE
 , and an anonymous user.
- This page has been previously accessed a total of 1625 times.
|
