↑ arvau

Wikipedia / Help:Table

<templatestyles src="Help:Table/styles.css" />

A table is an arrangement of columns and rows that organizes and positions data or images. Tables can be created on Wikipedia pages using special wikitext syntax, or HTML syntax, and many different styles and tricks can be used to customise them.

Tools

Source mode toolbar

To automatically insert a table, click or (Insert a table) on the edit toolbar. In the Vector toolbar the table icon is in the "Advanced" menu.

The following wikitext is inserted when Insert a table is clicked.

The sample text ("Header text" or "Example") is intended to be replaced with actual data. Row numbers (1-3) and column letters (A-C) have been substituted below to help visualization.

Wikitext Produces:

You can fill in the table while in source mode. Or use the visual editor (VE). To create more complex table structures in source mode with cells that span multiple rows or columns, see .

Visual editor

With the visual editor (VE) you directly fill in the cells without having to go through wikitext. VE makes it easy to add, remove, and rearrange/reorder rows or columns. In VE this is what shows up when clicking the table icon (in the "Insert" menu):For more complex table structures, the visual editor offers cell-merging operations; see details here.

In addition, it is usually possible to add or import a table that exists elsewhere (e.g., in a spreadsheet, on another website) 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.

Using other tools

Other tools, such as those used to create wiki tables from Excel, can be used to create wikitable markup from spreadsheet and database tables. See § External links for a list of some.

Table basics

Tables can be added to articles and other pages using either standard HTML table elements, or with special wikicode markup developed just to facilitate creating tables without a knowledge of HTML.

Markup

  • 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 put 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 with table scope include: class, for example class="wikitable"; or style for CSS styling. Other attributes have row- or column scope, e.g., scope, to indicate row or column header cells; rowspan, to extend cells by more than one row; and colspan, to extend cells by more than one column.

Wikicode syntax tutorial

<templatestyles src="Help:Table/styles.css" />

A table may be created entirely in wikicode using special table markup developed for the purpose. No knowledge of HTML is required.

Begin and end delimiters

Use to begin a table, and |} to end it. Each one needs to be on its own line:

Optional parameters like may be placed on the Begin-table delimiter line. See below.

Caption

An optional table caption is included with a line starting with a vertical bar and plus sign "|+" and the caption after it:

Row start

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.

For details about rows, see below.

Cells

Type the codes for each table cell in the next row, starting with a bar:

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:

Wikitext

Produces

For details about table cells, see below.

Optional parameters

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:

Wikitext

Produces

The table parameters and cell parameters are the same as in HTML, seehttp://www.w3.org/TR/html401/struct/tables.html#edef-TABLE and Table (HTML). However, the , , , , and 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.

in one of the cells. That is what is done here:

is simpler for putting the sorting arrows below the header text in order to narrow a table.

With colspan and rowspan cells can span several columns or rows;

Displaying a pipe character

Displaying a pipe character as part of the text of a table cell requires a workaround. See .

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 "" class which left-aligns the row headers and removes the bolding. Left-alignment of row headers only occurs if class=wikitable and scope=row are both used.

A typical example may be marked up like this:

Wikitext

Produces

Examples

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.

Wikitext

Produces (without borders).

Multiplication table

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.

Wikitext

Produces

Whole table operations

Class

One or more classes may be added to the § Begin-table delimiter line at the top of the table, and may be used to supply predefined style to the table. The wikicode table attribute corresponds directly to the "" attribute of the HTML table> element. To add multiple classes to a table, place them all on the same line, embedded in double quotes and separated by a space:

Some predefined classes are:

  • – provides column headers with bold font on shaded background, and other common style. See here for details. This class should be used for almost all tables, unless there is a reason not to.

  • – adds up & down icons to column headers which enable sorting the table on a given column. See sortable tables.

  • – See collapsible tables.

  • – applies left-aligned and normal-weight formatting of row headers. See Table header layout. Must be placed after wikitable if they both appear in the class declaration.

  • – same as applying to the entire table

  • – same as applying to the entire table

Note: Template:Table may also be used to apply classes to the § Begin-table delimiter line.

Captions and summaries

Explicit table captions (or titles) are recommended for data tables as a best practice; the Wikipedia Manual of Style considers them a high priority for accessibility reasons (screen readers), 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, which does not contain any cells. Captions are always displayed, appearing as a title centered (in most browsers), above the table, outside the table border. A caption can be styled (with inline, not block, CSS), and may include wikilinks, reference citations, etc.

Many article editors dislike table captions when the table is directly below, or not far away from, a similar article heading. But screen reader users still need a table caption to quickly browse from table to table. In this case use the popular template: Template:Screen reader-only. Add the template to the table caption, and then only screen reader users will see it. Example:

