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:

What you type {| class="wikitable" |+ Caption |-  ! Heading 1  ! Heading 2 |- | A | B |- | C | D |}

What you get Caption Heading 1 Heading 2 A B C D

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 class="wikitable"; 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,  , 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 <br clear=all> 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.

Another Wiki Format {| class="wikitable" |+ Caption |-  ! Heading 1!! Heading 2 |- | A || B |- | C || D |}

The HTML Format <table class="wikitable"> <caption>Caption</caption> <tr> <th>Heading 1</th> <th>Heading 2</th> </tr> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table>

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, &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 class="wikitable".
• 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.

Style Formats Where to Place the Styles Styles are written with a particular table level in mind. For example, a cell background color would be written at cell level, and a more general table background color would be written at table level. A separate row background could also be set with a style at the row level. It may be of interest to note that a row's style can be set to change all of its cells at once but that only some of the various formats can be used in this way; the others must be applied to every cell. This can make some work quite laborious. The formats that permit it are those affecting colors, fonts, and text-alignments; the ones that do not, are the formats that change layout, namely borders, cell spacing, cell padding, margins, and text spacings. In Wikitext the attribute list and the CSS style expression is placed just after the symbol that creates that table, row, or cell. Examples will be found throughout the main text. When a class is to be specified for a table, (a prepacked set of styles), it is written in the table line. This is usually the case even when the class includes styles for lower levels. The following example shows a sample coding for a table with the WIKITABLE class, and with styles in each of its relevant elements. It might be of interest to note that were the heading styles omitted in this example that the WIKITABLE's purple coloring would prevail there; that is to say, the in-line style at that level has priority over the style applied to it by the class. Notice that styles are separated from cell text with a pipe symbol. {| class="wikitable" align=center width=50% style="background:lightyellow;color:maroon;" |+ style="font-weight:bold;"|Caption Text |- ! style="background:brown;color:white;"| Heading 1 ! style="background:brown;color:white;"| Heading 2 |- | Cell A1 Text||Cell A2 Text |- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text | Cell B2 Text |} The table looks like this: Caption Text Heading 1 Heading 2 Cell A1 Text Cell A2 Text Cell B1 Text Cell B2 Text Alternative Layout for All-in-one-line rows To add styles or attributes to such table cells using the alternative all cells in one line notation use the following typical format: |- style="background:lightgray;" | style="border:3px solid darkred;"|Cell B1 Text || align=left| Cell B2 Text Note that styles and data text are still separated by a pipe symbol, and that a double pipe symbol isolates the details for the next cell. Other cells of the same row could still occupy the next line if need be. The same idea applied to the headings in an alternative format look like this: |- ! align=left| Heading 1 !! style="font-family:courier;"| Heading 2 Note that a double exclamation separates heading cell descriptions, and that a pipe symbol separates each heading's style from its data. Numerous examples of HTML tables and their Wikitext equivalent coding can be seen on the page Tables Ready to Use. The Format for HTML Attributes HTML attributes include such items as cellpadding, cellspacing, and align. There are also several others that apply to tables, and a full list of those for tables can be found in an adjacent drop-box summary. They all use two terms separated by an equals sign, and it is usual for several such items to be set in the table line. The general format is: attribute1=value1 attribute2=value2 attributeN=valueN Note in the above example that the rules are separated by a space. Another listing, this time with a practical example for the three mentioned attributes is: cellpadding=10px cellspacing=8px align=center The Format for CSS Styles CSS styles have many more formatting rules than do the HTML attributes. They include all of the coloring, fonts, spacing, padding, margin, and other items. There are often several of these in a table element, with the table line itself containing most. The general format is: style = "property1:value1; property2:value2; ... propertyN:valueN;" Note from the above general form: Each style rule comprises a property and a value. Separators between the properties and values are full colons. Separators between the style rules themselves are semi-colons. The entire set of rules is enclosed in double quotes. The set forms the right hand side of an expression equated to style. Another listing, that could be placed in a table element, a row element, or a cell element, to set their background and text colors, is just: style="background:lightyellow; color:royalblue;" Note that the color names have been used, and that they are each spelled as one word. The two formatting methods are mixed frequently in the same lines as follows: align=right width=300px style="background:lightyellow; color:royalblue;" Punctuation Rules for Style Expressions Sometimes style rules look a bit compact and need spread out to make them more readable, and to provide convenient break-points for text wrapping. These notes apply to the punctuation within a CSS style expression. Main Points to Avoid Line breaks are not permitted within style expressions. Colons and semi-colons must not have a space before them. These have Latitude Spaces after colons and semi-colons are OK. Space between a table, row, or cell symbol and the word style is OK. Space around any equals symbol is OK. Space between the style rules and their bounding quotes is OK. Optionally, a semi-colon can be placed immediately after the last style rule. In addition Compound values like 2px solid black must be space-separated. Attributes must be separated from CSS style expressions with space.

