Editing Wikitext/Tables

Tables allow us to structure data on a screen into neat rows and columns. This is useful in many situations. In fact, many other box-like structures on web pages use tables as their basis.

Wikitext tables are based closely on HTML tables. If you are familiar with HTML, you may be happy to learn that you can use HTML tables in Wiki pages. However, the wiki markup code, as it is called, uses fewer characters and does not use closing tags. Wikitext tables are quite basic in their simplest form, but like their HTML equivalents, they can be formatted to an enormous extent by the addition of HTML attributes and CSS styles. This page explains how to make tables.

For those who just need a quick Wikitext or HTML table that they can modify for their work, refer to ../Tables Ready to Use/.

Basic layout
Here is a basic table example:

Wikitext Table Symbols

 * Outer curly bracket-and-pipe symbols denote a table.
 * Pipe-and-hyphen symbols denote a new row.
 * Pipe symbols on their own denote a data cell.
 * Exclamation marks denote heading cells.
 * Pipe-and-plus symbols denote a table caption.

Notice that the table has been given standard borders and formatting by using ; without this, tables are less clearly formatted. Properties defined elsewhere, in a Wiki style sheet in fact, have centered the heading cells and made them bold. The same default conditions have made the table's background color white, the text black, and placed its caption at the top.

Notice also that the columns of the basic table expand to accommodate the widest text. If some table cells are to be left blank then columns might become very narrow. Users often place special hidden characters into cells to expand such columns. The character used is the non-breaking space, &amp;nbsp;, so called because its original intention was to keep any two words together that are linked by it.

These simple tables do not have any margins around them to space them from other text. To make sure that they do not get mixed up with these other parts of the page they can be preceded and followed with the code   The template clear often exists to do the same thing with less markup. This makes sure that both the table and any text that follows it start on new lines of their own. Tables can also include margin styles that perform this spacing.

This simple table code, or any other used in the examples can be can be copied and pasted into the Sandbox or into other pages for testing and extension. To extend such a table, just add more rows and data cells.

Alternative Layout
There are two other table layouts that work in Wiki pages; both make identical tables to the basic one shown above. The first listing is fairly similar but writes the cell code for a row in one single line. Note that there is a double pipe symbol used for a cell separator:  When heading cells are arranged in this way, double exclamations are used instead of double pipes.

The second listing is the HTML equivalent of a wikitext table, and is sometimes easier to use when such a table is to be displayed by a template. It is a fact that the pipe symbols of Wiki tables can conflict with other such symbols in templates, and the use of HTML tables is one method of avoiding such problems. When HTML tables are used, they have more liberal syntax rules; for example, they can have line-spacing between their elements whereas wikitext tables cannot.

Technical note: ''It might be as well to know that HTML tables can be made in some HTML editors, and that these are often provided free on the internet. The internet also provides the use of HTML-to-Wikitext converters for code, but not for the opposite conversion. So, for the few cases where both a Wikitext and an HTML version of the same table are needed, it might be best to make the HTML version first, then simply convert it to Wiki''.

The term seen in the code, class="wikitable", is called an HTML attribute, and applies the standard formatting rules for a wikitable to make these examples more clear. Notice also that the formats differ slightly; the HTML table's styles are placed within the opening element tag, while the Wiki styles are just written after the  symbol. Attributes and other styles are discussed in the next section.

More Notes on Layout

 * Table elements that start on new lines can be indented.
 * Line spacing between such elements is not generally permitted.
 * Tables have modifying HTML attributes of their own, e.g. border, width, and align, etc., as do most HTML elements.
 * Additionally, tables can be changed with classes, IDs, and styles. See later.
 * Tables to be displayed in templates are best made with HTML.
 * Wiki heading cells have built-in styles; they are already bold and centered.

HTML tables need text in their cells to be properly displayed. If a blank cell is intended then entering a non-breaking space, &amp;nbsp;, avoids problems.

