Os quadros no CCM

Janeiro 2017

Eis aqui como realizar um quadro em uma dica e/ou artigo no CCM.

A sintaxe

Para criar um quadro

{| abre o quadro,

|+ permite dar um título ao quadro

| define uma célula,

|- define uma nova linha

|} fecha o quadro,

Para colocar cor nos textos:

{{red|texto_do_título_em_vermelho}}

Para a sintaxe das células:

! coloca em negrito o texto da célula

align="right" na definição de um quadro (ao lado de {|), alinhe à direita da página (todo o quadro)

align="right"| coluna 2 , alinhe à direita o texto da célula

valign="top" | Alto, colocar o texto no alto da célula

width="440" força a largura do quadro (na definição de quadro - ao lado de {| )

width="200"| coluna 3, força a largura de uma coluna

height="200", define a altura da célula,

rowspan="2"|texto da célula : fazer uma célula em diversas linhas

colspan="2"| juntar diversas colunas (2, no exemplo)

bgcolor="#FF0000" coloca cor no fundo.

Disposição dos atributos

Os diferentes atributos se colocam ao lado, sem espaço:
gras, no alto, à direita no fundo vermelho se escreve:
|!align="right"valign="top"bgcolor="#FF0000"


Depois vem o texto da célula:
|!align="right"valign="top"bgcolor="#FF0000"|texto_célula


Para obter mais cor no texto:
|!align="right"valign="top"bgcolor="#FF0000"|{{green|texto_célula}}

Exemplo simples

Sintaxe:

{| 
|linha1, coluna 1
|linha 1, coluna 2
|-
|linha 2, coluna 1
|linha 2, coluna 2
|}


Resultado:

linha1, coluna 1linha 1, coluna 2
linha 2, coluna 1linha 2, coluna 2

A sintaxe para os quadros

Para posicionar ao lado de {|

border="3"

style="border: 2px dotted black;"

style="border: 2px dashed black;"

style="border: 2px solid black;"

style="border: 5px double black;"

Exemplo

Sintaxe :

{|style="border: 2px dashed black;"width="320"
|!Título 1
|!Título 2
|-
|align="right" |linha1, coluna 1
|linha 1, coluna 2
|-
|linha 2, coluna 1
|linha 2, coluna 2
|}


Résultat :


Título 1Título 2
linha1, coluna 1linha 1, coluna 2
linha 2, coluna 1linha 2, coluna 2

A sintaxe dos alinhamentos:

Alinhar

Sintaxe :

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

Resultados:

Posicionamentos
g
c
d

Valign

Sintaxe:
height defini a altura da célula
{| 
| height="150" | Posição
| valign="top" | Alto
| valign="middle" | Meio
| valign="bottom" | Baixo
|}


Resultado :

Posição Alto Meio Baixo

Exemplos

Sintaxe:


{|border="3"
|-
|!{{blue|Título em Azul}}
|!{{red|Título em vermelho}}
|!{{green|Título em verde}}
|-
| linha 1 coluna 1
| coluna 2
| coluna 3
|-
|linha 2
| c 2
|c3
|}


Resultado:
Título em Azul negritoTítulo em vermelho negritoTítulo em verde negrito
linha 1 coluna 1coluna 2coluna 3
l 2c 2c 3

Um exemplo daquilo que é possível fazer

Sintaxe:
{| style="border: 5px double black;" 
|+ {{red| Título de quadro}}
|-
|!bgcolor="##00FF00"align="center"|{{blue| Título em Azul}}
|align="right"|{{red|Título em vermelho}}
|!{{green|Título em verde}}
|{{orange|Título sem negrito}}
|{{Purple| Título coluna 5}}
|-
|! linha 1 coluna 1
| bgcolor="#FF0000"|{{black|coluna 2 muito muito largo}}
| coluna 3
| width="100"align="right"valign="top"rowspan="2"bgcolor="#FF0000" |{{white|coluna 4}}
| align="right"bgcolor="#FF0000" |coluna 5
|-
|{{red|linha 2}}
| align="right"|c 2
|c3
|c5 car rowspan=2 c 4
|}


Resultado:

Título de quadro
Título em Azul Título em vermelhoTítulo em verdeTítulo sem negrito Título coluna 5
linha 1 coluna 1 coluna 2 muito muito largo coluna 3 coluna 4<td align="right"bgcolor="#FF0000" >coluna 5
linha 2 c 2c3c5 car rowspan=2 c 4

Um site Web para te ajudar

Um site Web permite gerar quadros principalmente o Wiki:

http://www.tablesgenerator.com/mediawiki_tables

Tem algumas diferenças entre Wikimedia e CCM, e é preciso fazer algumas modificações no código Wiki gerado: abaixo, em vermelho, os elementos a serem adicionados para que funcione no Kioskea a partir do código gerado pelo site.

(Trata-se do header)


{| class="wikitable"
|! style="font-weight: bold;" | Tables
|! style="text-align: center;" | Are
|! style="text-align: right;" | Cool
|-
| col 1 is
| style="text-align: center;" | left-aligned
| style="text-align: right;" | $1600
|-
| col 2 is
| style="text-align: center;" | centered
| style="text-align: right;" | $12
|-
| col 3 is
| colspan="2" style="text-align: center;" | right-aligned
|}


Resulta no Kioskea:

Tables Are Cool
col 1 is left-aligned $1600
col 2 is centered $12
col 3 is right-aligned

Veja também

Artigo original publicado por . Tradução feita por ninha25. Última modificação: 10 de novembro de 2015 às 13:03 por ninha25.
Este documento, intitulado 'Os quadros no CCM', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.