Wikitables and Infoboxes for Mediawiki

Edit: Wikitables are still usable for infoboxes on Mediawiki, the open source software on which many wikis and proprietary wiki software is based. However, Wikia has declared the table infobox deprecated in favor of their new <infobox> tag and related sub-tags. It seems like an improvement on an SEO and performance level, but it also means you can’t style infoboxes if you’re not an admin. :(

An infobox is the helpful section of quick information about the subject of your wiki page usually shown in the top-right corner. Perhaps you’d like to try Wikia infoboxes on your own wiki, but you’re not sure how to get started.

If you try perusing the source code of an existing infobox, especially one with inline styles, it probably looks like incomprehensible garbage. Don’t worry! Coding a basic infobox in wiki markup is as easy as 1-2-table.

Here’s a basic table made with wikitext. All infoboxes are essentially tables, so once you get a grasp on wiki tables, an infobox will only require some tweaking. A wiki table begins with [cci]{|[/cci] and ends with [cci]|}[/cci]. Inside your table,

[cci]|+[/cci] followed by text creates a table caption. By default it goes above your table. Its position is not based on where you wrote it in your table code.

[cci]![/cci] followed by text denotes a header. These will normally only make the text bold but can be customized by styling the th class if you have access to Wikia.css. These can be all included on the same line if you separate the headers with [cci]!![/cci]

[cci]|-[/cci] creates a new row. The first row of your table is implicit, so you don’t need to define one right after you open your table. I have a row for the two headers and four rows after that with data.

[cci]|[/cci] followed by text creates a column. As you can see, in each row I have two beautiful columns, one for “boyfriend” and one for “girlfriend.” If you’re too tired to reach for the enter key you can write all the columns in the same row on just one line using [cci]||[/cci] between columns. For example, [cci]| Kermit || Ms. Piggy[/cci]

The amazing code above will produce something like this when it’s published:

Relationships table.

Boyfriend

Girlfriend

Kermit

Ms. Piggy

Mickey

Minnie

Popeye

Olive Oyl

N/A

Betty Boop is a proud independent woman

“But that table’s ugly!” you cry. First of all, wow rude. Second of all, there are plenty of ways to fix this. The magic of wiki tables is that you can add any number of attributes after these basic elements to style your table.

I have now probably made this table uglier, actually, but bear with me for the sake of example. As you can see, all sorts of attributes that you’d normally use on HTML elements can be added to wikitext, by seperating the attributes from the content of a column, header, or caption with a pipe. Attributes after the [cci]{|[/cci] apply to the whole table. Attributes after a [cci]|-[/cci] apply to the whole row, and attributes on an individual header, column, or caption will apply only to those elements, with some exceptions.

In case it’s not immediately apparent, an attribute is written in the format [cci]attribute=”value”[/cci]. For most of your visual customization, however, you’ll be adding values as [cci]style=”attribute: value;”[/cci]. Here’s what I’ve done to this table:

I’ve called the wikitable CSS class for the whole table, which is already defined for you on your Wikia site. By default this will put borders between the table cells and make headers a little more distinct. This is useful if you don’t have access to the wiki’s CSS and want a quickly styled table without using inline styling.

The table has a summary for use by screen readers (see Accessible Table Attributes below)

My table now renders right to left thanks to the dir attribute, so boyfriends will be on the right side and girlfriends on the left side. I have just made my table into a kotatsu.Dir accepts “ltr” and “rtl”.

The caption will now show up beneath the table with style=”caption-side:”, which accepts top (default), bottom, left, and right.

The “Kermit” text will appear green, which is not an easy color to be.

Hovering over “Ms. Piggy” will show the title, “Or did they break up?”

Betty’s lack of a boyfriend is gone and she now occupies the entire row using colspan. I also demonstrate rowspan with a new entry declaring I am both Izaya and Marth’s girlfriend.

Now that you have an idea of how attributes work, your wikitables will have a little more flexibility. Mine doesn’t look like an infobox yet, but we’re getting to that. Slow and steady wins the early bird or whatever. For now, here are some more examples of attributes and what they can be used for.

Making Your Wikitables Responsive

“But plasterbran, Wat if ppl r lookin at ur cool website on their CELLULAR fones???” Good point, illiterate person. Wikia switches to a minimalist stylesheet when viewed on mobile phones, which you can see when selecting a preview mode for your info box, so you don’t have to worry about displaying tables as blocks and @media queries for extreme size differences. However, you might be worried about how your tables and boxes respond to medium screen sizes like tablets.

A basic solution to this is use of the width attribute, which is a percentage, pixel or point value used to specify the width of an element. Responsive design is largely based around making these widths percentages so that they are flexible and adapt to the size of the screen. You can also control the pixel range of your percent width by using the style attributes max-width and min-width. Maybe you would like your infobox to take up roughly 30% of the article width on large screens, but find eventually 30% width makes the box too small. If you want to make sure the box is never thinner than 200 pixels even if that is greater than 30% of the page size, you can use [cci]style=”width: 30%; min-width: 200px;”[/cci] or [cci]width=”30%” style=”min-width: 200px;”[/cci]. Conversely, a box that gets too large than be handled by capping its size using max-width.

Making Your Wikitables Accessible

Always include a .gif of a seeing-eye dog in case there are blind people. Accessible design is not quite as hip and happenin’ right now as responsive design, but if you’re “sensitive to the needs of others” or some other loser thing, here are a few ideas to make your table more accessible.

Non-Visual User Agents

You can add a summary to your table which can serve to explain the table’s purpose. Summary accepts text and can act like a longer version of the caption.

Abbr can be used to provide a shortened version of your headers; for example, “type of apple” might be abbreviated just to “type.” A screen reader might then output a cell as “type: granny smith” rather than repeating “type of apple” with each cell.

The scope attribute can be used with your headers to identify whether a header applies to a row or a column. For example, in my table “Boyfriend” is the label for all the names that come below it, so I wrote [cci]! scope=”col” | Boyfriend[/cci]. Scope accepts “col” or “row”.

Similarly, the axis and headers attributes can associate a header or data cell with a certain category to make sense of information in the table. Perhaps I have a table that looks like this:

Time it takes to Eat Apples in Apple Speed-Eating Contest

Light Yagami

L Lawliet

Ryuk

Granny Smith

36.0 s

10.1 s

1.6 s

Golden Delicious

24.3 s

13.4 s

1.0 s

Whatever the red ones are called

12.0 s

5.4 s

1.0 s

The data in this case is the number of seconds it took each person to eat each apple. The time measurement is at the intersection of two headers, so having this information simply read out as a sequential list might confuse users if you don’t lay down associations between the cells in the table first.

I’ve also given them both an id because the headers attribute only accepts id values.

[cci]| headers=”person1 apple1″ | 36.0 s[/cci] Here we use the id values we assigned the two previous headers. Now it’s evident that “36.0 s” pertains to Light Yagami and to the Granny Smith Apple.

You may choose to use scope instead of headers, or vice versa.

Font Readability

No matter how much pride you have in your Italian heritage, do not choose red and green as the primary colors of your infobox. Do not do this. Not even if your wiki is about pizza. Do not do this.

Font-family is a style attribute that can change the type of font used for the text in your table. If you have access to the wiki’s CSS, you can import Google Fonts (for example) for use. However, you will need to contact Wikia staff if you wish to upload your own font files — for example, a webfont kit you generated on Font Squirrel. If you’re not an admin on the wiki in question, you’ll be limited to the default web-safe font stacks.

If you’re looking to choose the best font for dyslexic readers, the oft-cited Rello et al. study suggests a sans-serif or monospace font such as Helvetica or Courier, and advises against the use of italic serifs. UX Movement also recommends not justifying text, breaking up paragraphs, and staying mindful of the level of contrast (e.g. no stark black on stark white). I personally like to use wingdings in all my web design work to put everybody on the same level.

You can modify how text appears further with font-size, color, letter-spacing, line-spacing, and font-weight, which I’ll discuss in more depth next time when we begin ADVANCED INFOBOX STYLING!

Winner of Miss Best Effort seven years and counting, Plasterbrain spends her days pretending to code, writing music, and third bullet point. Her top three first dates would be hunting for slugs, writing fanfiction about Hanzo, and a joint Powerpoint presentation. Oh wait wait wait! Can I add a fourth? The fourth is Neopets.