Editing Wikitext/Tables
|
Wikitext TablesTables 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 LayoutHere is a basic table example: |
||||||||
What you type:
{| border=1
|+ Caption
|-
! Heading 1
! Heading 2
|-
| A
| B
|-
| C
| D
|}
|
What you get:
|
Wikitext Table Symbols
|
||||||
| Notice that the table has been given all-round borders, with the addition of the term border=1. 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>. 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 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. |
||
Another Wiki Format:
{| border=1
|+ Caption
|-
! Heading 1!! Heading 2
|-
| A || B
|-
| C || D
|}
|
The HTML Format:
<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> |
More Notes on Layout
|
| HTML tables need text in their cells to be properly displayed. If a blank cell is intended then entering a non-breaking space, , avoids problems. | ||
CSS StylesThe 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.
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 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:
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.
|
|||||||||||||||
What you type:
{| 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'''
|}
|
What you get:
|
||||||||||||||
| This description of CSS priorities has been limited deliberately. The setting of CSS priorities is complex and is determined by various factors. The place that styles are written within the web page or its various style-sheets has an affect, the so-called source of the styles, and there is a hierarchy for these sources. For example, user style-sheet important styles are set higher than any author styles. Additionally, within each collection of styles that exists from a certain source, there are further priorities set; these follow complex rules of precedence; (IDs higher than classes and classes higher than element styles, etc). There is also a rule for duplicated styles that are in conflict, and at times, it is only the browser's work sequence that decides which of various similar styles is to be used. An overview of how CSS priorities work for web pages is given in The CSS Cascade. | |||||||||||||||
The Table PartsTables 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.
|
|||||
BordersBorders are used to set off 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.
|
||||||||||||||||||||||||||||
Cell Spacing
Use Attributes or Styles
The HTML Attributes Method
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.
|}
|
||||||||||||||||||
|
|
Cellspacing Attribute Notes
|
||||||||||||||||
|
||||||||||||||||||
Cell Padding
Use Attributes and Styles
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.
|}
|
||||||||||
|
|
Cellspacing Attribute Notes
|
||||||||
|
||||||||||
ColoringBackground coloring can be done for the whole table, or for individual cells. So also for the coloring of text. When cellspacing is used the table background property sets the color between the cell borders and the cell background the colors within. A selection of color names is provided in the drop-box. Should more color data be needed during design work , call any or all of the drop-box templates Lightcolors, Mediumcolors, Darkcolors, or Greycolors directly into the sandbox.
The CSS Color Styles
The style rule to set both the background and text colors is typically: 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:
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)" 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. |
||||||||||||||||||||||||||||||||||||||||||||
SpanningTables 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:
{| border=1
|-
| A
| B
| C
|-
| colspan="2"| D
| F
|}
|
What you get:
|
Colspan Notes
|
||||||
| Similarly, we can do the same thing with rows:
Row Spans |
|||||||
What you type:
{| border=1
|-
|rowspan="2"|A
| B
| C
|-
| E
| F
|}
|
What you get
|
Rowspan Notes
|
|||||
| Row Spans with Column Spans
The two attributes rowspan and colspan can be combined to simultaneously span vertically and horizontally: |
||||||||||||
What you type:
{| border=1
|-
| rowspan=3 colspan=3|A
| D
|-
| H
|-
| L
|-
| M
| N
| O
| P
|}
|
What you get
|
Mixed Span Notes
|
||||||||||
Width and HeightThere are three distinct behaviours for tables when content is added to the cells; this assumes that there is more that a few characters.
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 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. Relative Width Example
|
||||||||
What you type:
|
Example Notes
|
|||||||
What you get
|
||||||||
AlignmentTable 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.
See the examples in the drop-box below.
Content Alignment
As is the case for most table styling, there are two main methods; HTML attributes and CSS styles.
The attribute alignment summary is as follows:
The following tables show the styles to use for a given effect and in particular the use of the HTML attributes align and valign. In addition, the vertical alignment of images and nested tables is shown in the code block and table that follows.
Attribute Text Alignment Combinations
VERTICAL Alignment of Images and Nested Tables
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Sorting and HidingTables 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="sortable" border=1 cellpadding=5px Click the links in this resulting table to see how sorting works:
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"
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. 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 go to the Wikimedia site for Collapsible Tables. |
||||||||||||||||||||
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.
