کؤمک:جدول - ویکی‌پدیا
پرش به محتوا
ویکی‌پدیادان، آچیق بیلیک‌لیک‌دن
ویکی‌پدیانین کؤمک صفحه‌سی
شابلون:SHORTDESC:ویکی‌پدیانین کؤمک صفحه‌سی
{{#switch:
style considerations اوچون،
Wikipedia:Manual of Style/Tables
باخ. accessibility اوچون،
Wikipedia:Manual of Style/Accessibility/Data tables tutorial
باخ.
بو کؤمک صفحه‌سی بیر
نئجه-ائتمک تعلیماتی
دیر.
بو، ویکی‌پدیا دا نئجه عمل ائتمک یا ویکی‌پدیانین بعضی قایدالاری و تجروبه اولونموش طرزلری حاقیندا معلومات وئریر. بو،
ویکی‌پدیانین سیاست و یا تعلیماتلاریندان
بیری دئییل، و موختلیف
ایجماع
یوخلاما
سویه‌لرینی عکس ائتدیره بیلر.
قیسایول
H:TABLE
بورادا یئنی؟
خوش گلدینیز!
بۇ صفحه‌نین ساده‌لشدیریلمیش نوسخه‌سی
کؤمک:ویکی‌جدول
-ده وار.
ویکی‌لشدیرمه
سورعتلی اؤیرنمه
بوتون ویکی‌لشدیرمه‌لر
سس فایللاری
ویژوال فایللاری
جدوللر
شابلونلار
(سورعتلی تعلیمات)
ویکی‌متن داخیلینده اچ‌تی‌ام‌ال کودلارین ایستیفاده‌سی
دان
دییش
جدول
وئریلنلری و یا شکللری تشکیل ائدن و یئرلشدیرن سۆتون و سطیرلرین دۆزولوشودور. جدوللر ویکی‌پدیا صفحه‌لرینده خوصوصی
ویکی‌متن
قرامری ایله یارادیلا بیلر و اوْنلاری فردیلشدیرمک اۆچون چوْخلو مۆختلیف اۆسلوب و حیله‌لردن ایستیفاده ائدیله بیلر.
جدوللر فورمتلاشدیرما ابزاری کیمی ایستیفاده ائدیله بیلر، لاکین عوضینه
چوخ سۆتونلو لیست
ایستیفاده ائتمه‌یی دۆشونون.
ابزار پانلیندن ایستیفاده
دَییشدیر
In source mode
دَییشدیر
Vector toolbar – default
Monobook toolbar
جدولی اوتوماتیک داخیل ائتمک اۆچون دییشدیرمه ابزارلار پانلینده
و یا
(جدول داخیل ائت) اۆزرینه کلیکله‌یین. In the Vector toolbar the table icon is in the "Advanced" menu. If "Insert a table" is not on the toolbar follow
these directions
to add it.
The following text is inserted when
Insert a table
is clicked:
{| class="wikitable"
|+ عونوان متنی
|-
! باشلیق منتی !! باشلیق منتی !! باشلیق منتی
|-
| میثال || میثال || میثال
|-
| میثال || میثال || میثال
|-
| میثال || میثال || میثال
|}
This code produces the following table:
عونوان متنی
باشلیق منتی
باشلیق منتی
باشلیق منتی
میثال
میثال
میثال
میثال
میثال
میثال
میثال
میثال
میثال
The sample text ("Header text" or "Example") is intended to be replaced with actual data. You can fill in the table while in source mode. Or use the visual editor (VE).
In visual editor
دَییشدیر
With the
visual editor
(VE) you directly fill in the cells without having to go through wikitext. See the
VE section
farther down. VE makes it easy to add or delete rows or columns. In VE this is what shows up when clicking the table icon (in the "Insert" menu):
In addition, if you need to add or import a table that exists elsewhere (e.g., in a spreadsheet, on another website), it is usually possible to import that directly into the visual editor by:
dragging and dropping a
.csv
file into the visual editor, or
selecting, copying, and pasting the table into the visual editor.
Basic table markup summary
دَییشدیر
آیریجا باخ:
Help:Basic table markup
Table element
Wikitext
Required
Usage notes
Table start
{|
Required
Table caption
|+
Optional
Only between table start and first table row.
Table row
|-
Optional
Can be omitted before the first row.
Table header cell
Optional
Consecutive table header cells may be added on same line separated by double marks (
!!
); or start on new lines, each with its own single mark (
).
Table data cell
or
||
Optional
Consecutive table data cells may be added on same line separated by double marks (
||
) or start on new lines, each with its own single mark (
). This mark is also used to separate
HTML attribute
s from cell and caption contents.
Table end
|}
Required
The above marks must
start on a new line
, except the double marks (
||
and
!!
) for optionally adding consecutive cells to a single line.
Blank spaces
at the beginning of a line are ignored.
Content
may either follow its cell mark on the same line (after any optional HTML attributes); or on lines below the cell mark (beware of undesired paragraphs though). Content that uses wiki markup that itself needs to start on a new line, such as with lists, headings, or nested tables, must be on its own new line.
To insert a
pipe character
) into a table caption or cell, use the
nowiki
/nowiki
escaping markup.
HTML attributes
دَییشدیر
Each mark, except table end (
|}
), optionally accepts one or more
attributes
. Attributes must be on the same line as the mark.
Cells
and
captions
or
||
or
!!
, and
|+
) hold
content
—separate any attribute from its content with a single pipe (
), with attributes preceding content.
Table
and
row
marks (
{|
and
|-
) do not directly hold content. Do
not
add a pipe (
) after any attributes.
Commonly included attributes in tables include:
class
, for example
class="wikitable"
style
, for
CSS
styling;
scope
, to indicate row or column header cells;
rowspan
, to extend cells by more than one row;
colspan
, to extend cells by more than one column.
Pipe syntax tutorial
دَییشدیر
an introduction to HTML and tables اوچون،
Help:Table/HTML and tables
باخ.
Although HTML table syntax also works, special
wikicode
can be used as a shortcut to create a table. The
vertical bar
or "pipe" symbol (
) codes function exactly the same as
HTML table
markup, so a knowledge of HTML table code helps understand pipe code. The shortcuts are as follows:
The entire table is encased with curly brackets and a vertical bar character (a pipe). So use
{|
to begin a table, and
|}
to end it. Each one needs to be on its own line:
{|
table code goes here
|}
An optional
table
caption
is included with a line starting with a vertical bar and plus sign "
|+
" and the caption after it:
{|
|+
caption
table code goes here
|}
To start a new
table
row
, type a vertical bar and a
hyphen
on its own line: "
|-
". The codes for the cells in that row start on the next line.
{|
|+
The table's caption
|-
row code goes here
|-
next row code goes here
|}
Type the codes for each
table cell
in the next row, starting with a bar:
{|
|+
The table's caption
|-
cell code goes here
|-
next row cell code goes here
next cell code goes here
|}
Cells can be separated with either a new line and a single bar, or by a double bar "
||
" on the same line. Both produce the same output:
Wiki source
{|
|+ The table's caption
|-
|Cell 1 || Cell 2 || Cell 3
|-
|Cell A
|Cell B
|Cell C
|-
|Cell x
|Cell y||Cell z
|}
Rendered result
The table's caption
Cell 1
Cell 2
Cell 3
Cell A
Cell B
Cell C
Cell x
Cell y
Cell z
Optional
parameters
can modify the display and styling of cells, rows, or the entire table. The simplest way to add styling is to set the
wikitable
CSS
class, which in Wikipedia's
external style sheet
is defined to apply a gray color scheme and cell borders to tables using it:
Wiki source
{| class=wikitable
|+ The table's caption
! Column header 1
! Column header 2
! Column header 3
|-
! Row header 1
| Cell 2 || Cell 3
|-
! Row header A
| Cell B
| Cell C
|}
Rendered result
The table's caption
Column header 1
Column header 2
Column header 3
Row header 1
Cell 2
Cell 3
Row header A
Cell B
Cell C
The table parameters and cell parameters are the same as in
اچ‌تی‌ام‌ال
, see
and
Table (HTML)
. However, the
thead
tbody
tfoot
colgroup
, and
col
elements are currently
not supported in MediaWiki
بو تاریخدن: دسامبر ۲۰۲۱
بروزرسانی
A table can be useful even if none of the cells have content. For example, the background colors of cells can be changed with cell parameters, making the table into a diagram, like
meta:Template talk:Square 8x8 pentomino example
. An "image" in the form of a table is much more convenient to edit than an uploaded image.
Each row must have the same number of cells as the other rows, so that the number of columns in the table remains consistent. For empty cells, use the zero width space
​
or older non-breaking space
 
as content to ensure that the cells are displayed.
With
colspan
and
rowspan
cells can span several columns or rows;
شابلون:See below
Rendering the pipe
دَییشدیر
When cell
content
that contains a
pipe
character does not render correctly, simply add an empty format for that cell. The second pipe character in a line of
cell
code
will not display; it is reserved for adding a format. Wikicode between the first and second pipe is a format, but since emptiness or an error there is ignored, it just disappears. When this happens, add a dummy format.
(For a real format, see
HTML attributes
.)
Use a third pipe character to render your first pipe character.
Rendering the first pipe when it is the third pipe in the cell code.
Wiki source
{| class=wikitable
|-
''
formatting
''
|P|i|p|e|
|C|e|l|l|2|
|-
''
formatting
''
|P|i|p|e
||''
formatting
''
|C|e|l|l|2|
|-
||
P|i|p|e|s
||
C|e|l|l|2|
|}
Rendered result
P|i|p|e|
e|l|l|2|
P|i|p|e
C|e|l|l|2|
P|i|p|e|s
e|l|l|2|
The third and later pipe characters will render, but to display two
adjacent
pipe characters in a cell, (instead of having them act as the first pipe at the start of a new cell), other pipe-rendering options are needed. Instead of using a dummy format to render a pipe, you can render it directly by 1)
nowiki
nowiki
(preferred) or 2)
html
#124;
or
#x7C;
. Each line of cell code in the following table has one wikicode pipe.
Displaying adjacent pipes
Wiki source
{|
class=wikitable
|-


Pipes34:

||

|-
|
Pipes34:
||
|}
Rendered result
Pipes34:
||
Pipes34:
Template
{{
}}
, because of the order in which things are parsed, is equivalent to typing in a single | pipe character. The single
nowiki />
parser-tag does not apply here. See how they do not
escape
the second pipe, as
#124 and
nowiki
nowiki
did above:
Common mechanisms that do not work in tables
Wiki source
{|
class=wikitable
|-
/>
|Pipe3:|
|-
|Pipe2:{{!}}Pipe3:{{!}}
|}
Rendered result
Pipe3:|
Pipe3:
Scope
دَییشدیر
Column headers
are identified by
! scope="col" |
instead of
Row headers
are identified by
! scope="row" |
instead of
. Each header cell should be on a separate line in the wiki-markup. The
scope="col"
and
scope="row"
markup should be used for column and row headers in all data tables because it explicitly associates the header with the corresponding cells, which helps ensure a consistent experience for screen readers. The Manual of Style
requires the use of scope for column and row headers
For
complex tables
, when a header spans two columns or rows, use
! scope="colgroup" colspan="2" |
or
! scope="rowgroup" rowspan="2" |
respectively to clearly identify the header as a column header of two columns or a row header of two rows. When headers are unclear, this can cause accessibility issues; therefore, use
id=
to set a unique value without spaces on each header, then reference the id(s) on the data cells that have unclear headers using
headers=
with a space separating each id.
Header cells typically render differently from regular cells, depending on the browser. They are often rendered in a bold font and centered. If this rendering is not desired from an aesthetic point of view, the table can be styled with the "plainrowheaders" class which left-aligns the row headers and removes the bolding.
A typical example may be marked up like this:
Wiki source
{| class="wikitable plainrowheaders"
|+ The table's caption
! scope=col | Column header 1
! scope=col | Column header 2
! scope=col | Column header 3
|-
! scope=row | Row header 1
| Cell 2 || Cell 3
|-
! scope=row | Row header A
| Cell B || Cell C
|}
Rendered result
The table's caption
Column header 1
Column header 2
Column header 3
Row header 1
Cell 2
Cell 3
Row header A
Cell B
Cell C
Row headers
دَییشدیر
Note that with row headers you need to use a separate row in the wikitext for the row header cell. See the correct format in the last table in the previous section. Note the use of single and double pipes (bars).
Here below is what the same table (without
class=plainrowheaders
) looks like if the data cell wikitext is on the same line as the row header wikitext. Note that the data cell text is bolded, and the data cell backgrounds are the same shade of gray as the column and row headers. Data cells should normally have plain unbolded text, and a lighter background.
Wiki source
{| class=wikitable
|+ The table's caption
! scope=col | Column header 1
! scope=col | Column header 2
! scope=col | Column header 3
|-
! scope=row | Row header 1 || Cell 2 || Cell 3
|-
! scope=row | Row header A || Cell B || Cell C
|}
Rendered result
The table's caption
Column header 1
Column header 2
Column header 3
Row header 1
Cell 2
Cell 3
Row header A
Cell B
Cell C
If you have a long wiki table in the above format and want to quickly make the data cell backgrounds lighter, then use
Excel2Wiki
Copy the table right off the page (not the wikitext) and paste it into Excel2Wiki. Remove the table caption text for now. Check the following boxes:
format first row as header
format first column as header
Check or uncheck "sortable" depending on your needs. Then click "Convert". Copy the wikitext results back to the wiki. You must use
class=wikitable
to get the background shading.
Excel2Wiki fixes the problem by putting the row header cells on separate lines in the wikitext. You will have to add back the scopes to make
class=plainrowheaders
(if desired) work, and get non-bolded row header text.
Wiki source
{| class=wikitable
|+ The table's caption
! Column header 1 !! Column header 2 !! Column header 3
|-
! Row header 1
| Cell 2 || Cell 3
|-
! Row header A
| Cell B || Cell C
|}
Rendered result
The table's caption
Column header 1
Column header 2
Column header 3
Row header 1
Cell 2
Cell 3
Row header A
Cell B
Cell C
Another way to fix the problem is to copy the table wikitext to a text editor such as freeware NoteTab Light. The following method works for tables with flag templates. In the table wikitext do a mass replace of
}}||
with
}}^P|
^P
is the NoteTab Light code for a line break. That puts the row header cells on a separate line in the wikitext. And you don't lose your flags, templates, classes, scopes, styling, etc.. And you maintain most of the compressed wikitext format.
Simple straightforward tables
دَییشدیر
Minimalist table
دَییشدیر
Both of these generate the same output. Choose a style based on the number of cells in each row and the total text inside each cell.
Wiki source
{|
|-
| A
| B
|-
| C
| D
|}
{|
|-
| A || B
|-
| C || D
|}
Rendered result (note that there are no borders).
Multiplication table
دَییشدیر
Note that in this example
class="wikitable"
is used to style the table with Wikipedia's external style sheet for tables. It adds borders, background shading, and bold header text.
Wiki source
{| class=wikitable style="text-align: center;"
|+ Multiplication table
|-
|-
| 1 || 2 || 3
|-
| 2 || 4 || 6
|-
| 3 || 6 || 9
|-
| 4 || 8 || 12
|-
| 5 || 10 || 15
|}
Rendered result
Multiplication table
12
10
15
Whole table operations
دَییشدیر
Captions and summaries
دَییشدیر
علاوه معلومات:
Wikipedia:Manual of Style/Accessibility/Data tables tutorial §
Proper table captions and summaries
Explicit table
captions
are recommended for data tables as a best practice; the Wikipedia Manual of Style
considers them a high priority
for accessibility reasons, as a caption is explicitly associated with the table, unlike a normal wikitext heading or introductory sentence. All data tables on Wikipedia require captions. A caption is provided with the
|+
markup, similar to a table row (
|-
), but it does not contain any cells, and is not within the table border. Captions are always displayed, appearing as a title centered (in most browsers), above the table. A caption can be styled (with inline, not block, CSS), and may include wikilinks, reference citations, etc.
summary
provides an overview of the data of a table for text and audio browsers, and does not normally display in graphical browsers. The summary (also a high Manual of Style priority for tables) is a synopsis of content, and does not repeat the caption text; think of it as analogous to an image's
alt
description. A summary is added with
summary="
Summary text here.
, on the same line as the
{|
that opened the table, along with any
class=
and other parameters for the table as a whole.
The
summary=
attribute is, however,
obsolete in HTML
Wiki markup
example showing left-aligned caption with a source citation:
{| class=wikitable
|+ style="text-align: left;" | Data reported for 2014–2015, by region

|-
scope=col | Year !! scope=col | Africa !! scope=col | Americas !! scope=col | Asia & Pacific !! scope=col | Europe
|-
scope=row | 2014
| 2,300 || 8,950 ||
''9,325''
|| 4,200
|-
scope=row | 2015
| 2,725 ||
''9,200''
|| 8,850 || 4,775
|}
Rendered result
Data reported for 2014–2015, by region
[99]
Year
Africa
Americas
Asia & Pacific
Europe
2014
2,300
8,950
9,325
4,200
2015
2,725
9,200
8,850
4,775
Width
دَییشدیر
Note:
width=X
is obsolete in
HTML 5
, and so it could eventually be ignored by
مدیاویکی
. See:
Wikipedia: HTML 5#Table attributes
. Use CSS styles instead: Such as
style="width: Xpx;"
or
style="width: Xem;"
or
other CSS units
See width examples on this
subpage
There it is easier to narrow the browser window and not lose one's place as on a long page such as here on Help:Table. Overall table width does not act the same on Wikipedia mobile view as it does on mobile view on webpages outside Wikipedia. See the subpage examples. Note there that CSS max-width does not work for overall table width.
Setting widths is discouraged for the most part on Wikipedia because it interferes with the ability of the browser to adjust content to suit the browser window, device size, zoom settings, user-end font size choices, and other constraints. Verbose notes columns are almost always a problem, especially when there are more than a few other columns. Editors frequently try to make the notes column wider, which messes up the other columns. For this reason, verbose notes columns should be avoided, or the notes should be shortened and links to longer notes below the table should be added instead.
style=max-width:Xem
can be used in table headers. The following table excerpt is from
this version
of
List of countries by wealth per adult
. The goal is to
narrow the data columns,
and have the
country names spread out on one line each.
All of this makes it easier when scanning down a country list. But the country names have to wordwrap if needed (in narrow portrait views on some cell phones, etc.). So
style=max-width:Xem
was used in selected column heads. It also avoids using header line breaks


which annoy people using
screen readers
due to the pauses.
Em units
are good because they increase in size along with the zoom setting. Here is the relevant header wikitext:
! Country or [[subnational area]]
! style=max-width:4em | Median wealth per adult ([[آمریکا دولاری]])
! style=max-width:4em | Mean wealth per adult ([[آمریکا دولاری]])
! style=max-width:4em | Adult population
شابلون:Static row numbers
Country or
subnational area
Median wealth per adult (
آمریکا دولاری
Mean wealth per adult (
آمریکا دولاری
Adult population
شابلون:DRC
382
1,084
37,100,000
شابلون:MOZ
352
880
13,814,000
sorting row
narrows some of the table columns further. See
Help:Sortable tables
|-{{sorting row|4}}
شابلون:Static row numbers
Country or
subnational area
Median wealth per adult (
آمریکا دولاری
Mean wealth per adult (
آمریکا دولاری
Adult population
شابلون:DRC
382
1,084
37,100,000
شابلون:MOZ
352
880
13,814,000
Here below is what the table looks like without
style=max-width:Xem
and
{{sorting row|4}}
Narrow your browser window to see how the table below contracts versus the ones above. The table above maintains one line per country for narrower browser and screen widths, and is therefore more readable in long country tables. The table format below can greatly increase in number of lines, and require more vertical scrolling.
شابلون:Static row numbers
Country or
subnational area
Median wealth per adult (
آمریکا دولاری
Mean wealth per adult (
آمریکا دولاری
Adult population
شابلون:DRC
382
1,084
37,100,000
شابلون:MOZ
352
880
13,814,000
Height
دَییشدیر
The height of the whole table can be specified, as well as the height of a row. The height of the middle row below is set to
style=height:7em
and the total height of the whole table is set to
style=height:14em
units. Doing the math shows that the height of the top and bottom rows are 3.5 em units each. 3.5 + 3.5 + 7 = 14. If there is wordwrap then the height will increase to accommodate this.
Wiki markup
{| class=wikitable style=height:14em;
|-
! Left !! Center !! Right
|-
| Top left cell || Top center cell || Top right cell
|- style=height:7em
| Middle left cell || Middle center cell || Middle right cell
|-
| Bottom left cell || Bottom center cell || Bottom right cell
|}
Rendered result
Left
Center
Right
Top left cell
Top center cell
Top right cell
Middle left cell
Middle center cell
Middle right cell
Bottom left cell
Bottom center cell
Bottom right cell
Setting borders
دَییشدیر
Note:
Wikipedia:HTML 5#Table attributes
. CSS to replace obsolete attributes for borders, padding, spacing, etc.
Add a border around a table using the CSS property
border:
thickness style color
, for example
border:3px dashed red
. This example uses a solid (non-dashed) gray border that is one pixel wide:
Wiki source
{| style="border-spacing: 2px; border: 1px solid darkgray;"
! style="width: 140px;" | Left
! style="width: 150px;" | Center
! style="width: 130px;" | Right
|-
[[File:StarIconBronze.png|120px|Bronze star icon]]
[[File:StarIconGold.png|120px|Gold star icon]]
[[File:StarIconGreen.png|120px|Green star icon]]
|- style="text-align: center;"
| Bronze star
||
Gold star
||
Green star
|}
Rendered result
Left
Center
Right
Bronze star
Gold star
Green star
Note the bottom-row texts are centered by
style="text-align: center;"
while the star images are not centered (i.e. left aligned).
As long as the
File:
specs omit the parameter
|thumb
they don't show the caption lines in the table (only during mouse-over). The border color
darkgray
matches typical tables or infoboxes in articles; however, it could be any color name (as in
style="border: 1px solid darkgreen;"
) or use a
hex-color
(such as:
#DDCCBB
).
Borders of every cell in a table
دَییشدیر
Wiki source
{| border=1
|-
| A || B || C
|-
| D || E || F
|}
Rendered result
If all cells have the same border color, the resulting double borders may not be wanted; add the
border-collapse: collapse;
CSS property on the table opening tag to reduce them to single ones (
cellspacing=...
is
obsolete
).
Additionally, the
W3C
allows
the use of the otherwise obsolete
border=
attribute on the table root (
{|
) if its value is "1". This adds a one-pixel border, in the default color, to the table and all of its cells at once:
Using the
border-collapse
property to combine the double borders, as described above:
Wiki source
{| border=1 style="border-collapse: collapse;"
|-
| A || B || C
|-
| D || E || F
|}
Rendered result
Side by side tables
دَییشدیر
You can place two or more tables side by side. But the tables must wrap (one dropping below the other) in narrow screens if horizontal scrolling is to be avoided. Here is the relevant wikitext below. More info
here
div
style
display:inline-table
--Table--
div
div
style
display:inline-table
--Table--
div
Note that the space between the tables happens because