Help:Tables/pt-br


 * Para ver a estrutura de tabelas do banco de dados da MediaWiki, acesse 

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;"|


 * }

Nota: 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.

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, 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.

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;"|


 * }

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 dessa ordem):

{| 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 do que quatro números, o valor para a borda esquerda é obtido do valor da borda direita, o valor para a borda inferior é obtido do valor da borda superior, e o valor da borda direita é obtido do valor da borda superior.

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;"|


 * }

With HTML attributes and CSS styles
CSS style attributes can be added with or without other HTML attributes.

Atributos
Attributes can be added to the caption and headers as follows.

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


 * }

Column width
Column width can be added as follows.

Você digita

O resultado é

Accessibility of table header cells
Table header cells do not explicitly specify which table data cells they apply to (those on their right on the same row, or those below them on the same column). When the table is rendered in a visual 2D environment, this is usually easy to infer.

However when tables are rendered on non-visual media, you can help the browser to determine which table header cell applies to the description of any selected cell (in order to repeat its content in some accessibility helper) using a scope="row" or scope="col" attribute on table header cells. In most cases with simple tables, you'll use scope="col" on all header cells of the first row, and scope="row" on the first cell of the following rows:

{| 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. A fixed margin on one side will make the table to be aligned to that side, if on the opposite side the margin is defined as auto. To have a table center aligned, you should set both margins to 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;"|


 * }

Table floating around text
If you align a table to the right or the left side of the page, the text that comes after the table starts at the end of it, leaving an empty space around the table. You can make the text to be wrapped around the table by making the table to float around the text instead of just aligning it. This can be achieved using the  CSS attribute, which can specify where the table floats to the right side or to the left. When using float, margins doesn't control table alignment and can be used to specify the margin between the table and the surrounding text.

{| 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
The alignment of cell contents can be controlled with 2 different CSS properties:  and. can be specified at the table, row or individual cells, while  only can be specified at individual rows or cells.

{| 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
If you start a cell on a new line with a negative number with a minus sign (or a parameter that evaluates to a negative number), your table can get broken, because the characters  will be parsed as the wiki markup for table row, not table cell. To avoid this, insert a space before the value or use in-line cell markup.

CSS vs atributos
Table borders specified through CSS rather than the border attribute will render incorrectly in a small subset of text browsers.

Common attributes for columns, column groups and row groups
The MediaWiki syntax for tables currently offers no support for specifying common attributes for columns (with the HTML element ), column groups (HTML element  ) and row groups (HTML elements ,   and  ). Esses elementos HTML parão não são aceitos nem em sua sintaxe HTML ou XHTML.

All the rows and cells (header or data) of the table are rendered within a single implicit row group (HTML element ) without any attributes or styles.

Ver também

 * Sorting rows of a table
 * Ferramenta fácil que ajuda na geração de tabelas
 * Ferramenta fácil que ajuda na geração de tabelas
 * Ferramenta fácil que ajuda na geração de tabelas