CCM - How to create tables?

September 2016


Here's how to create tables in the FAQ and Articles:

The syntax

To create a table

  • {| open table
  • |+ give a title to the table
  • | define a cell
  • |- define a new row
  • |} close the table

To change the font color:

  • {{red|text_in_red}}

To format the text in your cells:

  • ! put the text in the cell in bold (add in table definition - next to {|).
  • align="right" aligns the whole table to the right.
  • align="right"| colonne 2 align the text in the cell to the right.
  • valign="top" | Haut, put the text at the top of the cell.
  • width="440" force the width of the table (add in table definition - next to {|).
  • width="200"| colonne 3, force the width of the column.
  • height="200", defines the height of the cell.
  • rowspan="2"|texte de la cellule :create a cell using multiple rows.
  • colspan="2"| merge multiple columns.
  • bgcolor="#FF0000" add a background color.

Using attributes

The different attributes are placed side by side without any space:
bold, top, to the right on a red background:
|!align="right"valign="top"bgcolor="#FF0000"

Then add the text of the cell:
|!align="right"valign="top"bgcolor="#FF0000"|texte_cellule

To add color to the text:
|!align="right"valign="top"bgcolor="#FF0000"|{{green|texte_cellule}}

Example:

Syntax:

{| 
|row1, column 1
|row 1, column 2
|-
|row 2, column 1
|row 2, column 2
|}


Results :

row1, column 1row 1, column 2
row 2, column 1row 2, column 2

To customize borders

Place next to {|
  • border="3"
  • style="border: 2px dotted black;"
  • style="border: 2px dashed black;"
  • style="border: 2px solid black;"
  • style="border: 5px double black;"

Example

Syntax:

{|style="border: 2px dashed black;"width="320"
|!Title 1
|!Title 2
|-
|align="right" |row1, column 1
|row 1, column 2
|-
|row 2, column 1
|row 2, column 2
|}


Result :


Title 1Title 2
ligne1, column 1row 1, column 2
row 2, column 1row 2, column 2

Alignment

Syntax:

{| 
| Position
|-
| align="left" | g
|-
| align="center" | c
|-
| align="right" | d
|}

Result :

Position
g
c
d

Valign

Syntaxe :
height définit la hauteur de la cellule
{| 
| height="150" | Position
| valign="top" | Haut
| valign="middle" | Milieu
| valign="bottom" | Bas
|}


Results :

Position Haut Milieu Bas

Examples

Syntax:


{|border="3"
|-
|!{{blue|Title in Blue}}
|!{{red|Title in Red}}
|!{{green|Title in green}}
|-
| row 1 column 1
| column 2
| column 3
|-
|row 2
| c 2
|c3
|}


Results:
Title in Blue boldTitle in red boldTitle in green bold
row 1 column 1column 2column 3
l 2c 2c 3

Related :

This document entitled « CCM - How to create tables? » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.