CSS Styles
The simple tables shown above can be used just as they are, but their users will likely need to apply some extra formatting sooner or later. To extend a table's structure, many just add new rows with their cells, or extra cells in existing rows. These methods have merit, since colors and formats can be preserved. When a more ambitious table is needed then the information in this section will be found useful.
 * Table styles are sets of instructions or rules that add formats to the work,.
 * Styles can be specified and named in style-sheet lists called classes. Then a class- declaration is made in the table line, that is, writing the class name calls it into use. The effect of doing so is to apply all of the styles in the named class to the table.  An example of such a table class declaration is.
 * Styles can also be fully specified within tables; these are called inline styles, and provided that they are written in the appropriate part of the table, they can override styles contained in classes declared in the table line.
 * Users of Wikitext make use of inline styles because there are few useful classes to format tables; the writing of new style-sheet classes would be the preferred method but, by necessity, this activity is in the domain of administrators.
 * Style rules can be used to format all of the table's parts.
 * HTML attributes can be used too, but their formats differ from those of CSS styles. Many are now obsolete, so always consider CSS first.
 * Styles and attributes can be used in conjunction to good effect.

The general formats for writing these styles can be found in the drop-box Style Formats below and a summary of properties can be found in another. The sections of this page contain numerous code examples that illustrate how styles are placed for a given effect, and the reader new to the subject is advised to follow the wording of the code for the best understanding. More on the precedence of styles can be found in the Wikibooks page The CSS Cascade, though the work might be more than is needed for a basic understanding.

Numerous examples of HTML tables and their Wikitext equivalent coding can be seen on the page Tables Ready to Use. At times it is easier to understand a particular point from such examples, or to recall details already learned.

Style Rule Priorities
When styles for similar formats are written into the various parts, (elements), of a table, it is possible for one set of formats to be in conflict with another set. In general, any formats closer to the cell text will supersede similar formats further away from it.

For example, if the background color of a table is set to red using a style expression in the table line, then another expression in a cell could specify the cell color blue. A row's color could be specified differently also. Subject to the rules of priority, only some parts would be affected and the remaining parts of the table would retain the color set for them in the table line. These simple priorities are listed here:


 * Styles written in cells supersede similar styles applied at row or table level.
 * Styles written in rows supersede similar styles applied at table level.
 * A CSS Style is given priority over an HTML attribute  when both are at the same level.  For example, if a CSS margin property places a table near the left margin of the page, then the additional centering of the table with the attribute align would be disregarded.   Although these formats are not identical, the implied CSS positioning has priority over that of the attribute at the same level.
 * Attributes can sometimes have priority. This can happen only if the attribute is at a table level that is closer to the text.  For example: if a table level CSS style sets text to be right-aligned, and a cell attribute centers it, the cell will have centered text while the rest of the table will be right-aligned.
 * A class declaration's CSS styles can be modified by in-line CSS styles at the appropriate level in the table, though attributes cannot override these. Attributes can of course apply to styles not specified by the class at all.  The nature of classes is described in the WikiBooks page Class and Style Notes.

If these priorities seem complicated, they are easier to understand in practice. In the following table a number of text colors are applied at each of the table, row, and cell levels. To help understand the basic hierarchy, refer to the code module below while following these points.
 * The default color for a table's text is black.  This is not apparent from the code but is a consequence of the Wiki style sheet.
 * A CSS class declaration,, applies various styles to the table all at once, including a gray background.  It also uses a black text color.
 * A table style applies red text to the whole table. Without other code, all text would be red.
 * A row style applies blue text to the second row and green to the third. Because the rows have higher priority than the table, they change the text colors.
 * A cell style applies maroon text for two cells. The cell levels have more priority than the table or row and can change certain parts even more.
 * The closer the style is to the text, the higher its priority in setting formats. Further formats applied directly to the data with HTML tags or wikitext are also possible.

What you type
{| class="wikitable" style="color:red;" | style="color:maroon;"|A1 : Maroon Cell Style |A2 : Red Table Style | style="color:maroon;"|B1 : Maroon Cell Style |B2 : Blue Row Style | C1 : Green Row Style | C2 : Green Row Style | D1 : Red Table Style | D2 : Red Table Style
 * - style="color: blue;"
 * - style="color: green;"
 * }

