Help:Tabelas

Nota: Ao editar esta página, você concorda em publicar a sua contribuição no âmbito da licença CC0. Veja as páginas de ajuda do domínio público para mais informações.

Tabelas redireciona aqui; para obter informações sobre a estrutura da tabela do banco de dados, consulte Manual:Database layout/pt-br .

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

{|	início da tabela, obrigatório
|+	título da tabela, opcional; só pode ser colocado entre o início da tabela e a primeira linha da tabela
|-	linha da tabela, opcional na primeira linha -- a wiki assume a primeira linha mesmo sem este elemento.
!	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 de células com os dados da tabela, opcional! Células consecutivas de dados de tabela podem ser colocadas numa só linha, separadas por duas barras verticais (||), ou uma por linha, com cada linha começada por uma barra vertical (|).
|}	final da tabela, obrigatório

• 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 a marcação de escape <nowiki>|</nowiki>.

Informações básicas

Crie uma tabela com a barra de ferramentas do editor

No editor de wikitexto, coloque o cursor onde deseja inserir uma tabela. Em seguida, na barra de ferramentas, pressione “Avançado” e escolha o botão Tabela. Uma caixa de diálogo é aberta.

Na caixa de diálogo, você pode escolher se deseja ativar uma linha de cabeçalho da tabela, estilizar a tabela com borda e tornar a tabela classificável. Um exemplo de visualização é exibido. Você também pode definir as contagens de linhas e colunas necessárias. Em seguida, pressione o botão “Inserir”.

Por padrão, o seguinte código é gerado:

Código wiki:

{| class="wikitable" style="margin:auto"
|+ Texto da legenda
|-
! Texto do cabeçalho !! Texto do cabeçalho !! Texto do cabeçalho
|-
| Exemplo || Exemplo || Exemplo
|-
| Exemplo || Exemplo || Exemplo
|-
| Exemplo || Exemplo || Exemplo
|}

Resultado:

Texto da legenda

Texto do cabeçalho	Texto do cabeçalho	Texto do cabeçalho
Exemplo	Exemplo	Exemplo
Exemplo	Exemplo	Exemplo
Exemplo	Exemplo	Exemplo

Sintaxe básica

A tabela a seguir não possui bordas e um bom espaçamento mas mostra a estrutura mais simples com o elemento tabela.

Você digita	O resultado é
{| |Laranja |Maçã |- |Pão |Torta |- |Manteiga |Sorvete |}	Laranja Maçã Pão Torta Manteiga Sorvete

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 ‎<br /> no lugar.

Você digita	O resultado é
{| |Laranja||Maçã||mais |- |Pão||Torta||mais |- |Manteiga||Sorvete<br/>gelado||e<br/>mais |}	Laranja Maçã mais Pão Torta mais Manteiga Sorvete gelado e mais

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

Você digita	O resultado é
{| | Laranja || Maçã || mais |- | Pão || Torta || mais |- | Manteiga || Sorvete || e mais |}	Laranja Maçã mais Pão Torta mais Manteiga Sorvete e mais

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

Você digita

O resultado é

