MediaWiki is a special software which is used to design Wikis. For any website, formatting is the key to creative and sophisticated designs. In this article by Mizanur Rahman, we will use advanced formatting components like lists and tables in MediaWiki to add content to a sample website.

Using Lists with MediaWiki

The three types of lists available in HTML—unordered lists, ordered lists, and definition lists—are also available in MediaWiki. In MediaWiki, we can use both HTML and wiki syntax for creating lists. We will explore both techniques in this article.

Unordered List

Creating unordered lists in MediaWiki is very simple. In order to create an unordered list in MediaWiki using wiki syntax, keep the following rules in mind:

• Use the asterisk (*) sign at the beginning of each line for creating a list element. The number of asterisks you add before the line will indicate the level of list element in the unordered list. For example, ** will indicate a second-level list element, while *** will indicate a third-level list element, and so on.
• In order to restart an unordered list, put a wiki line break (an empty line) at the end of the list. Then you can start another list using *.

Let's open a new page and write the following content in order to create an unordered list:

* Ghost Directory - North America:
** United States of America.
*** Florida.
*** New York.
**** Long Island
**** Manhattan
**** Cooney Island
*** New Jersey
*** Michigan
* Ghost Directory - Europe:
** United Kingdom
*** Liverpool
*** Fulham
** Ireland
** Finland
** Sweden
Other directories.
* Bangladesh
* India.

Now let's click on Save page to see the unordered lists that we have created:

Now let us see how to create the same list using HTML syntax:

<ul><li>Ghost Directory - North America :
   <ul><li>United States of America.
      <ul><li> Florida.
            <li> New York.
            <ul><li>Long Island
                   <li>Manhattan
                   <li>Cooney Island
            </ul>
            <li> New Jersey
            <li> Michigan
      </ul>
   </ul>
</ul>
<ul><li> Ghost Directory - Europe:
      <ul><li> United Kingdom
            <ul><li>Liverpool
                   <li>Fulham
            </ul>
          <li>Ireland
          <li>Finland
          <li>Sweden
     </ul>
</ul>
Other directories.
<ul><li> Bangladesh
    <li> India.
</ul>

From the previous two examples we see that the wiki syntax definitely gives us a less hard time generating the unordered list.

Ordered List

The basic difference between unordered and ordered lists is that while we see only bullets for unordered lists, in an ordered list we will see numbers like 1,2... etc. In order to create an ordered list in MediaWiki using wiki syntax, keep the following rules in mind:

• Use the hash (#) sign for creating each list element. The number of hashes you add before the line will indicate the level of list element in the ordered list. For example, ## will indicate a second-level list element, ### will indicate a third-level list element, and so on.
• In order to restart an ordered list, put a blank line at the end of the list. Then you can then start another list using #.

Now look at the following example in MediaWiki to create an ordered list:

In order to submit your story for the Monthly Haunted story contest, you have to follow the 
guidelines below:
Stories can have the following Categories
# Novel
# Short Story
# Real life story
# Articles
Here are the writing guidelines
# Basic Guidelines
## Story must be within 1200 words.
## Computer Typed:
### Font size: 12 pt
### Paragraph: double line break
### Font Name: Times New Roman
## Well formatted with a front page
## Front page content:
### Story name
### Author Name
### Submission Date
### Category
### Author Email Address
# All entries must be submitted before 1st October, 2006
# For any query, contact storyteller@haunted.com

Click on Save page to see the ordered list, which appears as shown below:

Now if the same example is created with HTML tags, we will see that the wiki syntax is much easier to apply than HTML syntax.

However, there still are some places where we have to use HTML instead of wiki syntax. Take this example: we have a list of ghost sighting for the last 100 years starting from early 1900s. We want to show the sightings sequentially using the years rather than 1, 2, 3, etc. In MediaWiki all ordered lists start from 1, and we cannot define any attribute for wiki syntax. Hence it is not possible for us to start with predefined numbering. Maybe future MediaWiki versions will have something to accommodate this feature.

So let's see how we can perform the task with HTML:

Here is the list of ghost sightings in the last 100 years
    <ol start=1905>
       <li> Ghosts Sighted in Year 1905
       <ol><li>3rd January: Ghost of ancient Mariner sighted at Port City,
               Florida, USA
           <li>10th January: Ghost of a Little girl sighted at a village
               in Ireland
           <li>5th May: A werewolf sighted in a mountain region of
               Colorado.
           <li>25th December: A Christmas ghost sighted in Texas
       </ol>
       <li> Ghosts Sighted in Year 1906
       <ol><li> 3 sightings have been reported but details about place and
               time are not available.
       </ol>
       <li> Ghosts Sighted in Year 1907
       <ol><li>3rd January: Ghost of ancient Mariner sighted again after
              2 years at Port City, Florida, USA
           <li>11th June: Ghost of a Mathematician sighted at an old
              valley, Texas
       </ol>
     </ol>
     <ol start=1937>
       <li> Ghosts Sighted in Year 1937
       <ol><li>January, First Vampire existence found in United Kingdom
           <li>April, A sailor ghost was sighted on a ship bound to
               USA from UK
           <li> July, The sailor ghost again sighted on a ship bound to
                USA from UK - it was named Atlantic Nightmare.
       </ol>
     </ol>

Click on Save page to see the output as shown in the following screenshot:

So, from the previous example, we see that it's better to use HTML tags in special cases, where wiki syntax is not of much help. This is the reason why MediaWiki allows the use of HTML tags for formatting.

This article has been extracted from: MediaWiki Administrators’ Tutorial Guide

Install, manage, and customize your MediaWiki installation Get your MediaWiki site up fast Manage users, special pages, and more Customize and extend your MediaWiki site Create new, attractive MediaWiki themes For more information, please visit: http://www.PacktPub.com/Mediawiki/book

Definition List

As the name suggests, a definition list contains a glossary-type listing. A Definition List is a list of terms and corresponding definitions. Definition lists are typically formatted with the terms on the left, with the definitions following on the right or on the next line. The rules to be kept in mind for creating a definition list are as follows:

• Each definition term should start on a new line.
• To indicate a definition term, use a semi colon (;) at the beginning of the line.
• To indicate the definition, use a colon (:) at the beginning of the definition text.

Let us try an example for definition list creation using wiki syntax:

;Residual
:Residual Haunting is the playback of an event in time that is left at a location. Many haunting 
scenes are thought to be residual in nature (footsteps in hallways, seeing someone walking down a 
certain staircase, etc.). They are endless loops of the same scene being played over and over, and
they are usually always experienced in the same location.
;Anniversary
:Anniversary ghosts do, as the title suggests, only appear on an anniversary of some significance 
like deaths, birthdays and other times that held some meaning for the deceased or are of historical
significance to them. Since this type of ghost only appears on the anniversary of a special event, 
it seems likely this type of haunting could be a residual haunting, reenacting a certain event in 
time on that one day or night.
;Intelligent: Unlike residual haunting, ghosts of this type are not in a 'stuck in time' type of 
deal. They actually seem to have intelligence. These spirits are interactive, sometimes verging into
the territory of the poltergeist. They may try and attract your attention by creating odors, moving 
things, making noises such as footsteps, slamming doors, or moving and hiding objects.
;Poltergeist:The Poltergeist - German for "noisy spirit" - seems to be between the categories of 
ghost and psi (the term applied to unusual abilities of human origin such as ESP and psycho kinesis
and investigating "exceptional human experiences" such as out of body and apparitional experiences).
There are usually two camps of thought on this subject. Some believe it all to be caused by 
intelligent ghosts, and some believe it all to be caused by the living person at the location.

The output of the previous example will be as shown in the following screenshot:

According to our discussion so far, we have learned that in order to restart the numbering for an ordered list, or to create a new unordered list, we have to enter a line break. But what if we need to put a break in the text in the list item itself? For unordered list, the bullet item will be shown just below the line break without any notification. However, the problem will be for ordered lists since after every line break the numbering will resume from 1. Unfortunately, wiki syntax cannot help us to solve the problem here. We have to use an HTML solution for this. There are two options available for our rescue:

• Using <br>
• Using <p></p>

Now we will explore a mixture of ordered, unordered, and definition lists in a single example. Here is one demonstration of achieving the task using wiki syntax along with HTML tags:

; Ghosts: Ghosts are controversial phenomena that many believe in and many don't.
* Ghost Directory - North America
    <p> this list includes all haunted places in the North America
        region by country, state and city. We tried to make the
        navigation easier with the use of proper listing.
    </p>
# United States of America.
## Florida.
## New York.
### Long Island<p> Maximum ghosts were found here.</p>Mostly in the early 1990s.
### Manhattan
### Coney Island
## New Jersey
## Michigan
* Ghost Directory - Europe: we have lots of haunted places in Europe.
<br> Here are few of the places
# United Kingdom
## Liverpool
## Fulham
# Ireland
# Finland
# Sweden
Other directories: <br><br> our other directories include countries from South Asia and the Middle East.
* Bangladesh
* India.

The output appears like the following screenshot:

Using Tables

Tables are a very important formatting tool for web applications. Using tables we can create attractive designs and also organize our text and contents. Without tables, lots of things are not possible in HTML, especially advanced formatting. Even for the wiki, we need tables to format our text and images and present our content to the browser. Wiki syntax provides us the opportunity to create tables. Though the syntax is not very conventional it is still very easy to apply.

The Syntax

To create a table in MediaWiki, we need to use curly braces and a vertical line like {| |}. {| is used to open the table and |} to close the table. All the table contents will be between these two tags. This is also known as wiki-pipe syntax.

Both opening and closing table syntax must reside on a separate line. No other tags apart from attributes of the tables may exist in those two lines; else the table will not be rendered properly.

A few things that we must know before creating a table using wiki syntax are:

• To start a table row enter a line and a dash |- after the opening tag. There is no end symbol for indicating row end. We have to start a new row to add the next line of text or symbols.

• To start a column put a line (|) followed by data or content after the row syntax. If we want to put more than one column of data in a single line, then we have to use (||) instead of (|). The default syntax will have one line (|).
• Each row must have same number of cells as in other rows, so that the number of columns in the table is kept constant. This rule can have an exception if the table cells span multiple rows or columns. If we have any blank cell we must put a non-breaking space (&nbsp;) in it so that the cell is displayed. If this rule is broken, the table will not be displayed properly.

Keeping these rules in mind, let us create a basic table for our Submitted Story section, where we will put the story titles, authors' names, and submission dates in a table format. Here is the code to do that:

{|
| #
| Story Title
| Author
| Submission Date
|-
| 1.
| The Ghost of the Old Mathematician
| J. David
| 12/09/2006
|-
| 2.
| The little Mummy
| W. Patricia
| 13/09/2006
|-
| 3.
| The Guest
| S. Steve
| 13/09/2006
|-
| 4.
| A true story
| W. Henry
| 15/09/2006
|-
| 5.
| Nightmare
| M. Rahman
| 17/09/2006
|}

Now save the page and view it in the browser. We will see something similar to the following:

That looks pretty ordinary, doesn't it? The reason is that we made a very basic table. However, there are lots of things that we can do with tables. Here is the list of actions we can perform with wiki tables.

Adding a Caption

MediaWiki provides us with an optional feature of adding a caption to a table. To add a caption to a table, we need to use the table caption syntax (a line followed by a plus sign |+) in the line after the table opening sign.

Adding Column and Row Headers

In order to add a row heading, we have to use the sign ! instead of |. The column heading is also done using the ! sign twice (!!) instead of |. The difference between row and column headings is that the rendering of a row heading depends on the browser-rendering option and the style defined by the author, while a column heading is always rendered bold font by the browser in order to separate it from the column contents.

Let's modify the table in the Submitted Story section with what we have learned so far:

{|
|+ Story Listing
!# !! Story Title !! Author!! Submission Date
|-
! 1.
| The Ghost of the Old Mathematician
| J. David
| 12/09/2006
|-
! 2.
| The little Mummy
| W. Patricia
| 13/09/2006
|-
! 3.
| The Guest
| S. Steve
| 13/09/2006
|-
! 4.
| A true story
| W. Henry
| 15/09/2006
|-
! 5.
| Nightmare
| M. Rahman
| 17/09/2006
|}

|+ Story Listing represents the table caption, while !# !! Story Title !! Author!! Submission Date represents the table column heading.

Now save the page and view the page in the browser. You will see something similar to this:

Well, it looks a little better than the previous one. Is there anything else we can do to the table? Yes there is. We can define parameters for the table and cells. That means there is a lot of scope for formatting cell and table properties.

This article has been extracted from: MediaWiki Administrators’ Tutorial Guide

Install, manage, and customize your MediaWiki installation Get your MediaWiki site up fast Manage users, special pages, and more Customize and extend your MediaWiki site Create new, attractive MediaWiki themes For more information, please visit: http://www.PacktPub.com/Mediawiki/book

Adding Parameters

Wiki syntax supports most of the HTML parameters that are also known as attributes. However, the most important attribute it supports is the  style attribute, which we will be using extensively while formatting our tables and cells. The non-supported attributes and tags are very few in number. A few things that should be kept in mind while dealing with parameters are:

• To add parameters to a table, we can use the style parameter to define properties related to the table.
• To add parameters to a cell, we can add a parameter list after the line symbol | and close the parameter list using another line symbol | and then put the value of the cell after that. The syntax will look like: | Parameter | value.
• We can directly put HTML tags such as <font>, <I>, etc., inside the cell.

So what parameters we can define? Definitely we can define many parameters such as color, width, height, border, cells pacing, cell padding, font color, font size, alignment, etc.

The following example contains parameters uses such as border, height, width, background color, and font color:

{| style="background:#cccc99;color:black;width:80%;" border="1"
cellpadding="5" cellspacing="0" align="center"
|+ Story Listing
!# !! Story Title !! Author !! Submission Date
|- style="background:white; color:black"
! 1.
| style="width:300px" |The Ghost of the Old Mathematician
| J. David
| 12/09/2006
|- style="background:#f0f0f0; color:black"
! 2.
| The little Mummy
| W. Patricia
| 13/09/2006
|- style="background:white; color:black"
! 3.
| The Guest
| S. Steve
| 13/09/2006
|- style="background:#f0f0f0; color:black"
! 4.
| A true story
| W. Henry
| 15/09/2006
|- style="background:white; color:black"
! 5.
| Nightmare
| M. Rahman
| 17/09/2006
|}

In the first line of the example, we have applied the style parameter, inside which we have defined background color and foreground color, along with the height and width of the table. After that we have defined a border for the table, cell padding and spacing for each cell, and center alignment for the table. If we move down to line 4 in the example, we will see that we have defined row properties to override the table properties defined at the first line. This is to differentiate the two adjacent rows that we can see in the image. In line 6 we have defined cell properties to make the title cell a little bit wider than other cells.

Let us write down the code in our edit panel and save to see what we actually doing over here. The output for the above input will be similar to this one:

So it is a very good example to look at for major style attributes that we can apply in wiki syntax.

For defining colors with names, MediaWiki supports 16 web colors defined by the HTML 4.01 specification. The list of colors is given in the following tab

Summary

In this article, we have seen how by using Lists and Tables in MediaWiki we can organize our content. The syntax of MediaWiki is relatively simple and can be used to create attractive and sophisticated designs.

If you have read this article you may be interested to view :

• MediaWiki Content Organizing Features: Namespaces, Categories
• MediaWiki Content Organizing Features: Templates, Sections, Redirection

About the Author

Mizanur Rahman from Bangladesh is a Senior Software Engineer at Relisource Technologies (http://www.relisource.com). He loves to work with Java, PHP and other web-based technologies and is a moderator of PHPXperts, the largest PHP user group in Bangladesh.