How to Create an Infobox

Revision as of 07:51, 10 September 2014 by Ccsmith (talk | contribs)

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 to be seen right away after page has loaded. Its main purpose is to give details so you don't have try to locate them in the article. For an organization, it might have the leadership, times and places of meetings, 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 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. It is recommended that you create infobox table in HTML as there few problems as you will see.

However there is one minor difference: the table has a classification in its title, like so in Wikitext and HTML:

{| class=infobox .............. |} or in HTML
<table class=infobox>.........</table>

So let us create a infobox for an organization. We will do it both in Wikitext and HTML.

Wikitext HTML
{| class=infobox....|} <table class=infobox>...</table>

Next we want to give the infobox some style considerations such as width, borders, padding, font size, and maybe background color:

Wikitext HTML
{| class=infobox style="width:30%; text-align:left; padding:0px; font-size:8pt; float:right; border:1px solid black; border-right-width:2px; border-bottom-width:2px; background-color:white;"....|} <table class=infobox style="width:30%; text-align:left; padding:0px; font-size:8pt; float:right; border:1px solid black; border-right-width:2px; border-bottom-width:2px; background-color:white;">...</table>