Ajuda:Tables/pt-br

De Oazez
Revisão de 09h14min de 19 de novembro de 2014 por Admin (discussão | contribs) (uma edição)

(dif) ← Edição anterior | Revisão atual (dif) | Versão posterior → (dif)
Ir para: navegação, pesquisa

Tabelas

Podem ser criadas tabelas nas páginas da wiki usando diretamente os elementos XHTML para formatação de tabelas, ou usando os elementos de formatação wiki para defini-las. Os elementos de formatação XHTML são amplamente descritos em vários sites na internet e não serão discutidos aqui. A vantagem dos elementos de formatação wiki, é que a tabela é construída usando caracteres normais que, em comparação com os correspondentes elementos XHTML, tendem a facilitar a compreensão da estrutura da tabela ao editar a página.

Regra geral, é melhor evitar usar tabelas a menos que sejam mesmo necessárias. Normalmente, o código de formatação da tabela torna a edição da página mais complexa.

Resumo dos elementos wiki de construção de tabelas

Os elementos wiki de construção de tabelas são os seguintes:

Elemento Descrição
{| início da tabela
|+ título título da tabela, opcional; só pode ser colocado entre o início da tabela e a primeira linha da tabela
! cabeçalho !! cabeçalho !! ...

ou

! cabeçalho
! cabeçalho
...

linha de células que servem de cabeçalhos das colunas, opcional.

Os cabeçalhos das colunas podem ser colocados consecutivamente, separados por dois pontos de exclamação (!!), ou colocados um por linha, cada linha começada por um ponto de exclamação (!).

|- linha da tabela, opcional na primeira linha -- a wiki assume a primeira linha mesmo sem este elemento. Cada nova linha de células na tabela é antecedida por este elemento.
| dados || dados || ...

ou

| dados
| dados
...

linha de células com os dados da tabela, obrigatória!

As células de dados da tabela podem ser colocadas consecutivamente, separadas por duas barras verticais (||), ou colocadas uma por linha, cada linha começada por uma barra vertical (|).

|} fim da tabela
  • Os elementos de criação de tabelas têm de começar numa linha nova, exceto os sinais duplos (||) e (!!) para adicionar elementos consecutivos numa só linha. No entanto, espaços em branco no início da linha são ignorados.
  • Para utilizar a barra vertical (|) no conteúdo de uma célula, como é feito acima, use o elemento wiki <nowiki>|</nowiki>.

Exemplos

Os seguintes exemplos começam pelos conceitos básicos e de forma progressiva complementam-nos, explorando mais possibilidades de construção e formatação de tabelas. Quando necessário para facilitar a sua compreensão, as diferenças no código de um exemplo em relação ao código do exemplo anterior são salientadas a amarelo.

Elemento de formatação Resultado

Exemplo de uma tabela simples, sem qualquer formatação e só com linhas de dados:

{|
| Entrada || 1 || 5,00
|-
| Prato do dia || 2 || 14,35
|-
| Total || || 19,35
|}

Entrada 1 5,00
Prato do dia 2 14,35
Total 19,35

Podem ser introduzidos espaços para alinhamento das células. Se necessitar de quebrar o texto numa célula, use <br />:

{|
| Entrada                ||  1 ||   5,00
|-
| Prato<br />do<br />dia ||  2 ||  14,35
|-
| Total                  ||    ||  19,35
|}

Entrada 1 5,00
Prato
do
dia
2 14,35
Total 19,35

As células podem conter um longo trecho de texto e pode usar-se os elementos de formatação wiki, ou texto wiki:

{|
|Lorem ipsum dolor sit amet,
consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat,
sed diam voluptua.

At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum
dolor sit amet.
|
* Lorem ipsum dolor sit amet
* consetetur sadipscing elitr
* sed diam nonumy eirmod tempor invidunt
|}

Lorem ipsum dolor sit amet,

consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

  • Lorem ipsum dolor sit amet
  • consetetur sadipscing elitr
  • sed diam nonumy eirmod tempor invidunt

Na prática, muitas vezes, é mais simples e fácil de manter e alterar a tabela, se as células numa mesma linha da tabela forem colocadas em linhas separadas no código. Por exemplo, a tabela do exemplo inicial pode ser construída desta forma:

<tt> {|
| Entrada
| 1
| 5,00
|-
| Prato do dia
| 2
| 14,35
|-
| Total
|
| 19,35
|}

Entrada 1 5,00
Prato do dia 2 14,35
Total 19,35

Cabeçalhos

Qualquer célula da tabela iniciada por um ponto de exclamação (!) em vez de uma barra vertical (|) é formatada como cabeçalho. Repare, por exemplo, na célula «Total». Por omissão, os cabeçalhos normalmente aparecem em negrito e centrados:

{|
! Prato
! Nº
! Preço

|-
| Entrada
| 1
| 5,00
|-
| Prato do dia
| 2
| 14,35
|-
! Total
|
| 19,35
|}

Prato Preço
Entrada 1 5,00
Prato do dia 2 14,35
Total 19,35

Título

