CCM - How to create tables?

March 2017


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


Published by deri58.
This document, titled "CCM - How to create tables?," is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (ccm.net).