How to Create an Infobox

What are Infoboxes?
Infoboxes are nothing more than a table saved as a template. Infoboxes are usually in the upper right hand corner of an article. May contain information on leadership, meeting times and it's goals, etc.

How to create an Infobox
Again an infobox is a table. If you know how to create tables in Wikitext or HTML, it is not difficult. If you do not know Wikitext or HTLM, you will probably need someone who does to help you. If you would like to learn these two programs, see Wikitext or HTML Programming. Neither of these programming languages are difficult.

Step One - Create the table

 * We are going to assume you know a little Wikitext and HTML in this tutorial. We will begin by creating a simple table.  The coding will be displayed in both Wikitext and HTML side by side so can see the difference.
 * For this lesson, we have set the width to 200 pixels. It could be any width, but infoboxes are usually kept thin and about 200 pixels is about right.
 * It is recommended that you create infobox tables in HTML as there few problems as you will see.
 * We will be creating an infobox as shown above. Wikitext and HTML will be displayed side by side so you can see the difference between them.  So let us create a infobox for an organization:
 * Now pay close attention to the table tags. You should notice this coding: class="infobox" in the table tag .  This code tells the browser that a infobox is being created and to place it on the right hand side of the article.
 * Since the name of the organization and the image will extend over the two columns which contain the information about the organization we will install colspan="2" in the organization and image coding.
 * When you save your infobox be sure include the word "infobox" in the title so people will know what kind of template it is for example:.


 * As it stands, the HTML coding is ok at this point, but the Wikitext has a problem. Normally the Wikitext as is will work for any table, however, we are going to be installing parameters which require us to replace the |'s in the Wikitext with  .  The reason is a bit beyond the scope of this article but if you are interested click here
 * The Wikitext looks a bit messy right now, but the substitution of the for the | will save a lot of headaches later.  Notice that nothing had to be done to the HTML coding. Even though it looks like the Wikitext has less programming, it is a lot trickier to program infoboxes than in HTLM. That's why it is recommended to program infoboxes in HTML rather than Wikitext.

Step Two - More Coding

 * Next step is to turn the items into parameters. They are formed like so:  .  We will add them to the table below.  Notice that there are three opening and closing curly brackets around each one.
 * It will be in these parameters that we will add the information to the infobox.
 * Notice all we have done is enclose the parameter we want to place information with opening and closing .  That is all.  It will be in the parameters where we put the information that we see in the infobox.
 * In the wikitext, things are really getting hard to differentiate. There are a lot of curly brackets on the code.  Again showing that using HTML is less messy than Wikitext.

Step Three - Placing the Infobox

 * To place this infobox we type the usual coding we use to place templates, which our example is .  However, it will be displayed as such:.
 * Notice no information appears only the parameters for the name of the organization inside the curly brackets. We now have to add the following code inside the placement coding


 * Notice that for every parameter there is a |, the name of the parameter followed by an = sign. It is after the = sign that you add the proper information for the organization.  For example, if you are wanting to place the name of the president you would type it after the = sign like so: |president=John Smith.

That is all there is to it. Simple.
 * When you save the page, the is replaced by John Smith.
 * Now if we add the following information after the = signs like so:
 * We will get the following:
 * Notice that we use the usual coding for placing an image. We have limited the image to 150px wide as the infobox is 200px wide.  If you did not limit the size of the image. the infobox would expand to the width of the image as it stands in the files.
 * In addition it does not matter the order of the items on the placement codes. You could have the image at the bottom of the list, but the image will still show at the top where the infobox template has it position.

Step Four - Limiting Parameters

 * Some infoboxes can get very long. If you list all the attributes of an organization can possibly there can be quit a few items listed.
 * If the infobox is long but you only have a small organization, you could end up with an infobox taking up a lot of room on the page but with little information in it. Maybe the organization does not even have a phone number like in our example here.
 * Well it is possible to code the infobox so that the item "phone" does not appear if there is none. It is done simply by adding this coding to the parameter.
 * This is an example of adding the additional code to the President line:
 * Wikitext:


 * HTML:

This coding looks a bit intimidating but it is really not hard.
 * Notice that there are at each end of the expression.  That means it is a mini template.
 * After the first set of {{ notice #if: which consists of a pound sign #, the word if and a colon :.
 * After the colon you see the parameter repeated with the addition of a pipe after the word inside the { – } and a pipe on the outside like so: {{{parameter|}}}| . We will not take the time to explain what all this code means but if you are interested see the footnote.
 * The next step is to put the coding for item you want to fill in with the infobox template like so:

{{reflist}}
 * What this coding means that if you do not put anything after the = sign on the President line, this item will not appear in the infobox. So if you have a long infobox but few items to fill in, the infobox will shrink up to fit the information you have added.