Pode ser adicionado um título no topo de qualquer tabela, da seguinte forma:

{|
|+ Recibo
! Prato
! Nº
! Preço
|-
| Entrada
| 1
| 5,00
|-
| Prato do dia
| 2
| 14,35
|-
| Total
|
| 19,35
|}

Recibo
Prato Preço
Entrada 1 5,00
Prato do dia 2 14,35
Total 19,35

Atributos de formatação XHTML

Podem ser adicionados às tabelas atributos de formatação XHTML. Para consultar uma fonte autoritativa sobre estes atributos, consulte página de especificação de tabelas em HTML 4.01 da W3C.

Os atributos de formatação XHTML aplicam-se a diferentes elementos da tabela, dependendo do ponto da tabela onde são colocados. Os pontos onde se podem colocar e a forma como se colocam, são os seguintes:

Elemento Descrição
{| {formatação} Os atributos de formatação colocados no início da tabela aplicam-se a toda a tabela e permitem definir, por exemplo, a cor de fundo de todas as células ou a existência de bordas.
|+ {formatação |} título Os atributos de formatação colocados no título da tabela aplicam-se ao título e permitem definir, por exemplo, a cor do mesmo. Devem ser seguidos por uma barra vertical (|).
! {formatação |} cabeçalho !! {formatação |} cabeçalho !! ...

ou

! {formatação |} cabeçalho
! {formatação |} cabeçalho
...

Os atributos de formatação colocados nos cabeçalhos das colunas permitem definir, por exemplo, a largura da respectiva coluna, a cor da célula do cabeçalho, etc. Devem ser seguidos por uma barra vertical (|).
|- {formatação} Os atributos de formatação colocados na divisão das linhas da tabela aplicam-se a toda a linha de células e permitem definir, por exemplo, a cor de fundo de todas as células ou a existência de bordas nessa linha.
| {formatação |} dados || {formatação |} dados || ...

ou

| {formatação |} dados
| {formatação |} dados
...

Os atributos de formatação colocados nas células de dados da tabela permitem definir, por exemplo, a cor da célula, o alinhamento dos dados nessa célula, etc. Devem ser seguidos por uma barra vertical (|).
  • Com exceção do fim de tabela, todos os elementos de criação de tabelas aceitam opcionalmente um ou mais atributos XHTML. Os atributos são colocados na mesma linha que o elemento de criação. Ao inserir mais do que um atributo na mesma linha, separe-os com um espaço.
  • Os dados de conteúdo de uma célula podem ser colocados:
    • a seguir ao elemento de dados da tabela, na mesma linha, após quaisquer atributos XHTML, ou
    • nas linhas abaixo do elemento de dados da tabela.
  • Conteúdo que usa elementos wiki que precisam, eles mesmos, de começar numa linha nova, tais como listas, cabeçalhos ou tabelas dentro de tabelas, têm de começar numa linha nova própria.

Exemplos

Atributos de toda a tabela

Atributos colocados após o elemento de início da tabela aplicam-se a toda a tabela podendo definir, por exemplo, a centralização da tabela e a existência de bordas.

Elemento de formatação Resultado

{| align=center border=1
|+ Recibo
! Prato
! Nº
! Preço
|-
| Entrada
| 1
| 5,00
|-
| Prato do dia
| 2
| 14,35
|-
| Total
|
| 19,35
|}

Recibo
Prato Preço
Entrada 1 5,00
Prato do dia 2 14,35
Total 19,35

Atributos de toda uma linha

É possível definir atributos que se aplicam a uma linha de células, não afetando as restantes:

{| align=center border=1
|+ Recibo
|- style="background-color:#ffffcc"
! Prato
! Nº
! Preço
|-
| Entrada
| 1
| 5,00
|-
| Prato do dia
| 2
| 14,35
|- style="background-color:black; color:white"
| Total
|
| 19,35
|}

Recibo
Prato Preço
Entrada 1 5,00
Prato do dia 2 14,35
Total 19,35

Atributos de uma célula

Também se podem definir atributos que afectam uma única célula e nenhuma das restantes. Por exemplo, pode definir-se que as células na coluna «Nº» serão alinhadas ao centro e as da coluna de preços alinhadas à direita:

{| align=center border=1
|+ Recibo
|- style="background-color:#ffffcc"
! Prato
! Nº
! Preço
|-
| Entrada
| align=center | 1
| align=right | 5,00
|-
| Prato do dia
| align=center | 2
| align=right | 14,35
|- style="background-color:black; color:white"
| Total
| align=center |
| align=right | 19,35
|}

Recibo
Prato Preço
Entrada 1 5,00
Prato do dia 2 14,35
Total 19,35

Como colocar atributos numa só linha

Também se podem usar atributos quando se colocam todas as células numa só linha. Note que as células são separadas por duas barras verticais (||) e, em cada célula, os atributos são separados dos valores por uma só barra (|).

{| align=center border=1
|+ Recibo
|- style="background-color:#ffffcc"
! Prato !! Nº !! Preço
|-
| Entrada || align=center | 1 || align=right | 5,00
|-
| Prato do dia || align=center | 2 || align=right | 14,35
|- style="background-color:black; color:white"
| Total || align=center | || align=right | 19,35
|}

Recibo
Prato Preço
Entrada 1 5,00
Prato do dia 2 14,35
Total 19,35

Atributos «colspan» e «rowspan» do HTML

Podem usar-se os atributos colspan e rowspan do HTML nas células para fundir várias células numa mesma coluna ou linha. Por exemplo, com o colspan pode fundir-se a célula «Total» com a célula da coluna seguinte, que não é usada:

{| align=center border=1
|+ Recibo
|- style="background-color:#ffffcc"
! Prato
! Nº
! Preço
|-
| Entrada
| align=center | 1
| align=right | 5,00
|-
| Prato do dia
| align=center | 2
| align=right | 14,35
|- style="background-color:black; color:white"
| colspan=2 | Total
| align=right | 19,35
|}

Recibo
Prato Preço
Entrada 1 5,00
Prato do dia 2 14,35
Total 19,35

Com atributos HTML e estilos CSS

Atributos de estilo CSS podem ser usados com ou sem outros atributos do HTML.

{| style="color:green; background-color:#ffffcc;" cellpadding=10 align=center border=1
|+ Recibo
|- style="background-color:#ffffcc"
! Prato
! Nº
! Preço
|-
| Entrada
| align=center | 1
| align=right | 5,00
|-
| Prato do dia
| align=center | 2
| align=right | 14,35
|- style="background-color:black; color:white"
| colspan=2 | Total
| align=right | 19,35
|}

Recibo
Prato Preço
Entrada 1 5,00
Prato do dia 2 14,35
Total 19,35


Predefinição:Note/pt-br

Atributos no título

Podem adicionar-se atributos ao título.

{| style="color:green; background-color:#ffffcc;" cellpadding=10 align=center border=1
|+ align=bottom style="color:red" | '''Recibo'''
|- style="background-color:#ffffcc"
! Prato
! Nº
! Preço
|-
| Entrada
| align=center | 1
| align=right | 5,00
|-
| Prato do dia
| align=center | 2
| align=right | 14,35
|- style="background-color:black; color:white"
| colspan=2 | Total
| align=right | 19,35
|}

Recibo
Prato Preço
Entrada 1 5,00
Prato do dia 2 14,35
Total 19,35

Bordas simples de um único pixel

Por omissão, as tabelas no MediaWiki têm o atributo border-collapse: separate, que adiciona espaçamento às células das tabelas e também entre a borda externa da tabela e as células de conteúdo. Estando este atributo definido, mesmo que se defina um espaçamento zero entre as células elas ficarão espaçadas.

Este espaçamento pode ser eliminado usando a propriedade CSS border-collapse: collapse. Neste caso, o atributo cellspacing (ou a propriedade CSS border-spacing:) e a propriedade CSS padding: da tabela são ignorados e só a borda das células adjacentes (ou a borda externa da tabela para as células limítrofes) serão apresentadas.

{| style="border-collapse: collapse; border-width: 1px; border-style: solid; border-color: #000" align=center
|+ align=bottom style="color:red" | '''Recibo'''
|- style="background-color:#ffffcc"
! Prato
! Nº
! Preço
|-
| Entrada
| align=center | 1
| align=right | 5,00
|-
| Prato do dia
| align=center | 2
| align=right | 14,35
|- style="background-color:black; color:white"
| colspan=2 | Total
| align=right | 19,35
|}

Recibo
Prato Preço
Entrada 1 5,00
Prato do dia 2 14,35
Total 19,35

Advertências

Números negativos

Se começar uma célula numa nova linha e a célula contiver um número negativo (ou um parâmetro que ao ser calculado resulta num número negativo), por exemplo «|-6», a estrutura da tabela pode ficar incorreta, pois os caracteres «|-» serão interpretados como o elemento de criação de uma nova linha, não como uma célula. Para evitar este problema, coloque um espaço antes do sinal negativo «| -6», ou coloque as células numa só linha «||-6».

CSS em vez de atributos

As bordas da tabela que sejam especificadas através de CSS em vez do atributo border serão apresentadas incorretamente num pequeno número de browsers de texto.

Atributos aplicáveis a colunas, grupos de colunas e grupos de linhas

A sintaxe do MediaWiki para formatação de tabelas não suporta a especificação de atributos comuns para uma coluna (como permitido pelo elemento HTML <col />), grupos de colunas (elemento HTML <colgroup>...</colgroup>) e grupos de linhas (elementos HTML <thead>...</thead>, <tbody>...</tbody><code> e <code><tfoot>...</tfoot>). Este elementos padronizados do HTML não são aceitos mesmo que opte por usar a própria sintaxe HTML ou XHTML.

Todas as linhas e colunas (do cabeçalho e dos dados) da tabela são apresentados num único grupo de linhas implícito (elemento HTML <tbody>...</tbody><code>) sem quaisquer atributos ou estilos.

Links externos

Predefinição:Languages