What you get
This description of CSS priorities has been limited deliberately. The setting of CSS priorities is complex and is determined by various factors. The place that styles are written within the web page or its various style-sheets has an affect, the so-called source of the styles, and there is a hierarchy for these sources. For example, user style-sheet important styles are set higher than any author styles. Additionally, within each collection of styles that exists from a certain source, there are further priorities set; these follow complex rules of precedence; (IDs higher than classes and classes higher than element styles, etc.). There is also a rule for duplicated styles that are in conflict, and at times, it is only the browser's work sequence that decides which of various similar styles is to be used. An overview of how CSS priorities work for web pages is given in The CSS Cascade.}}

The Table Parts
Tables coding needs a basic knowledge of the table spaces.

The table spaces are just the main table elements and the adjustable parts within it. This short section explains the terminology of the table and gives some idea of the nature of its formatting.

Refer to the drop-box The Table Design Spaces for the text.

Borders
Borders are used to set the table from the other parts of the page, and are often used for decoration.

Borders can be set for the whole table at once, or for any individual part of it. The thickness, style, and color of these borders can all be specified, and there are even rules for the four individual sides.

This section describes the various options available for making borders and attempts to introduce a few of the lesser known formats. Refer to the drop-box Border Styles for a summary of border styles.


 * The example below has various borders.  Initially, there are no all-round borders on this basic table.   An outer border is set for the table perimeter, and various borders are set for the bottom of the individual cells.   In addition, the background color of the whole table has been changed to lightyellow, then the heading color changed after that to brown.   The text color of the headings has been set to white to give better contrast against the new background.   Follow the details in the example below:

What you type: What you get

Cell Spacing

 * Cell spacing refers to the space that surrounds each cell in a table. It is also called border spacing .
 * It can be made to be zero, but it is more often set to some practical value to space the cells apart, and to improve the layout.
 * Sometimes the borders can be made to overlap and this is called collapsed borders.
 * At times the horizontal and vertical spacings can be made different.
 * There are two methods in use for spacing borders; the HTML attributes method and the CSS styles method.
 * Spacings can only be written into the table line.


 * Mixing style and attribute methods can cause confusion for borders and spacing.
 * Large tables are best used with HTML attributes since they reduce work.


 * This cellspacing method produces its best appearance for borders made with the border attribute.
 * In this method, applying a value for cellspacing separates the borders appropriately.  Setting a value of zero for these  thin internal borders gives a fairly similar result to the collapsed borders seen in CSS styles, and has a neat appearance for little effort.   If the cellspacing attribute is omitted altogether a small amount of spacing is nonetheless added.
 * The borders made with the border attribute are compound.  That is, they are always made from two different colors.   In HTML the two colors can be specified, but in wikitext they cannot.   The default state sets a lighter color for the bottom and right borders, and the darker color for the left and top.
 * The borders made with attributes apply to the whole table, including the table perimeter. When the value is varied, the outside perimeter changes but the inside borders retain a nominal value.
 * When more elaborate borders are needed, the border styles must be used, and to space them the corresponding border-spacing properties are preferred.

These are examples of the cellspacing attribute.

Cellspacing Attribute Notes

 * The attribute cellspacing is simple to use.
 * Use cellspacing for large tables to reduce work.
 * If the cellspacing attribute is omitted, a small default spacing is applied.
 * The method nearly collapses attribute-set borders with cellspacing=0. For truly collapsed borders, i.e., borders that are overlapped, use CSS styles. See below.
 * Thin internal borders made with border=1,nonetheless look reasonable with cellspacing=0, especially when the alternative CSS method involves much work.

Both formats give results as follows:

The same example using thin borders looks like this:

Separated borders can have uniform or non-uniform spacing:

In the first coding form, there is uniform border spacing given by the single figure. In the second form the two figures produce horizontal and vertical spacings respectively. The non-uniform results are as follows:

The same example using thin borders looks like this:

The separated borders state can place borders side-by-side by setting the spacing to zero. For completion these cases for thick and thin borders are shown:

The same example using thin borders looks like this:

Borders made with the border attribute should use the cellspacing attribute to collapse or space its borders. Similarly, CSS spacing should be used with borders made with CSS. Confusion can arise in attempting to integrate these two methods.