For current table caption and summary guidelines see the w3.org page: Caption & Summary, in Tables Tutorial. Web Accessibility Initiative (WAI). The summary info in the paragraph below is out of date:

A 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="", 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 5.

Wiki markup example showing left-aligned caption with a source citation:

Produces

Colspan and rowspan

It is possible to create cells that stretch over two or more columns. For this, one uses |colspan= | . Similarly, one can create cells that stretch over two or more rows. This requires |rowspan= | . In the table code, one must . The resulting column- and row-counting must fit.

Wikitext

Produces

In the code, the cell | colspan="2" | A spans two columns. In the next column, .

Similar: in the code, cell | rowspan="2" | BBB spans two rows. .

Wikitext

Produces

Using rowspan=2 for cell G combined with rowspan=3 for cell F to get another row below G and F won't work, because all (implicit) cells would be empty.

Below is the same table with the order of the declared rows and cells shown in parentheses. The uses of rowspan and colspan are also shown.

Wikitext

Produces Although cell C is in column 2, C is the 1st cell declared in row 3, because column 1 is occupied by cell A, which was declared in row 2. Cell G is the only cell declared in row 5, because cell F occupies the other columns but was declared in row 4.

Table style

A element may be added to apply to the entire table, to all the cells § in a row, or just to individual cells in the table. Adding a style to a column requires a template such as (for horizontal alignment of text).

To add style to the entire table, add the element to the § Begin-table delimiter line at the top of the table. in some cases, it may be better to use the style encapsulated in one of the predefined classes; see .

Horizontal text alignment

Text alignment (right/center/left) for the whole table (except the headers in a table using class=wikitable) can be done at the top line of the table wikitext:

Text alignment for a column can be done with .

Height

The height of the whole table can be specified using standard CSS style properties on the § start table indicator line:

You may also specify the § height of individual rows, and if they add up to more than the table height you specified or if word wrapping increases row height, the table height you specified will be ignored and the table height increased as needed to accommodate all the rows (except on mobile where the bottom of the table will be cut off).

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:

Wikitext

Produces Note the bottom-row texts are centered by style="text-align: center;" to match the centering of the stars in their cells.

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).

Border-collapse: conflicting or double borders

Wikitext

Produces

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:

Wikitext

Produces

Float table left or right

Two table classes floatleft and floatright (case sensitive) help floating the table and adjusting table margins so that they do not stick to the text. floatleft floats the table to the left and adjusts right margin. floatright does the opposite. Example:

Wikitext

As it appears in a browser:

This paragraph is before the table.

Alternatively, you can use CSS to get the same result:

This paragraph is before the table.

Centering tables

To center a table horizontally, use style , which applies to the left and right margins. Text does not flow around centered tables as it does for floated tables; that is, no text appears to either side:

Wikitext

As it appears in a browser:

Text before table......text after table.

Style may be combined with top and bottom margin in the standard way for CSS, e.g. defines top and bottom margins of 1em, and automatic (centered) left and right margins.

Centered tables should generally be avoided in articles. See MOS:TABLELEFT.

Tip: For Android Chrome, use:

Note: align="center" is deprecated in HTML5, and does not work well in Mediawiki software. For example, it will not override the left alignment of tables via class=wikitable.

Static ('sticky') headers

Headers can be frozen so they're always at the top (or left) as one scrolls through a large table. See and .

Nested tables

Nesting data tables with header cells makes it difficult for assistive screen readers to parse them sensibly.

Editors sometimes use headerless tables as an aid to content layout, especially where it is easier than the equivalent use of divs and CSS styling. For complex layouts, rowspan and colspan may be used, but again it is sometimes simpler and more maintainable to use nested tables.

In the following example, five different tables are shown nested inside the cells of a sixth, main table. None has any header cells. Automatically, the two tables |A| and |B|B| are vertically aligned instead of the usual side-by-side of text characters in a cell. float is used to fix each of tables |C| and |D| to their own position within one cell of the table. This may be used for charts and schematics.

Wikitext:

Column operations

There are column and cell operations for width. See Help:Width of tables, columns, and cells.

There are also column, cell, and table operations for text alignment (right, left and center alignment). See Help:Table/Advanced#Column alignment. It is part of a much larger section of info on aligning text in individual table cells, or the table as a whole.

See also: . This template allows easy aligning of text in a column, or multiple columns.

To insert, remove, or rearrange whole columns, see Help:Creating tables#Move/delete row/column. This is much faster and easier to do in the visual editor than in the wikitext editor.

If there are many year columns there is a fast way to rearrange them here: Help:Tables and locations#Put most recent year to left.

To sort some or all columns in a table see Help:Sortable tables.

Width

This is a complex subject. Please see the main page:

Row operations

