RSS
Логотип
Баннер в шапке 1
Баннер в шапке 2
2010/06/22 17:22:08

FAQ: Execution of tables

Standard execution of tables in Wikipedia is reached by use of several standard CSS classes specified in the first line of the table.

Content

Classes of an execution of tables

All following classes add small empty distance to each cell at the left and on the right (padding-left: 0.2em; padding-right: 0.2em).

wikitable

The standard class creating the table with thin borders between all cells and with the illuminated headings. Also adds vertical indents in cells (padding-top: 0.2em; padding-bottom: 0.2em).

 
{| class="wikitable"
|-
! Heading 1 ||heading 2|| heading 3 
|-
| Cell 1*1|| Cell 2*1|| Cell 3*1
|-
| Cell 1*2|| Cell 2*2|| Cell 3*2
|-
| Cell 1*3|| Cell 2*3|| Cell 3*3
|}
Heading 1 heading 2 heading 3
Cell 1*1 Cell 2*1 Cell 3*1
Cell 1*2 Cell 2*2 Cell 3*2
Cell 1*3 Cell 2*3 Cell 3*3

standard

The most often found class of tables in the Russian-language section of Wikipedia. wikitable except for vertical indents is identical.

It is desirable to use such style of a design for the majority of the tables located directly in the text of article.

 
{| class="standard"
|-
! Heading 1 ||heading 2|| heading 3 
|-
| Cell 1*1|| Cell 2*1|| Cell 3*1
|-
| Cell 1*2|| Cell 2*2|| Cell 3*2
|-
| Cell 1*3|| Cell 2*3|| Cell 3*3
|}
Heading 1 heading 2 heading 3
Cell 1*1 Cell 2*1 Cell 3*1
Cell 1*2 Cell 2*2 Cell 3*2
Cell 1*3 Cell 2*3 Cell 3*3

wide

Differs from standard only in what stretches the table on all width of the page.

{| class="wide"
|-
! Heading 1 ||heading 2|| heading 3
|-
| Cell 1*1|| Cell 2*1|| Cell 3*1
|-
| Cell 1*2|| Cell 2*2|| Cell 3*2
|-
| Cell 1*3|| Cell 2*3|| Cell 3*3
|}
Heading 1 heading 2 heading 3
Cell 1*1 Cell 2*1 Cell 3*1
Cell 1*2 Cell 2*2 Cell 3*2
Cell 1*3 Cell 2*3 Cell 3*3

tiles

Differs from standard in lack of grid lines and shadowing of normal cells. Do not use it for tables to which it is possible to apply some of two previous styles without visualization loss. For example, Mendeleyev's table can be an example of justified application.

{| class="tiles"
|-
! Heading 1 ||heading 2|| heading 3
|-
| Cell 1*1|| Cell 2*1|| Cell 3*1
|-
| Cell 1*2|| Cell 2*2|| Cell 3*2
|-
| Cell 1*3|| Cell 2*3|| Cell 3*3
|}
-1 XLIFFService: Sequence contains no elements
Heading 1 heading 2 heading 3
Cell 1*1 Cell 2*1 Cell 3*1
Cell 1*2 Cell 2*2 Cell 3*2
Cell 1*3 Cell 2*3 Cell 3*3

simple

This class changes only a grid of borders between cells, doing it same, as in standard; it makes sense only with nonzero border. Compare:

border is simple
{| border="1"
u1 u2 u3
Cell 1*1 Cell 2*1 Cell 3*1
Cell 1*2 Cell 2*2 Cell 3*2
Cell 1*3 Cell 2*3 Cell 3*3
-1 XLIFFService: Sequence contains no elements with the class simple:
{| class="simple" border="1"
Heading 1 heading 2 heading 3
Cell 1*1 Cell 2*1 Cell 3*1
Cell 1*2 Cell 2*2 Cell 3*2
Cell 1*3 Cell 2*3 Cell 3*3

Classes of a design of cells

Any cell of the table or all line can be illuminated or shaded, for this purpose it is necessary for a cell or a line to set the parameter of class= "tip_vydeleniye".

There are two standard classes of illumination and two types of shadowing.

for heading for a normal cell
highlight
bright -1 XLIFFService: Sequence contains no elements
shadow -1 XLIFFService: Sequence contains no elements
dark

To make a cell background transparent, use class= "transparent".

  • For headings it is recommended to use highlight illumination, if necessary to select more important heading — bright. If there is a need to lower importance of heading, it is possible to use shadowing.
  • For selection of groups of normal cells it is recommended to use shadowing (at first shadow, if necessary — dark). If it is necessary to select one-two cells, it is possible to use illumination.

If in any cell it is required to set a certain background color, set it here so: style= "background-color: color;" (see the color lookup table). It is recommended to use this opportunity only if specific color, but not just logical selection of a part of cells is necessary.

The following tables (class standard) are intended for check that the classes described above correctly are processed by your browser. In the left columns the specified class is used, in right color is set by style of a design directly in the code of the page. Colors should match at the left and on the right.

cell
  #FFFFFF
highlight #FFFFEE
bright #FFEECC
shadow #F0F0F0
dark #CCCCCC
cell in line
  #FFFFFF
highlight #FFFFEE
bright #FFEECC
shadow #F0F0F0
dark #CCCCCC
heading
  #EEEEFF
highlight #EEEEFF
bright #CCCCFF
shadow #F0F0F0
dark #CCCCCC
heading in line
  #EEEEFF
highlight #EEEEFF
bright #CCCCFF
shadow #F0F0F0
dark #CCCCCC


Classes of interactivity of tables

These additional classes add to tables interactivity using JavaScript.

collapsible

Subject
Heading 1 heading 2 heading 3
Cell 1*1 Cell 2*1 Cell 3*1
Cell 1*2 Cell 2*2 Cell 3*2
Cell 1*3 Cell 2*3 Cell 3*3

Allows "displace" the table, leaving only headings. It is added to any other class, for example  { |   class= "standard collapsible"

sortable

Allows to sort table columns. It is added to any other class, for example:

{| class="standard sortable"
|-
! Latin ||Cyrillics|| of class= "unsortable"|Digits
|-
| D || Г || 3 
|-
| E || Щ || 2
|-
| F || Б || 11
|}
-1 XLIFFService: Sequence contains no elements
Latin CyrillicsDigits
D Г 3
E Щ 211
F Б 11

To make a column not sorted, add the class unsortable to the selected cell in table heading.

Implementation of classes

wikitable originally appeared in the English section of Wikipedia, was copied in several other sections and in several years in rev: 48842 it was added directly to MediaWiki.

prettytable also existed in the English section and wikitable except for color of heading was identical. Now it is recognized as outdated and it is in large quantities replaced with wikitable bottom.

Other classes of an execution of tables and cells were thought up and are used only in the Russian-language section of Wikipedia.

sortable and other classes of sorting are defined in MediaWiki.

collapsible and other classes of turning are present at many projects of Fund, but specific implementation can differ.