Community Central
Community Central
mNo edit summary
Tags: Help sourceedit
m (→‎Further help and feedback: Removing interlanguage link)
(38 intermediate revisions by 13 users not shown)
Line 1: Line 1:
 
{{Needs editor update}}
 
{{Needs editor update}}
  +
'''Tables''' are a great tool to help organize data. They can be created in the [[Help:Editing|classic editor]]'s visual mode, in the [[Help:VisualEditor|VisualEditor]], and by using [[Help:Wikitext|wikitext]], but you should carefully consider [[#Best practices with tables|what tables are truly meant to do]] and use them primarily for displaying data.
{{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]].
 
   
  +
== In the classic editor's visual mode ==
==Step by step==
 
To create a table a click on the table button [[File:Table_button.png|50px]] on the right rail of the editor's visual mode.
+
To create a table using the classic editor's visual mode, click on the table button on the right rail. [[File:Table button.png|50px|link=|]]
[[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]]
 
# In edit mode, click on the table button under the '''Insert''' section of the editing toolbar.
 
# A pop-up box will appear, allowing you to choose the parameters you want for your table.[[File:Table properties.png|thumb|center|190px|Create your table]]
 
# Once you click OK, a table will appear in your text. You can now input content.
 
# Should you need to change the table parameters, simply right click, and make the needed changes.[[File:Table editor.png|thumb|center|300px|Right click to edit]]
   
  +
== In the VisualEditor ==
#In edit mode, click on the table button under the '''"Insert"''' section of the editing toolbar.
 
  +
The [[Help:VisualEditor|VisualEditor]] offers a similar experience to the classic editor's visual mode—except that it has fewer steps.
#A popup box will appear, and allow you to choose the parameters you want for your table. [[File:Table_properties.png|thumb|center|190px|Create your table]]
 
  +
# Open a page in the VisualEditor. (If you're not logged in, you'll automatically be in the VE. Otherwise, you may have to adjust your [[Help:preferences|preferences]].)
#Once you click OK, a table will appear in your text. You can now input content.
 
  +
# Under the '''insert''' dropdown, choose '''table'''.[[File:VE-TableControls.png|thumb|150px|right|thumb|Hit the arrows to make a change]]
#Should you need to change the table parameters, simply right click, and make the needed changes [[File:Table_editor.png|thumb|center|300px|Right click to edit]]
 
  +
# A 4 X 4 grid will appear. Click on a cell and enter either your label or your data.
  +
# If you want to expand or contract the grid, click on arrows surrounding the table and you'll get a dropdown that will offer you the chance alter the structure of your table.
  +
# Hit '''Save page''' when ready to publish.
   
==Editing tables in source mode==
+
== In source mode ==
If you are an advanced editor, you can learn how to edit a table in source mode by checking out these examples: [[Help:Wikitext/table examples]]. Via wikitext, you can:
+
If you are an advanced editor, you can learn how to edit a table in source mode by checking out the [[Help:Tables/Wikitext]] page.
* Make a table [[Help:Sorting|sortable by column]], and [[Help:Collapsing|collapsible]]
 
* Vertically align cells and rows
 
* Make cells span columns or rows
 
* Color the background of cells, rows, or the whole table with [[Help:CSS|CSS]]
 
   
  +
== Best practices with tables ==
==See also==
 
  +
Although tables '''can''' be used for design, they '''shouldn't''' be. The results on mobile devices are awkward because tables aren't very responsive. That is, on differently sized displays, tables look different—and often are ugly. 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.
* Learn how to create and use [[Help:Templates|templates]]
 
* Learn about designing your own [[Help:Infobox|Infobox]]
 
   
  +
Instead, as has been [https://www.hotdesign.com/seybold/everything.html argued since at least 2004] tables should be about '''data only'''.
==Further help & feedback==
 
  +
  +
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.
  +
* It's very common for wikis to make notices on the top of pages—things like {{tl|delete}}—using table markup. These are typically problematic on phones, and most readers on mobile devices don't care about them. You can skirt the issue by making sure they have a [[Help:Template types|template type]] of '''Notice'''—and that Navboxes are marked '''Navbox'''.
  +
* Always check what your table looks like on a phone.
  +
 
== Further help and feedback ==
 
{{Help and feedback section}}
 
{{Help and feedback section}}
   
 
[[de:Hilfe:Tabellen]]
 
[[de:Hilfe:Tabellen]]
[[es:Ayuda:Wikitexto/Ejemplos de tablas]]
+
[[es:Ayuda:Tablas]]
 
[[fi:Ohje:Taulukot]]
 
[[fi:Ohje:Taulukot]]
 
[[fr:Aide:Tableaux]]
 
[[fr:Aide:Tableaux]]
 
[[it:Aiuto:Tabelle]]
 
[[it:Aiuto:Tabelle]]
[[ja:Help:テーブル]]
+
[[ja:ヘルプ:テーブル]]
 
[[ko:도움말:표]]
 
[[ko:도움말:표]]
 
[[nl:Help:Tabellen]]
 
[[nl:Help:Tabellen]]
Line 37: Line 46:
 
[[pt:Ajuda:Tabelas]]
 
[[pt:Ajuda:Tabelas]]
 
[[ru:Справка:Таблицы]]
 
[[ru:Справка:Таблицы]]
  +
[[uk:Довідка:Таблиці]]
  +
[[vi:Trợ giúp:Bảng]]
 
[[zh:Help:表格]]
 
[[zh:Help:表格]]
   
 
[[Category:Editing]]
 
[[Category:Editing]]
 
[[Category:Help|Table]]
 
[[Category:Help|Table]]
  +
[[Category:Tables & templates]]

Revision as of 10:14, 2 January 2018

Template:Needs editor update Tables are a great tool to help organize data. They can be created in the classic editor's visual mode, in the VisualEditor, and by using wikitext, but you should carefully consider what tables are truly meant to do and use them primarily for displaying data.

In the classic editor's visual mode

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

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 pop-up box will appear, allowing 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

In the VisualEditor

The VisualEditor offers a similar experience to the classic editor's visual mode—except that it has fewer steps.

  1. Open a page in the VisualEditor. (If you're not logged in, you'll automatically be in the VE. Otherwise, you may have to adjust your preferences.)
  2. Under the insert dropdown, choose table.
    VE-TableControls

    Hit the arrows to make a change

  3. A 4 X 4 grid will appear. Click on a cell and enter either your label or your data.
  4. If you want to expand or contract the grid, click on arrows surrounding the table and you'll get a dropdown that will offer you the chance alter the structure of your table.
  5. Hit Save page when ready to publish.

In source mode

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

Best practices with tables

Although tables can be used for design, they shouldn't be. The results on mobile devices are awkward because tables aren't very responsive. That is, on differently sized displays, tables look different—and often are ugly. 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.
  • It's very common for wikis to make notices on the top of pages—things like {{delete}}—using table markup. These are typically problematic on phones, and most readers on mobile devices don't care about them. You can skirt the issue by making sure they have a template type of Notice—and that Navboxes are marked Navbox.
  • Always check what your table looks like on a phone.

Further help and feedback