GeezerVison

When visual editing a page, a table can be inserted at the cursor position via the toolbar's "Table" icon . The icon is located under "Insert" with the label "Table". The following blank table is inserted, which you can then modify:

To help modify the table, the interface displays buttons under the table to delete the table or modify its properties. The "table properties" popup shows the following default options for the inserted table:

Text can be inserted in a selected caption or cell. When a cell is selected, the interface displays buttons to insert, move, or delete rows and columns. When selecting multiple cells, an additional merge or unmerge button appears. Use the format drop-down menu to change selected cells to "Header cell" or "Content cell".

Alternatively, a non-blank table can be inserted in visual editing by highlighting the table and copy-and-pasting or drag-and-dropping the displayed table, like from web pages or in spreadsheets. A .csv file of a table can be drag-and-dropped to insert it. The interface converts those to wikitext and displays the table. However, you cannot paste wikitext or HTML here.

Table modifications are done visually in visual editing, or you can switch to source editing to edit the same table before publishing.

When source editing a page, a basic table can be inserted at the cursor position via the toolbar's "Table" icon . The icon is located under "Advanced", "Insert". This button displays an "Insert table" (properties) popup with the following default settings:

After insert, the following wikitext table is added, which you can then modify:

{| class="wikitable"
|+ Caption text
|-
! Header text !! Header text !! Header text
|-
| Example || Example || Example
|-
| Example || Example || Example
|-
| Example || Example || Example
|}

Alternatively, a table can be inserted manually using wikitext or HTML (discouraged).

Table modifications are done manually in source editing, or you can switch to visual editing to edit the same table before publishing.

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

• Each must start on a new line, except || and !!.
• Leading spaces are ignored.
• Content may follow its cell markup on the same line (after optional HTML attributes) or on subsequent lines. A blank line may introduce a paragraph break, adding extra spacing in the cell. Content requiring a new line, such as a list, must be placed on its own line.

HTML attributes can be used to add information, affecting behavior, appearance, or accessibility. In table markup, they control cell spanning, header associations, and styling.

Attributes generally appear as name–value pairs separated by an equals sign (=) with values enclosed in double quotes (") (e.g., attribute="value value2" attribute2="value3"), though exceptions exist. The style attribute (inline CSS) contains internal CSS property-value pairs separated by colons and semicolons (e.g., style="property: value; property2: value2;"). Each property-value pair is called a declaration. The trailing semicolon is optional, but is a "good style" to do as it prevents forgetting to add it when adding more declarations.

Table markup optionally accepts one or more attributes except for table end (|}). Attributes must be on the same line as the markup.

Cell and caption markup (| or ||, ! or !!, and |+) hold content. Add a pipe (|) after attributes to separate it from the content.

• |+ attribute="value" | Caption
• ! attribute="value" | Header cell or !! attribute="value" | Header cell
• | attribute="value" | Data cell or || attribute="value" | Data cell

