An infobox is a fixed-format table designed to be added to the top right-hand corner of articles to consistently present a summary of information that is common to similar articles, like articles about specific weapons, characters, or locations on a wiki. They present pertinent and common information such as, but not limited to, statistics or characteristics that are common to the subject of the pages and related pages.
Creating an infobox
Infoboxes are templates, so knowing how template parameters are working is helpful. An infobox mostly consists of a table with different formatted rows and columns, another option is to use div elements.
The name of a template for an infobox usually starts with infobox, e.g. Template:infobox character.
Documentation
Like all templates, an infobox template should have a documentation that explains its usage. A useful way to present and manage this info is to use the doc-template.
Modular infoboxes
If multiple infoboxes on a wiki share components, it can be useful to have a template for each part of an infobox, e.g. a template for each the header and the end, and templates for different sections. These section-templates are called in the main-template and just pass the needed parameter values. For example, an infobox about building-parts and an infobox about clothing both could have a section about crafting. If you want to add a parameter or change the design on the crafting section, you only need to edit one template instead of two or more.
See here an example of modular infoboxes with documentation.
Styling
The styles of an infobox should be located in a CSS file, e.g. Mediawiki:Common.css. Usually special rights are needed to edit these styling-files, so you can ask your wiki manager to add the stylings to the infoboxes if you have created the according CSS code. A good way to test styles is to use the browser inspector which is usually activated with a menu-entry after right-clicking on a page-element.
Basic example
Portable infobox
The Unified Community Platform includes Extension:PortableInfobox, which makes it possible to create infoboxes using XML-like markup:
<infobox theme="hydra">
<title source="name">
<default>{{PAGENAME}}</default>
</title>
<image source="image">
<alt source="name">
<default>{{PAGENAME}}</default>
</alt>
</image>
<group>
<header>Details</header>
<data source="name">
<label>Name</label>
</data>
<data source="profession">
<label>Profession</label>
</data>
<data source="health">
<label>Health</label>
</data>
<data source="speed">
<label>Speed</label>
</data>
</group>
</infobox><!--
--><includeonly><!--
Tracking categories:
-->{{#if:{{{image|}}}||[[Category:Infoboxes lacking images]]}}<!--
--></includeonly>
Table-based infobox
To understand this example, you need to know how tables and if-functions work.
{|
! colspan="2" style="fontweight: bold; font-size: 1.2em;" | {{{name|{{PAGENAME}}}}}
|-
{{#if: {{{image|}}} | ! colspan="2" {{!}} [[File:{{{image}}}|250x250px|{{{name|{{PAGENAME}}}}}]] | [[Category:Infoboxes lacking images]] }}
|-
! colspan="2" style="fontweight: bold;" | Details
|-
{{#if: {{{name|}}} | {{!}} style="width:40%" {{!}} Name {{!!}} {{{name}}} }}
|-
{{#if: {{{profession|}}} | {{!}} Profession {{!!}} {{{profession}}} }}
|-
{{#if: {{{health|}}} | {{!}} Health {{!!}} {{{health}}} }}
|-
{{#if: {{{speed|}}} | {{!}} Speed {{!!}} {{{speed}}} }}
|}