Editing Wikitext/Tables

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.

Basic Layout

{| border=1
  |+ Caption
|-
  ! Heading 1
  ! Heading 2
|-
  | A
  | B
|-
  | C
  | D
|}

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

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

{| border=1
  |+ Caption
|-
  ! Heading 1!! Heading 2
|-
  | A || B
|-
  | C || D
|}

<table border=1>
<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>

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

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 in-line 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 in-line 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.
• Styles and attributes can be used in conjuction 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.

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

|-   style="background:lightgray;"
   | style="border:3px solid darkred;"|Cell B1 Text || align=left| Cell B2 Text 

|- 
   ! align=left| Heading 1 !! style="font-family:courier;"| Heading 2        

CSS Properties Summary Commonly used style rules for Wiki markup tables : There are two different sets of syle 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 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 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 appplies 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 codings 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.

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 stylesheet.
• A CSS class declaration, ''class=wikitable'', applies various styles to the table all at once, including a grey 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.

{| class="wikitable" width=80% 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'''
|}

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 descripions 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

Borders

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.

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

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

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.

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

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

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

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.

Column Spans

{| border=1
|-
  | A
  | B
  | C
|-
  | colspan="2"| D
  | F
|}

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

Row Spans

{| border=1
|-
  |rowspan="2"|A
  | B
  | C
|-
  | E
  | F
|}

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

{| border=1
|-
 | rowspan=3 colspan=3|A
 | D
|-
 | H
|-
 | L
|-
 | M
 | N
 | O
 | P
|}

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

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.

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.

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

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

• 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

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 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' by its settings can place a table anywhere in the horizontal plane, and with the judicious use of relative measurements(%), for table widths and margins can simulate a centered table if necessary. 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.

{| border=1 align=center width=70% style="background:papayawhip;"
|+ Centered and sized with attributes
| Table Text
|}

{| border=1 style="width:70%; margin:0 15% 0 15%;background:mistyrose;"
|+ Centered using relative width and margin CSS styles
| Table Text
|}

{| border=1 style="width:70%;float:right;background:lightyellow;"
|+ Floated right using 'float' 
| Table Text
|}

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.

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.

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 go to the Wikimedia site Help:Sorting.

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 ommitted, 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.