Editing Help:Table (section)

== Classes ==
{{See Also|Help:User style|Help:CSS}}
There are several other [[Cascading Style Sheets|CSS]] classes, besides the basic <code>class=wikitable</code>, documented [[#Class|§&nbsp;above]].

In the first line of table code, after the <code>{|</code>, instead of specifying a style directly, you can also specify a CSS class, which may be used to apply styles. The style for this class can be specified in various ways:
* in the software itself, per skin (for example the class [[#Sorting|§&nbsp;sortable]])
* collectively for all users of one wiki in [[MediaWiki:Common.css]] (for example, on this and some other projects there is or was the class wikitable, later moved to [http://svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/skins/common/shared.css?view=markup shared.css])
* separately per skin in [[MediaWiki:Monobook.css]] etc.
* individually on one wiki in a user subpage
* individually, but jointly for tables of the class concerned on all web pages, on the local computer of the user.

Instead of remembering table parameters, you just include an appropriate class after the <code>{|</code>. This helps keep table formatting consistent, and can allow a single change to the class to fix a problem or enhance the look of all the tables that are using it at once. For instance, this:

<div class="box">
'''Wikitext'''
<syntaxhighlight lang="wikitext">
{| style="border-spacing: 2px;"
|+ Multiplication table
|-
! scope=col | &times;
! scope=col | 1
! scope=col | 2
! scope=col | 3
|-
! scope=row | 1
| 1 || 2 || 3
|-
! scope=row | 2
| 2 || 4 || 6
|}
</syntaxhighlight></div>
<div class="box">
'''Produces'''
{| style="border-spacing: 2px;"
|+ Multiplication table
|-
! scope=col | ×
! scope=col | 1
! scope=col | 2
! scope=col | 3
|-
! scope=row | 1
| 1 || 2 || 3
|-
! scope=row | 2
| 2 || 4 || 6
|}
</div>

becomes this:

<div class="box">
'''Wikitext'''
<syntaxhighlight lang="wikitext">
{| class=wikitable
|+ Multiplication table
|-
! scope=col | &times;
! scope=col | 1
! scope=col | 2
! scope=col | 3
|-
! scope=row | 1
| 1 || 2 || 3
|-
! scope=row | 2
| 2 || 4 || 6
|}
</syntaxhighlight></div>
<div class="box">
'''Produces'''
{| class=wikitable
|+ Multiplication table
|-
! scope=col | &times;
! scope=col | 1
! scope=col | 2
! scope=col | 3
|-
! scope=row | 1
| 1 || 2 || 3
|-
! scope=row | 2
| 2 || 4 || 6
|}
</div>

simply by replacing inline CSS for the table by <code>class=wikitable</code>. This is because the <code>wikitable</code> class in [[MediaWiki:Common.css]] contains a number of <code>table.wikitable</code> CSS style rules. These are all applied at once when you mark a table with the class. You can then add additional style rules if desired. These override the class's rules, allowing you to use the class style as a base and build up on it:

<div style="display:inline-grid; border: 2px solid; padding: 3px; max-width:30em;">
'''Wikitext'''
<syntaxhighlight lang=wikitext>
{| class=wikitable style="font-style: italic; font-size: 120%; border: 3px dashed red;"
|+ Multiplication table
|-
! scope=col | &times;
! scope=col | 1
! scope=col | 2
! scope=col | 3
|-
! scope=row | 1
| 1 || 2 || 3
|-
! scope=row | 2
| 2 || 4 || 6
|}
</syntaxhighlight></div>
<div class="box">
'''Produces'''
{| class=wikitable style="font-style: italic; font-size: 120%; border: 3px dashed red;"
|+ Multiplication table
|-
! scope=col | &times;
! scope=col | 1
! scope=col | 2
! scope=col | 3
|-
! scope=row | 1
| 1 || 2 || 3
|-
! scope=row | 2
| 2 || 4 || 6
|}
</div>

Notice that the table retains the gray background of the <code>wikitable</code> class, and the headers are still bold and centered. But now the text formatting has been overridden by the local <code>style=</code> statement; all of the text in the table has been made italic and 120% normal size, and the wikitable border has been replaced by the red dashed border.