CSS Properties Summary Commonly used style rules for Wiki markup tables : There are two different sets of style rules in use; a set of HTML attributes that is associated with the specific elements in tables, and a Cascading Style Sheet set, CSS properties, that is of more general use. Each of table, caption, row, and cell can be considered as separate elements in the more general building of tables. In each case where an attribute refers to the same format as a CSS property at the same level of the same element, the CSS property takes priority. A short list of each style-set is given for quick reference though these listings are by no means complete. A link has been provided at the bottom of this drop-list for a full CSS properties reference. HTML Attributes for Tables; use the format; attribute1=value1 attribute2=value2 attributeN=valueN Example Values Element* Purpose >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> align=left** left,right,center, T, R, C positions table or text** (plus justify for text) in immediate container valign=top**** top, middle, bottom R, C vertical alignment of TEXT border=1***** 0 for none, 1-7 T all borders at once cellpadding=5px 0 for none, px, pt, em T padding for all cell text with one entry cellspacing=5px****** 0 for none, px, pt, em T between all table cells with one entry height=100px*** px, pt, cm, em, % C cell height, though likely to increase with contents width=200px*** px, pt, cm, em, % T, C table or cell width colspan="2" number of columns. C joins cells rightward rowspan="2" number of rows. C joins cells downward >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> * T=Table, R=Rows, C=Cells of any kind ** Align in cells applies horizontal text-alignment. *** If not specified, the dimensions will adjust to the text. **** If not specified, the default is middle ***** Do not use border spacing styles with this attribute; only ''cellspacing''. ****** Do not use border styles with this attribute; only the ''border'' attribute. CSS Style Rules; use the format; style="property1:value1; property2:value2; propertyN:valueN;" Example Values Elements** Purpose >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> caption-side:top top,right,bottom, T only some browsers and left text-align:right left,right,center, T, R, C horizontal alignment of text and justify vertical-align:top top, middle, bottom C Vertical-align text or image background:yellow name, rgb, hex, T, R, C background color and transparent color:blue name, rgb, hex T, R, C text color mix-blend-mode:multiply mode T blend mode >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> font-family:arial font or family name T, R, C font or font-list font-size:20pt px, pt, cm, em, % T, R, C text size font-style:italic italic, normal T, R, C text style font-weight:bold bold, normal T, R, C text weight >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> padding:5px 0 0 0 px, pt, cm, em T, C sequence top,right,bottom,left margin:0 0 5px 0 px, pt, cm, em, % T sequence top,right,bottom,left border:2px solid red* width, type, color T, C border on all four sides border-collapse: separate or collapse T cell spacing or not border-spacing:10px px, pt, cm, em T cell spacing all-round border-spacing:7px 5px px, pt, cm, em T in form horizontal vertical table-layout:fixed auto or fixed T expands with text or not width:400px px, pt, cm, em  % T, C sets table or cell width height:200px px, pt, cm, em  % T, C sets table or cell height >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> line-height:2em*** px, pt, cm, em T, R, C height between text lines letter-spacing:5px px, pt, cm, em T, R, C space between text characters word-spacing:10px px, pt, cm, em T, R, C space between words of text white-space:pre-wrap browser issues T long line text wrapping,(soon) >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> * Separate border properties also exist; border-top,border-right,border-bottom, and border-left. ** T=Table, R=Rows, C=Cells of any kind *** Line-height applies only to Block Level Elements; e.g. <blockquote>, <center>,<div>, <h1-h6>, <hr>, <ol>, <p>, <pre>, <table>, and <ul>. Line-height fails within a <span>. Style Expression Spacing Rules for WIKITEXT Main Points to Avoid Line breaks are not permitted within style expressions. Let the software do the wrapping. Spaces are not permitted immediately before colons or semi-colons. These have Latitude Space between the various table symbols and the word style is OK. Space around any equals symbol is OK. Space between the style rules and their outside parentheses is OK. Spaces after colons and semi-colons are OK. A semi-colon can be placed immediately after the last style rule. In addition Compound values like '2px solid black' must be space-separated. HTML attributes must be separated from CSS style expressions with space. HTML element line-spacing is permitted but not for Wikitext elements. Wikitext and HTML table elements can be indented for clarity. Long lines in code LISTINGS can wrap only if there are some spaces added. Combining the two style rule methods: It is possible to mix the attributes with CSS styles provided that they keep to their own local formats. That is to say; nothing with an equals sign between the quotes, and no CSS rules outside of them. Note that the Wiki apostrophe codes and various HTML tags can still be used directly on text. An example of mixed styles is shown below. {| border=1 width=300px style="background:lightyellow;color:maroon;" | height=100px| <u>''First''</u> cell | style="background:black;color:white;" width=200px align=center|''Second'' cell |} Priorities for Inline Styles. When there is a contest at the same level between an attribute and a style, the style will have priority. When two similar properties exist in a style expression, each having a different value, the second value will be taken. When there are two entire style expressions in the same table line, the second is ignored. The same situation applies for two similar attributes in a line; the second is ignored. Refer to CSS Reference List for more detailed descriptions of properties and values.

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, class=wikitable, 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: blue;" | style="color:maroon;"|'''B1 : Maroon Cell Style''' |'''B2 : Blue Row Style''' |- style="color: green;" | '''C1 : Green Row Style''' | '''C2 : Green Row Style''' |- | '''D1 : Red Table Style''' | '''D2 : Red Table Style''' |}

