Help:Infobox 101

One of the most asked questions on Miraheze is how to make an Infobox, a panel (or table, or both!) with relevant information about the topic, such as the full name of something, a flag, type, etc.

Infoboxes can be very simple or very complex and may change according to the skin you're using (CSS modifications). Make sure to read the basics about MediaWiki so you can understand each section without much complexity. It's recommended to have at least a basic knowledge of how HTML and CSS works so you can customize and organize your infobox (and any template).

Creating a basic Infobox

Let's create a basic infobox with some info about someone, and the default values will be about Albert Einstein. Go to the address (in the Template namespace) you want to create (such as /wiki/Template:Infobox Person and start creating the page. The panel will have a picture of the person, full name, birthday, nationality and day of death (if applicable).

Table

Most infoboxes are made of a basic table.

{| class="wikitable"
| {{{subj|Albert Einstein}}}
|-
| Born
| {{{born|14 March 1879}}}
|-
| Place of birth
| {{{place|Germany}}}
|-
| Known for
| {{{known|Physics}}}
|}

Albert Einstein
Born	14 March 1879
Place of birth	Germany
Known for	Physics

This is a very basic table with the "wikitable" class (the same one used on Wikipedia, for example). But it's still missing a lot of things.

The first cell (with subj) will have the name of the subject, in this case, Einstein. But the cell needs to be stretched so it can match the width of the others. Adding colspan="2" will make the cell span 2 columns (the total of our table).

{| class="wikitable"
| colspan="2" | {{{subj|Albert Einstein}}}
|-
| Born
| {{{born|14 March 1879}}}
|-
| Place of birth
| {{{place|Germany}}}
|-
| Known for
| {{{known|Physics}}}
|}

Albert Einstein
Born	14 March 1879
Place of birth	Germany
Known for	Physics

Because it's the header of our table, and there's also other cells as "sub-headers", change the pipe character (|) for an exclamation mark instead (!) so that specific cell will be a header cell with bold text and centralized text.

{| class="wikitable"
! colspan="2" | {{{subj|Albert Einstein}}}
|-
! Born
| {{{born|14 March 1879}}}
|-
! Place of birth
| {{{place|Germany}}}
|-
! Known for
| {{{known|Physics}}}
|}

Albert Einstein
Born	14 March 1879
Place of birth	Germany
Known for	Physics

Image

Images are great to grant more info and also more visual appeal to the page. Usually, an infobox has a single image, however it can have multiple or even none, if the specific page doesn't need one.

Below the subj cell, we'll add the cell image. Don't forget the colspan="2" and to set a maximum width of the image (let's use 200px). Let's set a caption for the image as well.

{| class="wikitable"
! colspan="2" | {{{subj|Albert Einstein}}}
|-
! colspan="2" | [[File:{{{img|Albert_Einstein_Head.jpg}}}|200px]]
|-
| colspan="2" style="text-align: center"  | <small>{{{capt|Albert Einstein picture woohoo}}}</small>
|-
! Born
| {{{born|14 March 1879}}}
|-
! Place of birth
| {{{place|Germany}}}
|-
! Known for
| {{{known|Physics}}}
|}

Albert Einstein
Albert Einstein picture woohoo
Born	14 March 1879
Place of birth	Germany
Known for	Physics

Looking good! The usage of the image with the parameter shown here is very basic. It's totally possible to restrict and be more specific, such as:

{| class="wikitable"
! colspan="2" | {{{subj|Albert Einstein}}}
|-
! colspan="2" | [[File:{{{img|Albert_Einstein_Head}}}.{{{format|jpg}}}|{{{width|200px}}}]]
|-
| colspan="2" style="text-align: center"  | <small>{{{capt|Albert Einstein picture woohoo}}}</small>
|-
! Born
| {{{born|14 March 1879}}}
|-
! Place of birth
| {{{place|Germany}}}
|-
! Known for
| {{{known|Physics}}}
|}

Sets two new values, so when transcluding the template you can modify the format (JPG, PNG, GIF, etc.) and the width.

It's also possible to be broad, so the user will need to insert the brackets with the image (useful when multiple parameters of the image needs to be modified)

{| class="wikitable"
! colspan="2" | {{{subj|Albert Einstein}}}
|-
! colspan="2" | {{{img|[[File:Albert_Einstein_Head.jpg|width|200px]]}}}
|-
| colspan="2" style="text-align: center"  | <small>{{{capt|Albert Einstein picture woohoo}}}</small>
|-
! Born
| {{{born|14 March 1879}}}
|-
! Place of birth
| {{{place|Germany}}}
|-
! Known for
| {{{known|Physics}}}
|}

Page without image

Sometimes a page doesn't have (or doesn't need) an image so we have to add a parser function to that. Using if: we can make the cell disappear when there's nothing on the img tag. Because the caption is related to the image, use the same parameter to the entire row of the caption (|-)

{| class="wikitable"
! colspan="2" | {{{subj|Albert Einstein}}}
|-
! colspan="2" {{#if: {{{img|}}}||style="display: none"}} | [[File:{{{img|Albert_Einstein_Head.jpg}}}|200px]]
|- {{#if: {{{img|}}}||style="display: none"}}
| colspan="2" style="text-align: center"  | <small>{{{capt|Albert Einstein picture woohoo}}}</small>
|-
! Born
| {{{born|14 March 1879}}}
|-
! Place of birth
| {{{place|Germany}}}
|-
! Known for
| {{{known|Physics}}}
|}

Now, everytime you don't set a value for img, the cell won't display anything. The same thing can also be done with every cell:

{| class="wikitable"
! colspan="2" | {{{subj|Albert Einstein}}}
|-
! colspan="2" {{#if: {{{img|}}}||style="display: none"}} | [[File:{{{img|Albert_Einstein_Head.jpg}}}|200px]]
|- {{#if: {{{img|}}}||style="display: none"}}
| colspan="2" | <small>{{{capt|Albert Einstein picture woohoo}}}</small>
|-
! Born
| {{{born|14 March 1879}}}
|-
! Place of birth
| {{{place|Germany}}}
|- {{#if: {{{died|}}}||style="display: none"}}
! Died
| {{{died|18 April 1955}}}
|-
! Known for
| {{{known|Physics}}}
|}

died set

Albert Einstein
		Born	14 March 1879
Place of birth	Germany
Died	18 April 1955
Known for	Physics

died unset

Albert Einstein
		Born	14 March 1879
Place of birth	Germany
Known for	Physics

Styling

Styles are optional but it can help fit the wiki's overall design. It's totally possible to create a new class for tables. On /wiki/MediaWiki:Common.css or /wiki/MediaWiki:<your-skin>.css:

.infotable {
    float: right;
    padding: 5px;
    margin-left: 3px;
    background: #eaecf0;
    border: 3px solid #003aff;
    width: 25%;
}

.infotable th {
    text-align: left;
}

Albert Einstein
Albert Einstein picture woohoo
Born	14 March 1879
Place of birth	Germany
Died	18 April 1955
Known for	Physics

In this case, make sure to add text-align: center to the subj cell

With some CSS knowledge, you can customize your infobox any way you want. This one has the basic float, making it go to the right side of the container and allowing text to be displayed on the side (unlike the tables before). This style also adds 5px of padding, 3px of margin (on the left), makes the background a different color, adds a blue border, and it will cover 25% of the container (modify the values on mobile view, depending on the skin you're using).

The styles can also be applied directly to the template, without Common.css, using style="...". Adding style this way is effective when one element needs to have a specific CSS, however, if you'll use multiple instances of the same style it's better just to make a class for it.