Community Central
Register
Community Central
m (Undo revision 3395786 by Eros233 (wall): Does this look like it is a bad editing? No. tt tag is deprecated and should not be used.)
Tags: Undo Help
mNo edit summary
Tags: Source edit Help
Line 1: Line 1:
If you want to '''shape tables with wikitext''', you have plenty of options. This one page won't go into them all, but it ''will'' show you how wikitext matches up to HTML markup, the difference a CSS class makes, and an example of a simple table that works on both desktop and mobile devices.
+
If you want to '''shape tables with wikitext''', you have plenty of options. This one page won't go into them all, but it ''will'' sh[[File:Mia Williams.jpg|thumb|Mia Williams.jpg]]ow you how wikitext matches up to HTML markup, the difference a CSS class makes, and an example of a simple table that works on both desktop and mobile devices.
   
 
== Basic table code ==
 
== Basic table code ==
Line 119: Line 119:
 
[[pt:Ajuda:Wikitexto/Exemplos de tabelas]]
 
[[pt:Ajuda:Wikitexto/Exemplos de tabelas]]
 
[[ru:Справка:Таблицы/викитекст]]
 
[[ru:Справка:Таблицы/викитекст]]
[[tr:Yardım:Tablolar/Vikimetin]]
+
[[tsaar:Yardım:Tablolar/Vikimetin]]
 
[[uk:Довідка:Таблиці/вікітекст]]
 
[[uk:Довідка:Таблиці/вікітекст]]
 
[[zh:Help:Wiki文本/表格的例子]]
 
[[zh:Help:Wiki文本/表格的例子]]
Line 125: Line 125:
 
[[Category:Help]]
 
[[Category:Help]]
 
[[Category:Editing]]
 
[[Category:Editing]]
  +
[[Categor'''fg'''y:So
[[Category:Source editing]]
 

Revision as of 08:00, 28 May 2021

If you want to shape tables with wikitext, you have plenty of options. This one page won't go into them all, but it will sh

File:Mia Williams.jpg

Mia Williams.jpg

ow you how wikitext matches up to HTML markup, the difference a CSS class makes, and an example of a simple table that works on both desktop and mobile devices.

Basic table code

Wikitext is, in many ways, just shortcut for HTML. If you're familiar with HTML, you probably already know how to build a wikitext table. Here's a chart that will help you understand the connection between wikitext and HTML:

Description You type
Begin table
(equivalent to <table>)
{|
Begin table row
(equivalent to <tr>)
|-
Table header (part of a row; equivalent to <th>) ! or !!
Table cell (part of a row; equivalent to <td>) | or ||
End table
(equivalent to </table>)
|}

Fandom's default CSS classes

Deep within Fandom's code lie two classes that you can put at the very start of your table. No matter which wiki you're on, there is always some default formatting for .article-table and .wikitable. If you use VisualEditor, .article-table will be automatically added so that the basic structure of your table will be:

{| class = "article-table"
...
|}

But there are cases where you might consider using .wikitable or no class—instead. Here's what they all look like on a completely un-customized wiki:

Article-table

With .article-table you get a lighter design

Article-table UCP

On UCP wikis, .article-table looks a little different, giving all cells the same background

Wikitable

With .wikitable you get greater definition for each cell

No table class

Without a CSS class, you get neither borders nor header backgrounds

If you are styling tables with CSS customization, it is often best to target the .article-table class to style tables already using the class, as this one is the default.

Technically, another default table class exists at Fandom, called .WikiaTable. However, if unaltered by local CSS declarations, it provides precisely the same styling as .article-table

Basic tables

As explained elsewhere, tables don't always display well on mobile web.

The best approach is to keep things as simple as possible. Look at the following wikitext, and then notice, on your phone, how the table works on that smaller display:

{| class = "article-table"
!Page
!Rank 1
!Rank 2
!Rank 3
|-
|Page A
|1
|2
|3
|-
|Page B
|1
|2
|3
|-
|Page C
|2
|3
|4
|}

...which gives:

Page Rank 1 Rank 2 Rank 3
Page A 1 2 3
Page B 1 2 3
Page C 2 3 4

More advanced table coding

Tables can be made significantly more advanced than the example above. If you want to explore other options for wikitext tables, you could start by consulting the MediaWiki help page for tables. But remember that much of what you'll see in places like mediawiki.org or Wikipedia's help page don't really consider the effects of tables in mobile. It's important to always check your work with tables on an actual phone to see how well it displays for the many mobile readers of your wiki.

It is also possible, in some specific use cases where data needs to be calculated, to use templates or even to use Lua-based templates, both to create pre-existing table structures, or to use templates within cells.

See also

Further help and feedback

tsaar:Yardım:Tablolar/Vikimetin [[Categorfgy:So