What you get A1 : Maroon Cell Style A2 : Red Table Style B1 : Maroon Cell Style B2 : Blue Row Style C1 : Green Row Style C2 : Green Row Style D1 : Red Table Style D2 : Red Table Style

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.

The Table Design Spaces The Table Design Spaces Tables have several spaces that require attention in design; in particular, margins, padding, and cell spaces. Refer to the graphic above and the descriptions below for their details. Margins set the space between the table and adjacent items on a page, and the four sides of a table can have different margins. In fact, the margins can be made as negative values to cause tables to partially overlap. In addition to margin, there are alignment attributes that can center a table or position it to the left or to the right (align=.), though this attribute lacks priority over a CSS style. Margins are not shown on the above graphic, though the style rule for the table line takes this form: style="margin:10px 10px 20px 0px;" This code applies table margins to all four sides at once. The sequence of values corresponds to top, right, bottom, then left. This sequence is also used for padding. Table padding describes an area just within the main table perimeter. (Table space A in the graphic). It is used to improve the table's appearance when the contents look a bit cramped. It too can be specified for all sides separately or together. This property is set in the table line, but can be used only when cell spacing is not collapsed; spurious results are otherwise obtained. The use of table padding is comparatively rare, unlike the similar property used at cell level. 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. Nonetheless, table padding uses this style: style="padding:20px 10px 20px 10px;" This code applies table padding to all sides at once, in the sequence top, right, bottom, then left; it is applied as a uniform value by using only one figure. This property affects only the table padding when written in the table line. Cell spacing describes an area between all of the tables cell and perimeter borders. (Table space B in the graphic). It is set independently of any outer table padding. One value can set the spacing for all of the cells, and the horizontal and vertical spaces can be set separately. This CSS property works with the border-collapse property and the borders need to be set to separate for its use. The style used in the table line for cell spacing is, for example: style="border-collapse:separate;border-spacing:10px" Another cellspacing method exists; there is an HTML attribute for cellspacing, that can also set the spacing without the need for a CSS style. There are times when it is useful and times when it is not. Its simplicity makes it good for big tables where CSS styles would make for much work. It applies only uniform spacing but that is often sufficient. It is not so useful when an HTML table is to go into some sort of template; it can prevent operation at such times. The attribute applies uniform spacing in the table line with : cellspacing=10px Cell padding describes the space around text in a cell and separates it from the cell border. (Table space C in the graphic). It has an identical code description to table padding except that it is written in the cell line. style="padding:10px 5px 10px 5px;" It cannot be written in a style within a row, so when there is much custom padding to be done, any number of style statements for cells become necessary. There is an HTML attribute that can apply uniform padding to all of the cells at once, and it written in the table line. It has the typical form: cellpadding=10px Table caption is a line of text that is placed by default above the table and is centered. This text clearly comes inside the top margin, so needs to be considered in table layout. There is a property to position a caption to any side of a table, but not all browsers can handle it. In Wiki it has its own table element, |+, and the line is written immediately after the table line. In HTML it is made by adding text between <caption></caption> tags, again as the second line of the table. Borders are not strictly table spaces but in addition to their obvious purpose in setting off the various spaces, they are used for decoration in their own right. Border CSS styles are set in the table line only for the table perimeter. For cells, they must be set for each cell. There is also CSS coding to set each side differently. There is also an HTML attribute for the table line to make simple uniform all-round borders, and it saves much work for large tables and for less demanding applications. A typical style and an attribute is shown below: style="border:10px solid brown;" The attribute is typically: border=1px Each of the various table spaces is discussed separately within the remainder of this page.

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.

