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 |} |
|
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 |} |
|
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 |
|
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"
| -1 XLIFFService: Sequence contains no elements | with the class simple :
{| class="simple" border="1"
|
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 |
|
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.