Table and row markup ({| and |-) do not directly hold content. Do not add a pipe (|) after attributes.

• {| attribute="value"
• |- attribute="value"

When a vertical bar (|) character is in a table's caption or cell, the parser can misinterpret it as a pipe separator for attributes and content, which can discard preceding text when attributes are absent.

Options:

• Wrap the character in nowiki markup <nowiki>|</nowiki> (preferred).
• Replace the character with its decimal numeric character reference |. Note, {{pipe}} returns this.

Other character references exist where the HTML entites are case-sensitive and the hexadecimal numeric is case-sensitive in XML/XHTML.

See {{nowrap}} for template info.

Note: Avoid misuse of the magic word {{!}}. It is expanded to its character before table parsing.

In visual editing, entering a vertical bar character in a cell automatically escapes the cell's content (e.g., <nowiki>Pipe (|)</nowiki>). In source editing, under "Advanced", the "No wiki formatting" icon can be used.

In source editing, a table can be inserted manually using wikitext or HTML (discouraged). The following produce the same table:

{| class="wikitable plainrowheaders"
|+ Rock paper scissors game
|-
! scope="col" | Choice
! scope="col" | Fingers
! scope="col" | Defeats
|-
! scope="row" | Rock
| style="text-align: center;" | 0
| Scissors
|-
! scope="row" | Paper
| style="text-align: center;" | 5
| Rock
|-
! scope="row" | Scissors
| style="text-align: center;" | 2
| Paper
|}

<table class="wikitable plainrowheaders">
  <caption>Rock paper scissors game</caption>
  <tr>
    <th scope="col">Choice</th>
    <th scope="col">Fingers</th>
    <th scope="col">Defeats</th>
  </tr>
  <tr>
    <th scope="row">Rock</th>
    <td style="text-align: center;">0</td>
    <td>Scissors</td>
  </tr>
  <tr>
    <th scope="row">Paper</th>
    <td style="text-align: center;">5</td>
    <td>Rock</td>
  </tr>
  <tr>
    <th scope="row">Scissors</th>
    <td style="text-align: center;">2</td>
    <td>Paper</td>
  </tr>
</table>

The MediaWiki software translates table wikitext into the following HTML:

• {|: table start tag <table>.
• |+: caption element <caption>...</caption>.
• |-: row element <tr>...</tr>.
• ! or !!: header cell element <th>...</th>.
• | or ||: data cell element <td>...</td>.
• |}: table end tag </table>.

Note: HTML tables are discouraged, per MOS:TABLES. The <thead>, <tbody>, <tfoot>, <colgroup>, and <col> HTML elements are not supported.

HTML attributes are unchanged. When a pipe (|) character separates attributes from content, it is used as a delimiter, placing the attributes inside the opening tag.

The caption indicates this table is about the Rock paper scissors game. The table has 4 rows and 3 columns. The top row has column headers (Choice, Fingers, and Defeats) with scope="col", meaning each header describes the cells below it. The left column has row headers (Rock, Paper, and Scissors) with scope="row", meaning each header describes the cells to its right. The table uses the recommended wikitable class, which applies general styling such as left-aligned data cells with a light gray background, and center-aligned, bold header cells with a gray background. The plainrowheaders class was added to left-align the scoped row headers without bold, leaving the gray background to visually indicate headers. Additionally, the numbers in the "Fingers" column are the same length and narrow, so they are center-aligned using style="text-align: center;".

One or more class HTML attribute values may be added to the table start markup, and may be used to supply predefined style to the table. Separate them Place them on the same line, embedded in double quotes and separated by a space:

{| class="wikitable sortable mw-collapsible"

Some predefined classes are:

• wikitable – 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.
• sortable – adds up and down icons to column headers which enable sorting the table on a given column. See sortable tables.
• mw-collapsible – See collapsible tables.^{[note 1]}
• plainrowheaders – applies left-aligned and normal-weight formatting of row headers. See Table header layout. Used with wikitable class.
• floatright – same as applying style="float: right; clear: right; margin-left: 8px" to the entire table
• floatleft – same as applying style="float: left; clear: left; margin-right: 8px" to the entire table

Note: Template:Table may also be used to apply classes to the table start markup.

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. Add caption markup after the table start markup before any rows. It displays at the top of the table outside the border, and is centered in desktop browsers or left aligned in mobile browsers. 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 {{sro}} template: Template:Screen reader-only. Add the template to the table caption, and then only screen reader users will see it.

For example:

|+ {{sro|Table caption}}

For current table caption and summary guidelines see the w3.org page: Caption & Summary, in Tables Tutorial. Web Accessibility Initiative (WAI).

{| class="wikitable"
|+ style="text-align: left;" | Data reported for 2014–2015, by region<ref name="Garcia 2005"/>
|-
! 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
|}

Note: The related summary attribute is obsolete, use the table caption to replace.

It is possible to create cells that stretch over two or more columns. For this, one uses |colspan=n | content. Similarly, one can create cells that stretch over two or more rows. This requires |rowspan=m | content. In the table code, one must leave out the cells that are covered by such a span. The resulting column- and row-counting must fit.

{| class="wikitable" style="text-align: center;"
!col1
!col2
!col3
!col4
|-
!row1
| colspan="2" | A
<!-- column counting: cell 'B' can not exist -->
|C
|-
!row2
|AA
|BB
|CC
|-
!row3
|AAA
| rowspan="2" | BBB
|CCC
|-
!row4
|AAAA
<!-- row counting: cell 'BBBB' can not exist -->
|CCCC
|}

In the code, the cell | colspan="2" | A spans two columns. In the next column, a cell expected to contain "B" does not exist.

Similar: in the code, cell | rowspan="2" | BBB spans two rows. A cell expected to contain "BBBB" does not exist.

{| class="wikitable"
|-
! Column 1 !! Column 2 !! Column 3
|-
| rowspan="2" | A
| colspan="2" style="text-align: center;" | B
<!-- column 3 of this row occupied by cell B (which is to the left) -->
|-
<!-- column 1 of this row occupied by cell A (above) -->
| C
| D
|-
| E
| rowspan="2" colspan="2" style="text-align: center;" | F
<!-- column 3 of this row occupied by cell F (to the left) -->
|-
| G
<!-- columns 2 and 3 of this row occupied by cell F (above) -->
|-
| colspan="3" style="text-align: center;" | H
<!-- columns 2 and 3 of this row occupied by cell H (to the left) -->
|}

Using rowspan=2 for cell G combined with rowspan=3 for cell F to get another row below G and F will not 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.

{| class="wikitable"
|-
! Column 1<br>(row 1 cell 1) !! Column 2<br>(row 1 cell 2) !! Column 3<br>(row 1 cell 3)
|-
| rowspan="2" | A<br>(row 2 cell 1)<br><code>rowspan=2</code>
| colspan="2" style="text-align: center;" | B<br>(row 2 cell 2)<br><code>colspan=2</code>
|-
| C<br>(row 3 cell 1) <!-- column 1 occupied by cell A -->
| D<br>(row 3 cell 2)
|-
| E<br>(row 4 cell 1)
| rowspan="2" colspan="2" style="text-align: center;" |F<br>(row 4 cell 2)<br><code>rowspan=2 colspan=2</code>
|-
| G<br>(row 5 cell 1) <!-- column 2+3 occupied by cell F -->
|-
| colspan="3" style="text-align: center;" | H<br>(row 6 cell 1)<br><code>colspan=3</code>
|}

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.

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:

{| class="wikitable" style="text-align: right;"
 ...
|}

Text alignment for a column can be done with {{table alignment}}.

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

{| class="wikitable" style="height: 14em;"
  . . .
|}

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

For tables not using the recommended wikitable class (adds borders), plain table borders can be added to the table start markup with the border: thickness style color; style (e.g., border: 3px dashed red;).

If borders are added to cells and the double border look is undesirable, then replace the border-spacing style with border-collapse: collapse;. The wikitable class applies this style and borders too.

This example uses a solid (non-dashed), gray border that is one pixel wide:

{| style="border-spacing: 2px; border: 1px solid darkgray;"
! style="width: 140px;" | Left
! style="width: 150px;" | Center
! style="width: 130px;" | Right
|-
| [[File:Starred.svg |120px| center]]
| [[File:Star full.svg |120px| center]]
| [[File:Stargreen.svg |120px| center]]
|- style="text-align: center;"
| Red star || Orange star || Green star
|}

Produces

Left	Center	Right
Red star	Orange star	Green star

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

Note: The related border, cellpadding, and cellspacing attributes are obsolete, use CSS to replace.

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.

This paragraph is before the table. 
[[File:Starred.svg |120px|right]]
{| class="wikitable floatleft"
|+ Caption text
|-
! Header A !! Header B !! Header C
|-
| row 1 A || row 1 B || row 1 C
|-
| row 2 A || row 2 B || row 2 C
|}

{| class="wikitable floatright"
|+ Caption text
|-
! Header A !! Header B !! Header C
|-
| row 1 A || row 1 B || row 1 C
|-
| row 2 A || row 2 B || row 2 C
|}
... Lorem text after table
{{clear}}

As it appears in a browser:

This paragraph is before the table.

Vestibulum sapien nisl, ornare auctor, consectetuer quis, posuere tristique, odio. Fusce ultrices ullamcorper odio. Ut augue nulla, interdum at, adipiscing non, tristique eget, neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut pede est, condimentum id, scelerisque ac, malesuada non, quam. Proin eu ligula ac sapien suscipit blandit. Suspendisse euismod. Ut accumsan, neque id gravida luctus, arcu pede sodales felis, vel blandit massa arcu eget ligula. Aenean sed turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sem eros, ornare ut, commodo eu, tempor nec, risus. Donec laoreet dapibus ligula. Praesent orci leo, bibendum nec, ornare et, nonummy in, elit. Donec interdum feugiat leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque feugiat ullamcorper ipsum. Donec convallis tincidunt urna.

Note: Centered tables should generally be avoided in articles, per MOS:TABLELEFT. The guidance below applies primarily to other namespaces.

To center a table horizontally, use the margin: 1em auto; style, which applies 1em (equal to parent's font size) to the top and bottom, and automatic (split remainder equally) to the left and right sides of the table. Text does not flow around centered tables as it does for floated tables; that is, no text appears to either side:

Text before table...
{| class="wikitable" style="margin: 1em auto; border: none;"
|+ Centered table
|-
! Duis !! aute !! irure
|-
| dolor || in reprehenderit || in voluptate velit
|-
| esse cillum dolore || eu fugiat nulla || pariatur.
|}
...text after table

As it appears in a browser:

Text before table...

...text after table.

Tip: For Android Chrome, use:^{[note 2]}

{| style="margin: 1em auto; border: none;"

Note: The related align attribute is obsolete, use CSS to replace.

Headers can be frozen so they are always at the top (or left) as one scrolls through a large table. See {{Sticky header}} and {{Sticky table start}}.

Because they cause accessibility issues, header cells in nested tables should be avoided whenever possible. For accessibility, any complicated table must be carefully designed to maintain normal flow (i.e., content order should match intended presentation order). 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.

Nested tables must start on a new line.

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.

{| style="border: 1px solid black;"
| style="border: 1px solid black;" | α
| style="border: 1px solid black; text-align: center;" | cell2
{| style="border: 2px solid black; background: #ffffcc; color: inherit;" <!-- The nested table must be on a new line -->
| style="border: 2px solid darkgray;" | NESTED
|-
| style="border: 2px solid darkgray;" | TABLE
|}
| style="border: 1px solid black; vertical-align: bottom;" | the original table again
| style="border: 1px solid black; width: 100px" |
{| style="border: 2px solid black; background: #ffffcc; color: inherit;"
| style="border: 2px solid darkgray;" | A
|}
{| style="border: 2px solid black; background: #ffffcc; color: inherit;"
| style="border: 2px solid darkgray;" | B
| style="border: 2px solid darkgray;" | B
|}
| style="border: 1px solid black; width: 50px" |
{| style="border: 2px solid black; background: #ffffcc; color: inherit; float: left"
| style="border: 2px solid darkgray;" | C
|}
{| style="border: 2px solid black; background: #ffffcc; color: inherit; float: right"
| style="border: 2px solid darkgray;" | D
|}
|}

Row style properties (height, width, borders, text alignment, background color, bolding, italics, etc.) can be added after the row markup.

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

{| class="wikitable" 
|-
! Left !! Center !! Right
|- style="font-style: italic;"
| Top left || Top center || Top right 
|- style="height: 9em;" id="mid"
| Middle left || Middle center || Middle right 
|- style="font-weight: bold; background-color: yellow; color: inherit;"
| Bottom left || Bottom center || Bottom right 
|}

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

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:

• {{Static row numbers}}
• {{Row numbers}}

You can link directly to a table's row, by including an id attribute on the row markup, whose value is the anchor for the link.

For example, you can add this:

|- id="mid"

and then link to it using The [[#mid|middle row]] is the tallest one. which produces:

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

For headers in data tables, the col or row scope clearly identifies a header cell as applying to the cells below it in its column(s) or to the right in its row(s), respectively. These scopes help ensure a consistent experience for screen readers. When header relationships are unclear, this can cause accessibility issues, so the id and headers attributes are used (see MOS:DTT#Complex tables).

Note: Do not use the colgroup or rowgroup scopes (see MOS:DTAB).

The wikitable class applies general styling such as center-aligned, bold header cells with a gray background. The plainrowheaders class can be added to left-align the scoped row headers without bold, leaving the gray background to visually indicate headers.

{| 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
|}

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.

| style="vertical-align: top" | Top-aligned
| style="vertical-align: middle" | Middle-aligned
| style="vertical-align: bottom" | Bottom-aligned

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.

{| class="wikitable"
|- style="vertical-align: top"
! scope="row" | Row header
| A longer piece ...
| Short text
|}

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

Note: The related valign attribute is obsolete, use CSS to replace.

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.

{| class="wikitable"
|-
| Cell content that is not indented or padded
|-
| style="padding-left: 2em;" | <code>style="padding-left: 2em;"</code>
|-
| style="text-align: right; padding-right: 2em;" | <code>style="text-align: right; padding-right: 2em;"</code>
|-
| style="padding-top: 2em;" | <code>style="padding-top: 2em;"</code>
|-
| style="padding-bottom: 2em;" | <code>style="padding-bottom: 2em;"</code>
|-
| style="padding: 3em 5%;" | <code>style="padding: 3em 5%;"</code> {{space|4}} (Top and Bottom: 3em. Left and Right: 5%)
|-
| style="padding: 3em 4em 5%;" | <code>style="padding: 3em 4em 5%;"</code> {{space|4}} (Top: 3em. Left and Right: 4em. Bottom: 5%)
|-
| style="padding: 3%;" | <code>style="padding: 3%;"</code> {{space|4}} (Top, Right, Bottom, and Left: all 3%)
|-
| style="padding: 1em 20px 8% 9em;" | <code>style="padding: 1em 20px 8% 9em;"</code> {{space|4}} (Top: 1em. Right: 20px. Bottom: 8%. and Left: 9em.)
|}

The padding shorthand property values relates to the sides of a box and can be seen as ordered by a 12-hour clock, starting at noon and going clockwise, in the following sense: "top" is associated with noon (i.e., "top" is 12 o'clock), "right" is 3 o'clock, "bottom" is 6 o'clock, and "left" is 9 o'clock). The values are ordered clockwise starting at noon: top → right → bottom → left (see this^{[note 3]} footnote for an example with an explanation).

Similar shorthand properties exist, such as margin.

Note: The related cellspacing and cellpadding attributes are obsolete, use CSS to replace.

The same § CSS used for tables can be used in cell markup to put a border around each cell:

{| style="border-spacing: 2px; border: 1px solid darkgray;"
! style="width: 140px;" | Left
! style="width: 150px;" | Center
! style="width: 130px;" | Right
|- style="text-align: center;"
| style="border: 1px solid blue;"|
[[File:Starred.svg |120px]]
| style="border: 1px solid #777777;"|
[[File:Star full.svg |120px]]
| style="border: 1px solid #22AA55;"|<!-- greenish border -->
[[File:Stargreen.svg |120px]]
|- style="text-align: center;"
|Red star || Orange star || Green star
|}

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

Border styles

The border and border-style properties can accept the following values:

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

{| 
! style="border-top: solid;" | <code>style="border-top: solid;"</code>
|-
| style="border-top: solid 2px red; border-right: dashed 3px green; border-bottom: double 5px blue; border-left: dotted 6px yellow;" |<pre>border-top: solid 2px red;
border-right: dashed 3px green;
border-bottom: double 5px blue;
border-left: dotted 6px yellow;</pre>
|}

border-top: solid 2px red;
border-right: dashed 3px green;
border-bottom: double 5px blue;
border-left: dotted 6px yellow;

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 values, each of which is either none, solid, double, dotted, dashed, groove, ridge, inset, outset, inherit, or initial.

These values 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 wikitext that would not result in any changes to the table that is actually displayed.

{| class="wikitable"
|-
| Top_Left
<!-- border-style: top right bottom left; -->
| style="border-style: solid solid none none;" | Top_Center
| Top_Right
|-
| style="border-style: none none solid solid;" | Middle_Left
| style="border-style: none none none none;" | Middle_Center
| style="border-style: solid solid none none;" | Middle_Right
|-
| Bottom_Left
| style="border-style: none none solid solid;" | Bottom_Center
| Bottom_Right
|}

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

{| class="wikitable"
|-
| Top_Left || Top_Center || Top_Right
|-
| Middle_Left
| style="border-style: none none none none;" | Middle_Center
| Middle_Right
|-
| Bottom_Left || Bottom_Center || Bottom_Right
|}

This happens because class="wikitable" places a border (top, right, bottom, and left) around every cell in the table so that, for instance, there are actually two 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" and the left border of "Middle_Right":

{| class="wikitable"
|-
| Top_Left || Top_Center || Top_Right
|-
| Middle_Left
<!-- 'border-style: top right bottom left;' -->
| style="border-style: none none none none;" | Middle_Center
| style="border-style: none none none none;" | Middle_Right
<!-- In the above line, the three left-most "none" values can be replaced with "solid" (or other valid values) and there would be no change to the table that is displayed. Only the fourth value, which is Middle_Right's left border, needs to be "none". For example, the line above could be replaced with:
| style="border-style: solid solid solid none;" | Middle_Right
-->
|-
| Bottom_Left || Bottom_Center || Bottom_Right
|}

To remove selected external borders of a table, both remove them from the adjacent cells and begin the whole table with: {| 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 insert a single cell border between two adjacent cells rather than remove two cell borders.

See {{table cell templates}} for a large set of templates to configure text and color in cells in a standard way, producing stock output. For example: "Yes" ({{Yes}}), "No" ({{No}}), "—" ({{N/A}}), "N/A" ({{N/A|N/A}}), "?" ({{dunno}}), on colored backgrounds.

For example, see Comparison of text editors, which makes frequent use of table cell templates.

You can add tooltips to columns by using the {{Tooltip}} template. Simply replace the column-title with {{Tooltip|Column title|The tool tip}}, which makes it appear like so: Column title. Use {{abbr}} (same format) for abbreviations (e.g., Pop).

See Help:Advanced table features § Scrolling tables and the following sections for scrolling, sticky headers, and combinations thereof.

A wide table that overflow past the main content container can overlap UI elements, and a horizontal scrollbar displays at the bottom of the page. To fix this, wrap the table in a div with the noresize class, which makes the table horizontally scrollable within the main content area, per mw:Help:Tables#Note about large tables (noresize class).

Place the following div markup around the table:

<div class="noresize">
{|
...
|}
</div>

Caption is centered on non-mobile versions, so super wide tables on narrow screens can make it fully or partially hidden. Left align the caption so it has maximum visibility without needing to scroll to realize it exists, or break the table into smaller ones.

|+ style="text-align: left;" | Caption

See Template:diagonal split header to split the content of specific cells.

Concerning colons on talk pages, see comments here from a blind editor (Graham87) who uses a screen reader. Scroll down to the table comments. It also verifies the previous section above.

Only applying indentation before the table start markup is sufficient to indent the entire table.

:::{| class="wikitable"

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

• Category:Table templates: templates that affect or use tables.
• Category:Multi-column templates: templates for using columns without tables.
• Category:Chart, diagram and graph templates
• Category:Chart, diagram and graph formatting and function templates
• Category:Wikipedia template editors
• {{Help:Table/example row template}}: demonstrates producing a row of cells with two numbers divided.
• {{List to table}}: template and its maintenance category: Category:Articles requiring tables
• {{Horizontal TOC}}: good for country lists in table format.
• {{Table TOC}}: horizontal TOC for links to parts of tables.
• {{Diagonal split header}}: for identifying both rows and columns, in a diagonally split top-left cell (also {{Diagonal split header 2}})
• {{Table}}: template for specifying table CSS classes such as "wikitable" and "collapsible"
• {{Alternating rows table}}
• {{Screen reader-only}}: for a table caption directly below a section heading, or table description.
• {{Aligned table}}: for specifying tables as a template, allowing inclusion in other templates and areas where table syntax is problematic.
  • Examples:
  • {{Chess diagram}}: chess board template.
  • {{Goban}}: Go board template.

Some commonly used table templates using TemplateStyles:

• {{Sticky header}}: makes top header rows sticky.
• {{Sticky table start}} and {{Sticky table end}}: makes top and side header rows sticky, and puts table in scroll box.
• {{Sort under}}: puts sorting arrows below headers.
• {{Mw-datatable}}: rows highlighted via mouse hover. White background otherwise.
• {{Table alignment}}: aligns text in selected columns.
• {{Static row numbers}}: adds column of fixed row numbers.

• Editing Wikitext/Tables at Wikibooks
• Editing Wikitext/Tables Ready to Use at Wikibooks
• mw:Help:Tables: MediaWiki help page on tables.
• mw:Help:Sortable tables: MediaWiki help page on sortable tables.
• mw:Table background colors: MediaWiki help page on table background colors.
• Commons:Chart and graph resources: Chart and graph resources at Commons
• Commons:Convert tables and charts to wiki code or image files: includes information on converting table markup.
• Commons:Template:SVG Chart. Convert list/table to SVG line chart.
• Commons. Convert US list/table to state-by-state SVG map.