Border Styles Solid: style="border:5px solid maroon" Dotted: style="border:5px dotted blue" Groove: style="border:5px groove oldlace" Ridge: style="border:5px ridge green" Dashed: style="border:5px dashed salmon" Inset: style="border:5px inset gray" Double: style="border:5px double maroon" Outset: style="border:5px outset dimgray" Top only: style="border-top:5px solid tomato" Right only: style="border-right:5px solid royalblue" Bottom only: style="border-bottom:5px solid darkred" Left only: style="border-left:5px solid fuchsia" Notes Border styles can be set at table or cell level, and will affect only that element. The above border samples are made with the supplied styles at cell level. Border attributes can be set only at table level and set borders everywhere. The borders attribute , set in the table line, is just border=1px. Partial border styles might need other borders removed for a given effect. To remove a styled border, enter style="border:none" at the same level. To remove borders set by attributes, enter border=0 in the table line. Removed borders can be restored in styles that follow the removal. Cell border styles superimpose on attribute set borders. For a table perimeter, use one of the sample styles but in the table line. This perimeter uses: style="border:2px solid dimgray" Borders for separate rows are not supported and cell borders must be applied needed.

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

{| cellspacing=0 align=center cellpadding=5px width=50% style="background: lightyellow; border: 1px solid gray;" |+ Top Caption |-  ! style="background:brown;color:white;border-bottom:1.5px solid black" |Heading 1  ! style="background:brown;color:white;border-bottom:1.5px solid black" |Heading 2 |- | width=50% style="border-bottom:1px solid gray" |A | width=50% style="border-bottom:1px solid gray" |B |- | style="border-bottom:1.5px solid black" |C | style="border-bottom:1.5px solid black" |D |}

