Help:Tables/pt-br


 *  Tabelas  redireciona aqui; para obter informações sobre a estrutura da tabela do banco de dados, consulte.

As tabelas podem ser criadas em páginas wiki. Como regra geral, é aconselhável evitar o uso de tabelas, a menos que seja realmente necessário. A marcação de tabelas geralmente dificulta a edição de páginas.

Resumo dos elementos wiki de construção de tabelas

 * Os elementos de construção de tabelas têm de começar numa linha nova, exceto os sinais duplos e  para opcionalmente adicionar elementos consecutivos numa só linha. No entanto, espaços em branco no início da linha são ignorados.
 * Atributos HTML. Cada elemento, exceto o final da tabela, opcionalmente aceita um ou mais atributos HTML. Os atributos têm de estar na mesma linha que o elemento. Separe os atributos entre si com um só espaço.
 * As células e títulos ( ou ,   ou  , e  ) têm conteúdo. Por isso, separe os atributos do conteúdo usando uma só barra vertical . O conteúdo da célula pode ser colocado na mesma linha ou nas linhas seguintes.
 * Os elementos da tabela e das linhas ( e  ) não têm conteúdo. Não coloque a barra vertical  após os atributos opcionais. Se colocar, por erro, uma barra vertical depois dos atributos de um elemento de tabela ou de linha, o analisador sintático apaga a barra vertical e o último atributo se este estiver encostado na barra vertical!
 * Conteúdo pode (a) seguir seu elemento de célula na mesma linha após quaisquer atributos HTML opcionais ou (b) em linhas abaixo do elemento de célula. Conteúdo que usa elementos wiki que precisam começar em uma nova linha, como listas, cabeçalhos, ou tabelas aninhadas, deve estar em sua própria nova linha.
 * Barra vertical como conteúdo. Para inserir um caractere de barra vertical em uma tabela, use o elemento wiki &lt;nowiki&gt; &lt;/nowiki&gt;.

Informações básicas
A tabela a seguir não possui bordas e um bom espaçamento mas mostra a estrutura mais simples com o elemento tabela.