Problems sometimes occur with the cellspacing attribute. For example, when a table is to be displayed as the parameter of a template, the template is likely to fail. To avoid it, the table should be made in HTML, the cellspacing attribute should be removed, and the CSS styles should be used instead. In addition, wikitext should be changed to HTML. At other times the attribute form can be useful since it gives a good effect for little coding work. }}

Cell Padding

 * Cell padding refers to the space that surrounds the text in a cell. It can also be applied to a table, to pad the space just inside its perimeter.
 * Padding is maintained even when the cell width changes.
 * Single words of text are usually handled with alignment rather than padding.
 * All four sides of a cell can be padded differently.
 * Table padding can be applied in some browsers provided that the borders are not collapsed.
 * There are two methods for padding; the HTML attributes method and the CSS styles method.
 * Attributes are written in the table line, and the CSS styles are written in the cell or the table line, depending on the formatting intention.

Use attributes and styles

 * Cell styles and the table attribute cellpadding can be used together in the same table without confusion.
 * Uniform cell padding for cells uses the HTML attribute cellpadding in the table line.
 * Non-uniform padding for cells uses styles in the cell lines.
 * Table padding of any kind needs a style in the table line, but can only be used without difficulty when the borders are separated. Some browsers, for example Internet Explorer 6, will not render padding set in the table line at all, though both Opera and Firefox will do so.

The HTML attributes method
These are examples of the cellpadding attribute. 

Cellspacing Attribute Notes

 * The attribute cellpadding is simple to use.
 * The attribute applies uniform padding to cells only.

Coloring
Background coloring can be done for the whole table, or for individual cells. So also for the coloring of text. When cellspacing is used the table background property sets the color between the cell borders and the cell background the colors within. A selection of color names is provided in the drop-box. Should more color data be needed during design work, call any or all of the drop-box templates Lightcolors, Mediumcolors, Darkcolors, or Greycolors directly into the sandbox.

The CSS color styles
The style rule to set both the background and text colors is typically:

where background is the background color of the element and color is the color of text.

These colors can be set in any of the table, row, or cell elements, and follow the usual CSS style priorities discussed previously.

There are at least three ways to specify a color:
 * Use the color name, for example; red, blue, mistyrose, etc.
 * Use the RGB value for the color; for example; RGB(140,100,65).
 * Use the HEX notation for the color; for example, (includes the semi-colon);

To further emphasise the point, the following three style expressions for black text on a beige-like background are equivalent:

Note that the use of the HEX notation has a trailing semi-colon. Since a semi-colon is also used as a separator for style rules, it is entirely likely that two semi-colons will appear in code together. Neither of these should be omitted.

Spanning
Tables that have the same number of columns in each row, and for the sake of argument, the same number of rows in each column, are referred to as uniform tables. However, non-uniform tables can be made by merging cells, that is referred to in wikitext and HTML as spanning.

What you get
}

Colspan notes

 * Styles are separated from data with a pipe symbol.
 * HTML attributes border and colspan use an equals sign separator.
 * Colspan can be thought of as reaching to the right.
 * The spanned cells should be omitted in code.
 * Inconsistent values do not extend the table.

Similarly, we can do the same thing with rows:

What you type


Rowspan notes

 * Styles are separated from data with a pipe symbol.
 * HTML attributes border and rowspan use an equals sign separator.
 * Rowspan can be thought of as reaching downwards.
 * The spanned cells should be omitted in code.
 * Inconsistent values do not extend the table.

Row spans with column spans
The two attributes rowspan and colspan can be combined to simultaneously span vertically and horizontally:

Mixed span notes

 * Rowspan and colspan attributes can be applied to the same cell.
 * Spans between cells can be made only for comparable joining dimensions.
 * The spanned cells should be omitted in code.
 * Removal of spanned cells must not cause a row to be empty. For example, an attempt to further form a rowspan between H and L would require that the cell L as the last remaining cell in the row, be removed, and the join would fail.

Width and Height
There are three distinct behaviours for tables when content is added to the cells; this assumes that there is more that a few characters.


 * The first case is the most common; that is, for unformatted text. That is, text that depends on the software to wrap its lines.
 * The second kind of behaviour is for pre-formatted text within pre-formatting tags, or the addition of box-like structures, such as other tables or images.   This second set is characterised as having default widths or assigned widths of their own.
 * The third kind of table content is a very long character string without spaces in it, of the kind sometimes seen in program listings.