What you get

Top Caption

Heading 1	Heading 2
A	B
C	D

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.

Use Attributes or Styles

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

The HTML Attributes Method

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

{| width=100% border=1 cellspacing=15px  
|+ ''Border=1''' and '''Cellspacing=15px''
| width=50% style="padding:15px;"|There is all-round ''uniform'' spacing.
| width=50% style="padding:15px;|The borders are made of two colors.
|}

Code with Border=1 and Cellspacing=15px There is all-round uniform spacing. The borders are made of two colors Border=1 and Cellspacing=0 The spacing has been removed. The borders are side-by-side

Border=1 and Cellspacing omitted Default spacing has been added. The cells have been spaced apart. Thick 'styled' borders with Cellspacing=0 Thick borders show the effect. The borders are side-by-side

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.

CSS Border Spacing Collapsed and Separate Borders with CSS The following notes show the intention and appearance of both collapsed and separate borders. CSS border spacing is intended for use with borders made with CSS styles, not attributes. Collapsed borders are intended to overlap and are made by setting collapse for the border-collapse property, regardless of border-spacing. Separated borders do not overlap and are made by setting separate for the border-collapse property, and by setting an exact amount of border-spacing. Borders side-by-side, are made using separate borders with spacing set to zero. Table-level padding can be used only when borders are separated. When they are implied as separated by default, (when cellspacing amount is not given), or when the borders are collapsed, the results will be spurious. The following formats are however, reliable. Where to Place the Code Collapsed Borders {| style="border-collapse:collapse;" |+ Typical CSS collapsed borders example | style="border:1px solid black;"|Text for cell one | style="border:1px solid black;"|Text for cell two |} Separated Borders {| style="border-collapse:separate;border-spacing:7px;border:1px solid gray;" |+ Typical CSS separated borders example | style="border:1px solid black;"|Text for cell one | style="border:1px solid black;"|Text for cell two |} Collapsed Borders in Detail Collapsed borders can use either of these coding forms: style="border-collapse:collapse;" or; style="border-collapse:collapse;border-spacing:50px;" Both formats give results as follows: Collapsed regardless of spacing When the borders are collapsed they will always overlap. This happens regardless of any border-spacing that is set. The same example using thin borders looks like this: Collapsed regardless of spacing When the borders are collapsed they will always overlap. This happens regardless of any border-spacing that is set. Separated Borders in Detail Separated borders can have uniform or non-uniform spacing: style="border-collapse:separate; border-spacing:7px;" or: style="border-collapse:separate; border-spacing:7px 14px;" 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: Separated with Exact Spacing ;Separated borders never overlap, and are distinct. Border-spacing can be set for both the horizontal and the vertical. The same example using thin borders looks like this: Separated with Exact Spacing Separated borders never overlap, and are distinct. Border-spacing can be set for both the horizontal and the vertical. Separated with Border-spacing Zero 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: Separated with Border-spacing Zero Separated borders never overlap, and are distinct. Spacing has vanished. The same example using thin borders looks like this: Separated with Border-spacing Zero Double thickness is noted for the inside borders. Best use Collapsed for these. Spacing with the HTML attribute 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.

{| width=100% border=1 cellpadding=15px  
|+ Uniform: ''Cellpadding=15px''
| width=50% |This is an example of all-round padding, using the HTML attribute.
| width=50% |The text has been spaced from each cell's border with one entry.
|}

Cellpadding omitted This is an example without cell padding. The text is placed hard against the cell borders.

Uniform: Cellpadding=15px This is an example of all-round padding, using the HTML attribute. The text has been spaced from each cell's border with one entry.

Cellspacing Attribute Notes The attribute cellpadding is simple to use. The attribute applies uniform padding to cells only.