{| style="width:100%" ! style="width: 50%;"|Você digita ! style="width: 50%;"|O resultado é
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

As células na mesma linha podem ser listadas em uma linha separadas por  (duas barras verticais). Se o texto na célula precisar conter uma quebra de linha, use  no lugar.

{| style="width:100%" ! style="width: 50%;"|Você digita ! style="width: 50%;"|O resultado é
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

Espaços extras dentro de células em elementos wiki, como nos elementos wiki abaixo, não afetam a geração da tabela.

{| style="width:100%" ! style="width: 50%;"|Você digita ! style="width: 50%;"|O resultado é
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

Você também pode inserir textos mais longos ou sintaxe wiki mais complexa dentro de tabelas:

{| style="width:100%" ! style="width: 50%;"|Você digita ! style="width: 50%;"|O resultado é
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

Cabeçalhos de tabelas
Cabeçalhos de tabelas podem ser criados usando " " (ponto de exclamação) ao invés de " " (barra vertical). Cabeçalhos normalmente aparecem em negrito e alinhados no centro por padrão.

{| style="width:100%" ! style="width: 50%;"|Você digita ! style="width: 50%;"|O resultado é
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

Título
Um título de tabela pode ser adicionado no topo de qualquer tabela como mostrado abaixo.

class="wikitable"
Estilização básica (cor de fundo cinza claro, bordas, preenchimento e alinhamento à esquerda) pode ser obtida adicionando class="wikitable".

colspan e rowspan HTML
Você pode usar os atributos HTML colspan e rowspan em células para criar um layout avançado.

{| style="width:100%" ! style="width: 50%;"|Você digita ! style="width: 50%;"|O resultado é
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

Atributos HTML
Você pode adicionar atributos HTML à tabelas. Para consultar a fonte oficial sobre atributos HTML, veja a página sobre tabelas da Especificação HTML da W3C.

Atributos em tabelas
Inserir atributos após o elemento de início da tabela aplica estes atributos para a tabela inteira.

{| style="width:100%" ! style="width: 50%;"| Você digita ! style="width: 50%;"| O resultado é
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

Atributos em células
Você pode colocar atributos em células individuais. Por exemplo, números podem ficar melhores alinhados à direita.

{| style="width:100%" ! style="width: 50%;"| Você digita ! style="width: 50%;"| O resultado é
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

Você também pode usar atributos em células quando listar múltiplas células em uma única linha. Note que células são separadas por, e dentro de cada célula o(s) atriuto(s) e valor(es) são separados por.

{| style="width:100%" ! style="width: 50%;"| Você digita ! style="width: 50%;"| O resultado é
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

Atributos em linhas
Você pode inserir atributos em linhas também.

{| style="width:100%" ! style="width: 50%;"|Você digita ! style="width: 50%;"|O resultado é
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

Atributos na legenda e cabeçalhos
Atributos podem ser adicionados ao título e cabeçalhos como mostrado abaixo.

{| style="width:100%" ! style="width: 50%;"|Você digita ! style="width: 50%;"|O resultado é
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

Borda de tabela simples de um pixel
Um exemplo de uma borda de tabela de um pixel:

{| style="width:100%" ! style="width:50%" | Você digita ! style="width:50%" | O resultado é
 * style="padding: 5px;" |
 * style="padding: 5px;" |
 * style="padding: 20px;"|


 * }

Largura da borda
Se "border-width:" tem apenas um número, este valor se aplica à largura da borda nos quatro lados: {| style="width:100%" ! style="width:50%" | Você digita ! style="width:50%" | O resultado é
 * style="padding: 5px;" |
 * style="padding: 5px;" |
 * style="padding: 20px;"|


 * }

Se "border-width:" tem mais do que um número, os quatro número se referem às larguras das bordas superior, direita, inferior, esquerda(LEMBRE do sentido horário &uarr;&rarr;&darr;&larr;):

{| style="width:100%" ! style="width:50%" | Você digita ! style="width:50%" | O resultado é
 * style="padding: 5px;" |
 * style="padding: 5px;" |
 * style="padding: 20px;"|


 * }


 * Quando houver menos de 4 valores:
 * três valores, ou seja,,  ,  : então o valor padrão para   é o de   (segundo valor). A largura é então a mesma no lado esquerdo e direito.
 * two values i.e.,  : then the default value for   is the one of   (first value), and   by default is assigned the value of   (second value). Width on top is then the same as on bottom; width on left is the same as on right.
 * one value i.e. : then the default value for   is the one of   and it is the same for   and  . The fourth width are the same and build a regular border. This is a writing shortcut.

Outro método para definir as larguras dos quatro lados de uma célula é usar "border-left", "border-right", "border-top" e "border-bottom": {| style="width:100%" ! style="width:50%" | Você digita ! style="width:50%" | O resultado é
 * style="padding: 5px;" |
 * style="padding: 5px;" |
 * style="padding: 20px;"|


 * }

Com atributos HTML e estilos CSS
Atributos de estilo CSS podem ser adicionados com ou sem outros atributos HTML.

Padding
{| style="width:100%;" ! style="width: 50%;"| You type ! style="width: 50%;"| You get
 * -valign=top
 * style="padding:10px" |


 * }

Largura de coluna
Largura de coluna pode ser adicionada como a seguir.

Você digita

O resultado é

Acessibilidade de células de cabeçalho de tabela
Células de cabeçalho de tabela não especificam explicitamente à quais células de dados de tabela elas se aplicam (aquelas à direita, na mesma linha, ou aquelas abaixo na mesma coluna). Quando a tabela é gerada em um ambiente visual 2D, isso é normalmente fácil de inferir.

No entanto quando tabelas são geradas em mídias não-visuais, você pode ajudar o navegador a determinar qual célula de cabeçalho de tabela se aplica à descrição de qualquer célula selecionada (de forma a repetir seu conteúdo em algum ajudante de acessibilidade) usando um atributo scope="row" ou scope="col" em células de cabeçalho de tabela. Na maioria dos casos com tabelas simples, você usará scope="col" em todas as células de cabeçalho na primeira linha, e scope="row" na primeira célula das linhas seguintes:

{| style="width:100%" ! style="width: 50%;"|Você digita ! style="width: 50%;"|O resultado é
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

Alinhamento de tabelas
Alinhamento de tabelas é obtido usando CSS. O alinhamento de tabelas é controlado por margens. Uma margem fixa em um lado irá fazer que a tabela fique alinhada neste lado, se o lado oposto da margem é definido como "auto". Para ter uma tabela alinhada no centro, você deve definir as duas margens como "auto"

Por exemplo, uma tabela alinhada à direita:

{| style="width:100%" ! style="width: 50%;"|Você digita ! style="width: 50%;"|O resultado é
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

E uma tabela alinhada no centro:

{| style="width:100%" ! style="width: 50%;"|Você digita ! style="width: 50%;"|O resultado é
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

Tabela flutuando ao redor do texto
Se você alinhar a tabela à direita ou esquerda da página, o texto que vem depois da tabela começa no fim da tabela, deixando um espaço vazio ao redor da tabela. Você pode fazer o texto ficar ao redor da tabela fazendo a tabela "flutuar" ao redor do texto ao invés de apenas alinhá-la. Isso pode ser obtido usando o atributo CSS, que pode especificar onde a tabela flutua para o lado direito ou para o esquerdo. Quando usar "float", margens não controlam alinhamento de tabela e podem ser usadas para especificar a margem entre a tabela e o texto em volta.

{| style="width:100%" ! style="width: 50%;"|Você digita ! style="width: 50%;"|O resultado é
 * style="padding: 5px;"|
 * style="padding: 5px;"|

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
 * style="padding: 5px;"|

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
 * }

Alinhamento do conteúdo de células
O alinhamento de conteúdo de células pode ser controlado com 2 diferentes propriedades CSS:  e. pode ser especificado na tabela, linha ou células individuais, enquanto  só pode ser especificado em linhas e células individuais.

{| style="width:100%" ! style="width: 50%;"|Você digita ! style="width: 50%;"|O resultado é
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

Números negativos
Se você iniciar uma célula em uma nova linha com um número negativo com um sinal de menos (ou um parâmetro que resulta em um número negativo), sua tabela pode ficar quebrada, porque os caracteres  serão interpretados elementos wiki de linha de tabela, e não célula de tabela. Para evitar isso, insira um espaço antes do valor ou use elementos de célula in-line.

CSS vs atributos
Bordas de tabelas especificadas através de CSS ao invés do atributo de borda serão exibidas incorretamente em um pequeno subconjunto de navegadores de texto.

Atributos comuns para colunas, grupos de colunas e grupos de linhas
A sintaxe da MediaWiki para tabelas, no momento não oferece suporte para especificação de atributos comuns para colunas (com o elemento HTML ), grupos de colunas (elemento HTML  ) e grupos de linhas (elementos HTML ,   e  ). Esses elementos HTML padrão não são aceitos nem em sua sintaxe HTML ou XHTML.

Todas as linhas e células (cabeçalho e dados) da tabela são gerados dentro de um único grupo implícito de linhas (elemento HTML ) sem quaisquer atributos ou estilos.

Tabelas e o Editor Visual (VE)

 * Ver também: 

Veja T108245: "Fully support basic table editing in the visual editor". Veja a lista de tarefas. Tarefas concluídas são atingido. Pode ser difícil descobrir, a partir da linguagem técnica, o que exatamente foi melhorado ou quais recursos foram adicionados. Por favor, adicione informações explicativas abaixo.

Agora pode mover ou excluir colunas e linhas
Clique em um cabeçalho de coluna ou linha. Em seguida, clique na seta. No menu pop-up, clique em "Mover" ou "Excluir".

Inserir linha ou coluna em branco
No mesmo menu, clique em "Inserir".

Copiar a tabela da página da Web para o Editor Visual
É possível copiar e colar uma tabela de uma página da web diretamente no Editor Visual (VE). Para fazer isso com segurança, use uma caixa de proteção e verifique a tabela quanto à codificação adequada no modo de fonte wikitexto e à exibição adequada no Editor Visual e no modo de visualização.

Ver também

 * Ordenando listas de uma tabela
 * m:Help:Sorting
 * w:Help:Tables
 * Ferramenta fácil que ajuda na geração de tabelas