These three cases are explained in more detail below.

Unformatted Text Behaviour
Consider the case of unformatted text. When the width settings of a table and its cells are not set in code, the text added to cells causes the cells and table to expand to the full width of the page before any text wrapping takes place. In the absence of width settings a full-width table might be produced.

When the width of a table and the widths of its cells are fully specified, the cell text will start to wrap when the text of individual cells reaches their cell borders. Then, at some stage with increasing text, the cell will extend downward, while maintaining its width setting. This behaviour is apparent even when the height of cells has been specified.

Formatted Text and Boxes
Consider the case where the cell contents have either a default width or a preset width of their own. Let us assume that the content is to be an image. Whether or not the widths of the cells are set in code, the image will expand the cell to accommodate itself. If the table width was set then the other cells might even be narrowed or extended in height to maintain the intended table width and its contents. When the table width cannot be maintained in this way, the table is extended, perhaps beyond the right margins of the page. This behaviour is often seen for text in pre-formatted text tags. To avoid these problems simply limit the content's width, within its own coding.

Long Text Strings without Spacing
Table cells often contain code listings as text so that users can see how code is written. Some of these code lines are quite long and ordinarily would be wrapped in the width set for the table. However, because unspaced text is treated as a single word, the table cannot break it in the middle for wrapping. In this case the table is extended, regardless of the width settings. This lack of wrapping can be a puzzle elsewhere, even where long-line wrapping has been planned. The problem is avoided by placing an adequate number of spaces in long text strings. For example, a CSS style expression allows spaces at many points, provided that they are not placed immediately before either a semi-colon or a full-colon.

Relative Width Example

 * Width uses absolute units like pixels, or relative units like percentage.
 * Relative units are useful since the page width need not be known.
 * Relative width relates to a percentage of the page's width in the case of a table, or to the table if the width setting is for a cell.
 * Height need never really be fixed, though it sometimes helps to give some minimum height to the work.

A table set with relative widths can be seen below. The table is set to occupy half of the page width, ( width=50% ),  and the two leftmost columns are each to take up twenty-five percent of that. Note that the cell widths are to become twenty-five percent of whatever width is given to the table, and that neither the width of the page nor the eventual width of the table need ever be known. The image uses its own dimensions to occupy the remaining width and is also centered with its own code. Notice that although both rows have been specified to have the same height, the image has made the top row deeper. Advantage is also taken of this layout to show the basic horizontal and vertical text alignments.

Example Notes

 * The columns are set to 25%, 25%, and 50% (implied), of the table width respectively.
 * The table is set to 50% of the available page width.
 * Both rows are initially set to 60 pixels in height.
 * The image forces the top row to be 90 pixels in height, but has enough horizontal space.
 * The image's dimensions are set within the image code.
 * The image also uses its own code to horizontally position itself; (center)
 * The text cells introduce the various text alignments

Table Alignment
Tables can be aligned horizontally on the page with the HTML attribute 'align' , with the CSS style 'float' , and with the CSS style 'margin'. In each case these style-rules are placed in the table line. The crude vertical alignment of tables is accomplished by the use of the text line break, while fine adjustments can be made with CSS margin styles.


 * The HTML attribute method makes use of the align attribute in the table line to position the table at left, center, or right of the available space, and examples of its use can be seen in table code throughout this page.   The only point to note is that for the centering of tables, margin CSS styles in the same table line will take priority over align.  Top and bottom margins will not cause problems but the use of left or right margins will. Text can float around such a table with the exception of the centered case.
 * The CSS style 'float'  cannot place a table in the center of the available space but is limited to left and right.  It has the advantage that text can float around the table.
 * The CSS style 'margin' is best and by its settings can place a table anywhere in the horizontal alignment.  When the margin property is set to  auto the table is placed at the center of the horizontal containing space.   The same result can be obtained with the judicious use of relative measurements(%).   The extent to which text floats around a table positioned with margin depends on how much space remains.

See the examples in the drop-box below.