CSS Cell Padding Cell Padding and Table Padding with CSS The following notes show the coding for the two methods. Where to Place the Code Cell Padding {| border=1 |+ Typical CSS cell padding example | style="padding:15px;"|Text for cell one | style="padding:15px 20px;"|Text for cell two | style="padding:15px 20px 5px 8px;"|Text for cell three |} Table Padding, (some browsers). {| style="border-collapse:separated;border-spacing:5px;padding:20px;" |+ Typical CSS table padding example | style="border:10px solid brown;"|Text for cell one | style="border:10px solid salmon;"|Text for cell two |} Cell Padding in Detail Cell padding and for that matter, table padding too, can be specified in one of three ways: When a single value is quoted it refers to uniform padding; the same on each side. When two values are quoted, the first sets the left and right, and the second sets the top and bottom. When all four values are quoted, they apply in the order top, right, bottom, and left. The style expression can be one of these three: style="padding:5px;" or; style="padding:5px 10px;" or; style="padding:5px 10px 15px 8px;" These formats have a similar behaviour to the attribute version apart from their ability to set non-uniform padding. When an attribute is set for cellpadding, a style within a cell or in the table line will have priority. In this way the general padding can be set by an attribute and the variations from it by cell styles. Table Padding Table padding uses the same CSS style as for cell padding except that it is placed in the table line. The main difference is that the borders must be separated for its use. 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 following style sets table padding: style="border-collapse:separated; border-spacing:7px;padding:20px;" The table without table padding is shown in the first example, and with table padding in the second. Notice that table padding exists in addition to any cell spacing near the perimeter. Without table padding No table padding. No table padding. With table padding With table padding. With table padding.

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.

Colors Light Colors for Backgrounds Ivory Linen Beige Papayawhip Lemonchiffon Floralwhite Oldlace Lightyellow Azure Mistyrose Lavenderblush Mintcream Ghostwhite Whitesmoke Lightgrey Darkgray Gray Dimgray Dark Colors for Text Black Darkblue Midnightblue Darkgreen Darkolivegreen Royalblue Navy Darkslateblue Blue Darkred Maroon Brown Firebrick Red White

The CSS color styles

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

style="background:lightyellow;color:maroon"

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); #f8a4c8;

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

style="background:Linen;color:black"
or;

style="background:rgb(250,240,230);color:rgb(0,0,0)"
or;

style="background:#faf0e6;;color:#000000;"

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.

Column Spans

What you type {| class="wikitable" |- | A | B | C |- | colspan="2"| D | F |}

What you get A B C D F

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

Row Spans

What you type {| class="wikitable" |- |rowspan="2"|A | B | C |- | E | F |}

What you get A B C E F

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:

What you type {| class="wikitable" |- | rowspan=3 colspan=3|A | D |- | H |- | L |- | M | N | O | P |}

What you get A D H L M N O P

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.

What you type {| class="wikitable" width=50% style="margin-left:auto; margin-right:auto" |- | height=60px width=25%| A | width=25% align=center| B | [[image:Oriental_poppy.jpg|center|100x90px]] |- | height="60px" valign="bottom"| C | valign="middle" align="right"| D | |}

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

What you get

A	B
C	D

Alignment

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.