Table rows are added after the § table start indicator, and after any optional § whole table markup such as a caption, table summary, or § column scope attributes.

Starting a new row

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. An id for § anchoring in-links, and § row style may be included on the same line.

Row style

Row style (height, width, borders, text alignment, background color, bolding, italics, etc.) may be added to a wikitable row by appending CSS style properties to the row start line after the |- indicator.

Here is an example increasing the height of the middle row. The top row has italic text. The last row has bold text and a yellow background. Either the word yellow can be used, or the hex-color (such as: #FFFF00):

Wikitext

Produces

The row also contains an id attribute; this will be explained later in the section about linking directly to a row.

Row headers

With row headers you need to use a separate row in the wikitext for the row header cell. Here below is what a table looks like if the data cell wikitext is on the same line as the row header wikitext. The data cell text is bolded, and the data cell backgrounds are the same shade of gray as the column and row headers.

Wikitext

Produces

Here is the table with a separate wikitext row for each row header cell. The data cells have plain unbolded text, and a lighter background.

Wikitext

Produces

Row numbers

Table rows may be numbered with the assistance of templates provided for the purpose. See Help:Sortable tables sections on row numbers, and these templates:

You can link directly to a row in a wikicode table, by including an id attribute on the line with the § row start indicator whose value is the anchor for the link. For example, you could code:

and then link to it using which produces:

  1. The middle row is the tallest one. (Click to try it out!)

Row template

Regardless of whether wikitable format or HTML is used, the wikitext of the rows within a table, and sometimes even within a collection of tables, may have much in common, e.g.:

  • the basic code for a table row

  • code for color, alignment, and sorting mode

  • fixed texts such as units

  • special formats for sorting

In such a case, it can be useful to create a template that produces the syntax for a table row, with the data as parameters. This can have many advantages:

  • easily changing the order of columns, or removing a column

  • easily adding a new column if many elements of the new column are left blank (if the column is inserted and the existing fields are unnamed, use a named parameter for the new field to avoid adding blank parameter values to many template calls)

  • computing fields from other fields, e.g. population density from population and area

  • duplicating content and providing span tags with display: none; for the purpose of having one format for sorting and another for display

  • easy specification of a format for a whole column, such as color and alignment

Example:

Using

Wikitext

Produces

Conditional table row

For a conditional row in a table, we can have:

Wikitext

Produces

With comments to explain how it works, where note how the second row is missing:

Wikitext

Produces

Cell operations

Setting cell parameters

At the start of a cell, add your parameter followed by a single pipe. For example, style="width: 300px;"| sets that cell to a width of 300 pixels. To set more than one parameter, leave a space between each one.

Wikitext

Produces

Vertical alignment in cells

By default, text is aligned to the vertical middle of the cell (2nd column in table below). CSS can be used to vertically align individual cells, or single rows.

Relevant wikitext:

The example below illustrates the need for top alignment of a row.To align the text to the top of each cell in the row, apply the style="vertical-align: top;" CSS to the row.

Wikitext Produces

Documentation and more options for the CSS vertical-align property is here.

Cell content indenting and padding

The contents of a cell can be indented or padded on any side. Also, the text can be aligned. In the third row the text is aligned to the right. See the following examples.

Wikitext

Produces

Pattern for arguments: The arguments to style="padding: " can be seen as being ordered by a 12-hour clock, starting at noon and going clockwise, in the following sense: "top" is associated with noon (i.e. 12 o'clock, the top of a clock), "right" is 3 o'clock, "bottom" is 6 o'clock, and "left" is 9 o'clock. The arguments are ordered clockwise starting at noon: top right bottom left (see this footnote for an example with an explanation).

This same order is also used elsewhere, such as when specifying § cell borders with border-style: .

Setting default cell padding

Use cellpadding= to set the default padding for each cell in a table. If class=wikitable is used then cellpadding is ignored. The default space between cells can be changed using cellspacing=.

If cellpadding is not used

Wikitext

Produces

Using cellpadding=10:

Wikitext

Produces

Using cellpadding=0:

Wikitext

Produces

Using cellpadding=0 and cellspacing=0:

Wikitext

Produces

Individual cell borders

The same § CSS used for tables can be used in a cell's format specifier (enclosed in |...|) to put a border around each cell:

Wikitext

Produces

Only the image cells have individual borders, not the text. The lower hex-colors (such as: #616161) are closer to black. Typically, all borders in a table would be one specific color.

  1. Border styles

The style='border:' and style='border-style:' properties can accept the following arguments:

  1. Borders of a cell using border-top, border-right, border-bottom, border-left

Wikitext

Produces

  1. Top, right, bottom, and left borders of a cell using style='border-style:'

To set the left, right, bottom, or top border of a single cell, one may use style='border-style:' which takes between 1 and 4 arguments, each of which is either none, solid, double, dotted, dashed, groove, ridge, inset, outset, inherit, or initial.

These arguments are ordered according to the § pattern described here. For instance, style="border-style: solid none solid none;" where the four parameters correspond respectively to the 'border-style: top right bottom left;' borders of the cell. For reasons described after this example, there are many ways to change the following that would result in any changes to the table that is actually .

Wikitext

Produces

Note, however, that in the following table, none of the central cell's (i.e. Middle_Center's) borders are removed despite the code style="border-style: none none none none;":

Wikitext

Produces

This happens because the code class="wikitable" places a border (top, right, bottom, and left) around cell in the table so that, for instance, there are actually borders between the cells "Middle_Center" and "Middle_Right". So to remove the border between cells "Middle_Center" and "Middle_Right", it is necessary to remove both the right border of "Middle_Center" the left border of "Middle_Right":

Wikitext

Produces

To remove selected external borders of a wikitable, both remove them from the adjacent cells and begin the whole table with code like {| class="wikitable" style="border: none;".

Replacing {| class="wikitable" with {| style="border-collapse: collapse;" has the effect of removing all cell borders that would otherwise appear by default around every cell in the table. With this change, you must a cell border between two adjacent cells rather than remove cell borders.

Table cell templates

See for a large set of templates to configure text and color in cells in a standard way, producing stock output. For example: "Yes" (), "No" (), "—" (), "N/A" (), "?" (), on colored backgrounds.For example, see Comparison of text editors, which makes frequent use of table cell templates.

Tooltips

You can add tooltips to columns by using the template. Simply replace the column-title with , which makes it appear like so: . Use (same format) for abbreviations. For example: .

Workarounds

Scrolling tables

See and the following sections for scrolling, sticky headers, and combinations thereof.

Overflowing tables

A horizontal scrollbar for the whole page shows up for any wikitable that is too wide for the screen. To create a scrollbar just for the table the following code may be used. Place the following code above a wikitable initialization:

Then, after the closing bracket for the wikitable, place the following code:

This will prevent the table from causing the entire page to scroll when scrolling through the table horizontally.

For more info see: Template:Sticky header#Known issues.

Non-rectangular tables

can be used to diagonally split a header cell, as in the top-left cell in the rendered result below:

Wikitext Produces

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 |cellcode 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. 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.

Wikitext

Produces

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) (preferred) or 2) html: #124; or #x7C;. Each line of cell code in the following table has one wikicode pipe.

Displaying adjacent pipes

Wikitext

Produces

The magic word , 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 did above:

Common mechanisms that do not work in tables.

Wikitext

Produces

Classes

There are several other CSS classes, besides the basic class=wikitable, documented § above.

In the first line of table code, after the {|, 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 § 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 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 {|. 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:

Wikitext Produces

becomes this:

Wikitext Produces

simply by replacing inline CSS for the table by class=wikitable. This is because the wikitable class in MediaWiki:Common.css contains a number of table.wikitable 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:

Wikitext Produces

Notice that the table retains the gray background of the wikitable class, and the headers are still bold and centered. But now the text formatting has been overridden by the local style= 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.

Indenting tables

While tables should not normally be indented, when their surrounding paragraphs are also indented, you can indent tables using margin-left.

To achieve the same indentation as a colon, use margin-left:1.6em.

Wikitext

Produces

Tables on talk pages

Indentation applied to only the first line of the table wiki text, (the line that begins with "") is sufficient to indent the entire table.

Do not attempt to use colons for indentation anywhere within the rest of the table code (not even at the beginning of a line), as that will prevent the MediaWiki software from correctly reading the code for the table.

Public domain image tables

It may be difficult or time-consuming to convert a table on the web to a wikitable, especially if it can't be copied and pasted into the visual editor or a spreadsheet. It can be even more time-consuming if it is both difficult and regularly updated.

See Commons:Template:PD-chart. Many image tables and charts are in the public domain unless they contain copyrightable things such as photos, etc. Those can be removed.

So if necessary, take a screenshot, crop out the table with any image editor, and upload it to the Wikimedia Commons to it.

See also

Wikipedia:Manual of Style/Tables: the Manual of Style indicates best practices for tables.

Templates

: for specifying tables as a template, allowing inclusion in other templates and areas where table syntax is problematic.

  • Examples:

  • : chess board template.

  • : Go board template.

Some commonly used table templates using TemplateStyles:

  • : makes top header rows sticky.

  • and : makes top and side header rows sticky, and puts table in scroll box.

  • : puts sorting arrows below headers.

  • : rows highlighted via mouse hover. White background otherwise.

  • : aligns text in selected columns.

  • : adds column of fixed row numbers.

Notes

Convert range of cells from Excel to wiki text

Wikimedia sister projects