Content Alignment
As is the case for most table styling, there are two main methods; HTML attributes and CSS styles.


 * All text can be positioned using attributes. See the table below for the examples.
 * The vertical positioning of images and other box-shapes needs the style property vertical-align, with horizontal positioning using their own coding.

The attribute alignment summary is as follows:
 * Align sets the horizontal alignment of text.  It has values of left, center, or right. For example align=center to center text (or a table).
 * Valign sets the vertical alignment of text.  It has values of top, middle, and bottom.   There is no equivalent use in the table line.
 * Vertical alignment of text uses valign at cell level, or the CSS property vertical-align.
 * Vertical alignment of images and nested tables uses only the CSS property vertical-align at cell level.
 * Images and nested tables set their horizontal alignments within their own coding.
 * Vertical alignment cannot be set at table level.

The following tables show the styles to use for a given effect and in particular the use of the HTML attributes align and valign. In addition, the vertical alignment of images and nested tables is shown in the code block and table that follows.

Attribute text alignment combinations
and  Attributes       This is  and.  This is   and.  This is  and.  This is  and. The text is justified.  This is  and. This is  and. This is  and. <td width=140px align=justify valign=middle>This is  and. The text is justified. <th style="padding:10px;"> <td height=80px width=133px align=left valign=bottom >This is  and. <td width=140px align=center valign=bottom >This is  and. <td width=140px align=right valign=bottom >This is  and. <td width=140px align=justify valign=bottom >This is  and. The text is justified.

Vertical alignment of images and nested tables
<td style="padding:10px;"> <td style="padding:10px;"> <td style="padding:10px;"> <td height=160px width=180px style="vertical-align:top; border:5px solid brown;"> <td width=180px style="vertical-align:middle; border:5px solid salmon;"> <td width=180px style="vertical-align:bottom; border:5px solid brown;"> <td width=180px style="vertical-align:top; border:5px solid salmon;">

Sorting and hiding
Tables can be made so that when displayed on the page, clicking a link will sort the table. Clicking it again will sort it in the opposite direction. Each column is given a sorting link, so sorting can be done on any column. The method allows the user to view the data from different viewpoints.

Tables can also hide their contents. These tables are called collapsible. Collapsible tables resemble a simple box in the collapsed state; then, when the box is clicked with the mouse, the table reverts to the expanded state, and is revealed. The link has a toggle action; clicking the link again hides the contents. Such tables help to unclutter the page, and so avoid distraction from the main themes. They are of particular use for supplementary information.

Sortable tables
In its simplest form, adding the class declaration  class="sortable"  to the table line of any table makes a sortable table, regardless of other classes and styles applied. The following code illustrates the method, and the result is shown below. Click the links in this resulting table to see how sorting works:

For a more extensive treatment of this topic, readers should see meta:Help:Sorting.

Collapsible tables
The code for a collapsible table much resembles the code for an ordinary table, with the addition of a class declaration. (Some Internet Explorer browsers experience faulty links).

This is also a good example of how to declare multiple classes. The basic shell coding for a collapsible table and the result can be been below.

The result is:

Whether or not the wikitable class is included, the purple heading is a default feature. HTML attributes and CSS styles can however, be applied to the heading as with all other parts.

When the width attribute is used, the expanded width and the initial width will be the same and fixed by it. In this condition, unformatted text will wrap in the set width. Preformatted text will extend the box to the length of its longest line. Box structures such as HTML tables and images will expand the drop to the enclosures' width.

If the intention is to display unformatted text but to have an initial box width that is narrower than the open box width, then the displayed contents should be placed within a nested table cell of its own, and that table set to the required open width setting. Note also that the default text alignment for this collapsible table is center.

When the width attribute is omitted, the initial width is set by the width of the heading text. In this condition, unformatted text will expand the box to the available width of the page, and  Preformatted text will extend the box to the length of its longest line. Box structures such as HTML tables and images as always will expand the drop to the enclosures' width.

An alternative to making your own collapsible table can be had using the template Dropimage. This template has a comprehensive set of options, including the options to change an entire style expression, and class. It is based on the Collapsible class. The result of using Dropimage can be seen by reviewing the effects of the drop-boxes on this page. Readers who need more information on collapsible tables, and in particular for information on combining sortable and collapsible tables, should see meta:Help:Collapsing.