{| |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

Cabeçalhos de tabelas

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

Você digita	O resultado é
{| ! style="text-align:left;"| Item ! Quantidade ! Custo |- |Laranja |10 |7.00 |- |Pão |4 |3.00 |- |Manteiga |1 |5.00 |- !Total | |15.00 |}	Item Quantidade Custo Laranja 10 7.00 Pão 4 3.00 Manteiga 1 5.00 Total 15.00

Quando usar atributos como no cabeçalho 'Item', uma barra vertical '|' é usada para separação. Não um ponto de exclamação '!'.

Título

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

Você digita	O resultado é
{| |+Complementos alimentares |- |Laranja |Maçã |- |Pão |Torta |- |Manteiga |Sorvete |}	Complementos alimentares Laranja Maçã Pão Torta Manteiga Sorvete

class="wikitable"

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

Você digita	O resultado é
{| class="wikitable" |+Complementos alimentares |- |Laranja |Maçã |- |Pão |Torta |- |Manteiga |Sorvete |}	Complementos alimentares Laranja Maçã Pão Torta Manteiga Sorvete

colspan e rowspan HTML

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

Você digita	O resultado é
{| class="wikitable" !colspan="6"|Lista de compras |- |rowspan="2"|Pão e manteiga |Torta |Bolo |Folhado |colspan="2"|Croissant |- |Queijo |colspan="2"|Sorvete |Manteiga |Iogurte |}	Lista de compras Pão e manteiga Torta Bolo Folhado Croissant Queijo Sorvete Manteiga Iogurte

Note about large tables (noresize class)

The use of the wrapping div.noresize will ensure your table is optimized for mobile and is extremely important for large tables e.g. tables with more than 4 columns or large columns. Failure to use this element will cause your content to overlap UI elements e.g. the Vector 2022 sidebar or to break mobile display. This will cause the table to have a horizontal scroll bar when the table is too big for the content.

Shopping List
Areallyreallyreallyreallylongstringwillcauseyourtableto	Pie	Buns	Danish	Croissantsmaycausetexttoincreasethesizeofyourcolumnsoitbreaksoutofthecontent area if you do not wrap the table with noresize.
	Cheese	Ice cream		Butter	Yogurt

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.

Você digita	O resultado é
{| class="wikitable" style="text-align: center; color: green;" |Laranja |Maçã |12,333.00 |- |Pão |Torta |500.00 |- |Manteiga |Sorvete |1.00 |}	Laranja Maçã 12,333.00 Pão Torta 500.00 Manteiga Sorvete 1.00

Atributos em células

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

Você digita	O resultado é
{| class="wikitable" | Laranja | Maçã | style="text-align:right;" | 12,333.00 |- | Pão | Torta | style="text-align:right;" | 500.00 |- | Manteiga | Sorvete | style="text-align:right;" | 1.00 |}	Laranja Maçã 12,333.00 Pão Torta 500.00 Manteiga Sorvete 1.00

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

Você digita	O resultado é
{| class="wikitable" | Laranja || Maçã || style="text-align:right;" | 12,333.00 |- | Pão || Torta || style="text-align:right;" | 500.00 |- | Manteiga || Sorvete || style="text-align:right;" | 1.00 |}	Laranja Maçã 12,333.00 Pão Torta 500.00 Manteiga Sorvete 1.00

Atributos em linhas

Você pode inserir atributos em linhas também.

Você digita	O resultado é
{| class="wikitable" | Laranja | Maçã | style="text-align:right;"| 12,333.00 |- | Pão | Torta | style="text-align:right;"| 500.00 |- style="font-style: italic; color: green;" | Manteiga | Sorvete | style="text-align:right;"| 1.00 |}	Laranja Maçã 12,333.00 Pão Torta 500.00 Manteiga Sorvete 1.00

Atributos na legenda e cabeçalhos

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

Você digita	O resultado é
{| class="wikitable" |+ style="caption-side:bottom; color:#e76700;"|"Complementos alimentares" |- ! style="color:green" | Frutas ! style="color:red" | Gordos |- |Laranja |Manteiga |- |Pera |Torta |- |Maçã |Sorvete |}	"Complementos alimentares" Frutas Gordos Laranja Manteiga Pera Torta Maçã Sorvete

Largura da borda

Se "border-width:" tem apenas um número, este valor se aplica à largura da borda nos quatro lados:

Você digita	O resultado é
{|style="border-style: solid; border-width: 20px" | Olá |}	Olá

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 ↑→↓←):

Você digita	O resultado é
{|style="border-style: solid; border-width: 10px 20px 100px 0" | Olá |}	Olá

Quando houver menos de 4 valores:

• três valores, ou seja, top, right, bottom: então o valor padrão para left é o de right (segundo valor). A largura é então a mesma no lado esquerdo e direito.
• dois valores, ou seja, top, right: então o valor padrão para bottom é top (primeiro valor), e left por padrão recebe o valor de right (segundo valor). A largura na parte superior é igual à largura na parte inferior; a largura à esquerda é igual à direita.
• um valor, ou seja, top: então o valor padrão para right é top e é o mesmo para bottom e left. A quarta largura é a mesma e constrói uma borda regular. Este é um atalho de escrita.

Outro método para definir as larguras dos quatro lados de uma célula é usar "border-left", "border-right", "border-top" e "border-bottom":

Você digita	O resultado é
{|style="border-left:solid 10px black;border-right:solid 20px black;border-top:solid 30px black;border-bottom:solid 40px black;" align="center" | Olá |}	Olá

Os atributos HTML (como "width=", "border=", "cellspacing=", "cellpadding=") não precisam de uma unidade de comprimento (a unidade pixel é utilizada por padrão). Eles também são inválidos em HTML 5.

Usa-se "cellpadding" para definir o espaço entre a parede celular e o conteúdo da célula.

As propriedades de estilo CSS (que sobrescrevem os atributos HTML) exigem uma unidade de comprimento explícita (se o valor não for 0) como "px" para pixel.

Com atributos HTML e estilos CSS

Os atributos de estilo CSS podem ser adicionados com ou sem outros atributos HTML.

Você digita	O resultado é
{| class="wikitable" style="color:green; background-color:#ffffcc;" cellpadding="10" |Laranja |Maçã |- |Pão |Torta |- |Manteiga |Sorvete |}	Laranja Maçã Pão Torta Manteiga Sorvete

Preenchimento

Representa a margem interna entre o conteúdo e a borda da célula.

