Fantendo Help Logo (Tutorials)

Editing Tables

The table button on Wikia's visual editor only has so many options. It is not possible to customize things like color or border without a knowledge of coding. Fortunately, wikicode is built on HTML, an easy programming language for beginners.

The default code

Using the visual editor, a table with this code is created:

{| border="0" cellpadding="1" cellspacing="1" class="article-table article-table-selected" style="width: 500px;"

To insert a background color, go to where it says "style=". After the quotation mark, insert "background-color:add color here", where any HTML color or hex code will suffice. Also, it is necessary to add a semicolon (;) after the color and a space. To change font color, the same can be done, but instead of "background-color", only "color" is used.

  • Font: font-family:font here;
  • Text size: font-size:size here;
  • Border: border:sizepx style (ridge, solid, dashed) color;
  • Border radius: border-radius:sizepx;

Let's put that to the test! To get a full-page table with a white background, black text, and a normal border, we would do this:

{| border="1" cellpadding="1" cellspacing="1" style="width: 100%; background-color:white; color:black; border:1px solid black;"

Note the border="1" at the beginning, which will increase the size of the border, and width:100%;, which allows it to take up the page's width. Now that we have learned how to customize tables, let us move on to the content.

The content

You want people to actually know what those columns are, right? Below the top part of the code, inserting "! scope="col"|text here" automatically makes the cell it is used on bold, like this.

{| border="1" cellpadding="1" cellspacing="1" style="width: 100%; background-color:white; color:black;"
! scope="col"|Name
! scope="col"|Characters
|- style="text-align:center;"
| style="font-size:20px;"|aaaa
| colspan="2"|aaaaa

To make a row stop and go to the next row, a "|-" can be inserted, as seen in the example, and cells are begun with "|". To end a table, "|}" is needed. Also, in the same way the whole table is customized, rows and even cells can be changed, as seen! And that's not it! To make a cell take the space of two columns, insert "colspan="2"". The code above produces this table:

Name Characters
aaaa aaaaa

See what we can do with HTML and wikicode?

External links

  • Codecademy: A great website for learning basics in HTML, CSS, and other languages.
Fantendo Help Logo (Tutorials)
Some BasicsResizing an ImageEditing TablesMaking TemplatesUnderstanding the Skins
Community content is available under CC-BY-SA unless otherwise noted.