Table Alignment Table Alignment Examples In the examples that follow you should regard the positions assumed by the tables in the drop-box's width as representing the way that they would be seen on the usual Wiki page. This first table uses only attributes to set the width and to position the table at the center of the page. {| align=center width=70% style="background:papayawhip;" |+ Centered and sized with attributes | Doesn't work well with wikitable, and is deprecated in HTML 4. |} Centered and sized with attributes Doesn't work well with wikitable, and is deprecated in HTML 4. The second table centers a table using the auto value of the CSS margin property. When combined with relative measure for the width of the table, there is reasonable adjustment for changed screen sizes. Because it is centered, any adjacent text must follow-on and cannot wrap. The table and margins occupy the whole width of the table's container, and with this method the top and bottom margins become zero. {| class="wikitable" style="width:70%; margin:auto;background:lightgrey;" |+ Centered using the ''auto'' value of the CSS property ''margin''. | Table Text |} Centered using the auto value of the CSS property margin. Table Text The third table simulates a centered table for any screen width, but like all centered tables is suitable only for follow-on text. The table and margins occupy the whole width of the table's container. {| class="wikitable" style="width:70%; margin:0 15% 0 15%;background:mistyrose;" |+ Centered using relative width and margin CSS styles | Table Text |} Centered using relative width and margin CSS styles Table Text The fourth table places the table at the right of the page and sizes it using CSS styles 'width' and 'float'. {| class="wikitable" style="width:70%;float:right;background:lightyellow;" |+ Floated right using 'float' | Table Text |} Floated right using 'float' Table Text

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.

Available Alignment Options

Intended Alignment	Attribute align	Attribute valign	CSS Style text-align	CSS Style vertical-align
H-Position of the Table at table level	Yes
V-Position of the Table at table level	Not available - position table in the page
H-Position of All Text at table level			Yes
V-Position of All Text at table level	Not available - must be done at cell level
H-Position of Row's Text at row level	Yes		Yes
V-Position of Row's Text at row level		Yes
H-Position of Cell's Text at cell level	Yes		Yes
V-Position of a Cell's Text at cell level		Yes		Yes
H-Position of a Cell's Image ect at cell level	Best use objects' own code to position it
V-Position of a Cell's Image ect at cell level				Yes

Attribute text alignment combinations

Alignment of Text in Cells using the Align and Valign Attributes

	align=left	align=center	align=right	align=justify
valign=top	This is align=left and valign=top.	This is align=center and valign=top.	This is align=right and valign=top.	This is align=justify and valign=top. The text is justified.
valign=middle	This is align=left and valign=middle.	This is align=center and valign=middle.	This is align=right and valign=middle.	This is align=justify and valign=middle. The text is justified.
valign=bottom	This is align=left and valign=bottom.	This is align=center and valign=bottom.	This is align=right and valign=bottom.	This is align=justify and valign=bottom. The text is justified.

Vertical alignment of images and nested tables

{| class="wikitable" align="center" style = "background: transparent;" 
  |+ Vertical Alignment of Box-like Objects, (Images and Nested Tables)
|- 
  | height=200px width=180px style = " vertical-align: top; " |[[image:ArialSpecimen.svg | center | 100px ]]
  | width=180px style = " vertical-align: middle; " |[[image:ArialSpecimen.svg | center | 100px ]]
  | width=180px style = " vertical-align: bottom; " |[[image:ArialSpecimen.svg | center | 100px ]]
  | width=180px style = " vertical-align: top; " |
    {| class="wikitable" align=center width=50%
      | A || B
    |-
      | C || D
    |}
|}

Vertical Alignment of Box-like Objects with CSS styles, (Images and Nested Tables)

style="vertical-align:top"	style="vertical-align:middle"	style="vertical-align:bottom"	style="vertical-align:top"
			A B C D

	Note that these image and nested table inclusions use their own coding to set their horizontal placements, and CSS styles in the table cells for any vertical placements other than the defaults.
Technical Note:

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.

{| class="wikitable sortable" cellpadding=5px
! One!!Two!!Three!!Four
|-
| M||A||K||E
|-
| E||N||D||S
|-
| M||E||E||T
|}

Click the links in this resulting table to see how sorting works:

One	Two	Three	Four
M	A	K	E
E	N	D	S
M	E	E	T

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.

{| class="wikitable collapsible" width="200px"
! Click Here for Contents
|-
| This contains the hidden content.
|}

The result is:

Click Here for Contents
This contains the hidden content.

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.

See also

• The Testing Sandbox; Use the edit button on this page to enter work for testing.
• The CSS Cascade; A Wikibooks page that explains how the priorities of styles are decided within browser software.