Você digita	O resultado é
{|class=wikitable | style="padding: 10px" | Exemplo de style="padding:10px" |- | style="padding: 50px" | Exemplo de style="padding:50px"<br/><br/>Especifique o preenchimento em '''CADA CÉLULA''' |- | style="padding:100px" | Exemplo de style="padding:100px" |}	Exemplo de style="padding:10px" Exemplo de style="padding:50px" Especifique o preenchimento em CADA CÉLULA Exemplo de style="padding:100px"

Largura de coluna

Largura de coluna pode ser adicionada como a seguir.

Você digita

{| class="wikitable" style="width: 85%;"
| colspan="2" | Esta largura de coluna ocupa 85% da largura da tela
|-
| style="width: 30%"| '''Esta coluna ocupa 30% dos 85% da largura da tela'''
| style="width: 70%"| '''Esta coluna ocupa 70% dos 85% da largura da tela'''
|}

O resultado é

Esta largura de coluna ocupa 85% da largura da tela
Esta coluna ocupa 30% dos 85% da largura da tela	Esta coluna ocupa 70% dos 85% da largura da tela

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 as tabelas são geradas em formatos 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 o 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:

Você digita	O resultado é
{| class="wikitable" |- ! scope="col"| Item ! scope="col"| Quantidade ! scope="col"| Preço |- ! scope="row"| Pão | 0.3 kg | $0.65 |- ! scope="row"| Manteiga | 0.125 kg | $1.25 |- ! scope="row" colspan="2"| Total | $1.90 |}	Item Quantidade Preço Pão 0.3 kg $0.65 Manteiga 0.125 kg $1.25 Total $1.90

Alinhamento

Alinhamento de tabelas

O alinhamento de tabelas é obtido usando CSS. O alinhamento de tabelas é controlado por margens. Uma margem fixa num lado irá fazer com 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:

Você digita

O resultado é

{| class="wikitable" style="margin-left: auto; margin-right: 0px;" | Laranja | Maçã |- | Pão | Torta |- | Manteiga | Sorvete |} 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.

Laranja Maçã Pão Torta Manteiga Sorvete 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.

E uma tabela alinhada no centro:

Você digita	O resultado é
{| class="wikitable" style="margin: auto;" | Laranja | Maçã |- | Pão | Torta |- | Manteiga | Sorvete |} 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.	Laranja Maçã Pão Torta Manteiga Sorvete 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.

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 float, que pode especificar para onde a tabela flutua, se 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.

Você digita

O resultado é

{| class="wikitable" style="float:right; margin-left: 10px;" | Laranja | Maçã |- | Pão | Torta |- | Manteiga | Sorvete |} 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.

Laranja Maçã Pão Torta Manteiga Sorvete 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: text-align e vertical-align. text-align pode ser especificado na tabela, linha ou células individuais, enquanto vertical-align só pode ser especificado em linhas e células individuais.

Você digita

O resultado é

{| class="wikitable" |- style="vertical-align:top;" | style="height:100px; width:100px; text-align:left;" | A | style="height:100px; width:100px; text-align:center;" | B | style="height:100px; width:100px; text-align:right;" | C |- style="vertical-align:middle;" | style="height:100px; width:100px; text-align:left;" | D | style="height:100px; width:100px; text-align:center;" | E | style="height:100px; width:100px; text-align:right;" | F |- style="vertical-align:bottom;" | style="height:100px; width:100px; text-align:left;" | G | style="height:100px; width:100px; text-align:center;" | H | style="height:100px; width:100px; text-align:right;" | I |}

A B C D E F G H I

Ressalvas

Números negativos

Se você iniciar uma célula numa 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 como marcação wiki de linha, e não de célula. Para evitar isso, insira um espaço antes do valor (| -6) ou use elementos de célula in-line (|| -6).

CSS vs atributos

As bordas de tabelas especificadas através de CSS ao invés do atributo de borda serão exibidas incorretamente num 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 ‎<col />), grupos de colunas (elemento HTML ‎<colgroup>‎</colgroup>) e grupos de linhas (elementos HTML ‎<thead>‎</thead>, ‎<tbody>‎</tbody> e ‎<tfoot>‎</tfoot>). 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 ‎<tbody>‎</tbody>) sem quaisquer atributos ou estilos.

Tabelas e o Editor Visual (VE)

Ver também: Help:Editor Visual/Guia do usuário

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

Agora pode mover ou excluir colunas e linhas

Clique num 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.

Ferramentas de ajuda

• Excel2Wiki permite copiar uma planilha do Excel, Apache OpenOffice, LibreOffice ou Gnumeric para convertê-la em uma tabela de código wiki.

Ver também

• Ordenando listas de uma tabela
• w:Help:Tables
• Uma ferramenta visual que ajuda na geração de tabelas