Community Central
Community Central
m (oxford comma)
Tags: Help rte-wysiwyg
(adding a best practices section)
Line 1: Line 1:
 
{{Needs editor update}}
 
{{Needs editor update}}
 
{{tocright}}
 
{{tocright}}
'''Tables''' are a great tool to help organize your pages to display data, facts, and other information. Tables can be created both in the [[Help:Editing|editor]]'s visual mode and via [[Help:Wikitext|wikitext]].
+
'''Tables''' are a great tool to help organize data. They can be created both in the [[Help:Editing|editor]]'s visual mode and via [[Help:Wikitext|wikitext]].
  +
== Best practices with tables ==
  +
Although tables '''can''' be used for page formatting, they '''shouldn't''' be. The results on mobile devices are awkward because tables aren't very responsive. Throw pictures into tables and the results can easily get downright '''nasty''' on a phone. And if you're making whole pages or sections of articles out of tables, it'd probably be good to rethink that strategy.
   
  +
Instead, as has been [https://www.hotdesign.com/seybold/everything.html argued since at least 2004] tables should be about '''data only'''.
== Step by step ==
 
  +
  +
Here are some specific things to consider when using tables:
  +
* As you increase the number of columns, you increase the chances that your table isn't going to display correctly on a mobile device. Think carefully about whether you need all those columns.
  +
* Some games use icons liberally. So there's a case to be made that icons are necessary. If you run a wiki like this, make sure all the images you use in your tables are cut to the same size. And make that size no larger than you need them to be. Anything much above 25px widths could bring problems.
  +
* Always check what your table looks like on a phone.
  +
== How to make a table ==
 
To create a table, click on the table button [[File:Table button.png|50px|link=]] on the right rail of the editor's visual mode.
 
To create a table, click on the table button [[File:Table button.png|50px|link=]] on the right rail of the editor's visual mode.
 
[[File:Edit toolbar table highlighted.png|thumb|center|400px|Click the '''table''' button]]
 
[[File:Edit toolbar table highlighted.png|thumb|center|400px|Click the '''table''' button]]

Revision as of 00:32, 26 September 2017

Template:Needs editor update

Tables are a great tool to help organize data. They can be created both in the editor's visual mode and via wikitext.

Best practices with tables

Although tables can be used for page formatting, they shouldn't be. The results on mobile devices are awkward because tables aren't very responsive. Throw pictures into tables and the results can easily get downright nasty on a phone. And if you're making whole pages or sections of articles out of tables, it'd probably be good to rethink that strategy.

Instead, as has been argued since at least 2004 tables should be about data only.

Here are some specific things to consider when using tables:

  • As you increase the number of columns, you increase the chances that your table isn't going to display correctly on a mobile device. Think carefully about whether you need all those columns.
  • Some games use icons liberally. So there's a case to be made that icons are necessary. If you run a wiki like this, make sure all the images you use in your tables are cut to the same size. And make that size no larger than you need them to be. Anything much above 25px widths could bring problems.
  • Always check what your table looks like on a phone.

How to make a table

To create a table, click on the table button Table button on the right rail of the editor's visual mode.

Edit toolbar table highlighted

Click the table button

  1. In edit mode, click on the table button under the "Insert" section of the editing toolbar.
  2. A popup box will appear, and allow you to choose the parameters you want for your table.
    Table properties

    Create your table

  3. Once you click OK, a table will appear in your text. You can now input content.
  4. Should you need to change the table parameters, simply right click, and make the needed changes
    Table editor

    Right click to edit

Editing tables in source mode

If you are an advanced editor, you can learn how to edit a table in source mode by checking out examples on Help:Wikitext/table examples page. Via wikitext, you can:

  • Make a table sortable by column, and collapsible
  • Vertically align cells and rows
  • Make cells span columns or rows
  • Color the background of cells, rows, or the whole table with CSS

Further help and feedback