Edição de tabelas wiki/As células
Será possível perceber que muito do que será apresentado aqui é similar ao que foi mostrado no capítulo Declaração. Porém, por os efeitos serem diferentes, convém redemonstrar.
colspan
[editar | editar código-fonte]Ajusta a fusão de colunas. Por padrão o texto fica alinha à esquerda.
{|class="wikitable"
!Lorem ipsum
!dolor sit amet
|-
|colspan=2|consectetuer
|-
|adipiscing elit
|Etiam eget
|}
| Lorem ipsum | dolor sit amet |
|---|---|
| consectetuer | |
| adipiscing elit | Etiam eget |
rowspan
[editar | editar código-fonte]Ajusta a fusão de linhas. Por padrão o texto fica alinhado à esquerda horizontal e ao centro vertical.
{|class="wikitable"
!Lorem ipsum
!dolor sit amet
|-
|rowspan=2|consectetuer
|adipiscing elit
|-
|Etiam eget
|}
| Lorem ipsum | dolor sit amet |
|---|---|
| consectetuer | adipiscing elit |
| Etiam eget |
style
[editar | editar código-fonte]Faz alterações visuais na tabela. Ao usar mais de uma opção, deve-se separá-las por ponto-e-vírgula.
background
[editar | editar código-fonte]{|class="wikitable"
!Lorem ipsum
!dolor sit amet
|-
|style="background: yellow"|consectetuer
|style="background: blue"|adipiscing elit
|-
|Etiam eget
|style="background: red"|ligula eu lectu
|}
| Lorem ipsum | dolor sit amet |
|---|---|
| consectetuer | adipiscing elit |
| Etiam eget | ligula eu lectu |
color
[editar | editar código-fonte]Define a cor do texto da célula.
{|class="wikitable"
!Lorem ipsum
!dolor sit amet
|-
|style="color: green"|consectetuer
|style="color: red"|adipiscing elit
|-
|style="color: yellow"|Etiam eget
|ligula eu lectu
|}
| Lorem ipsum | dolor sit amet |
|---|---|
| consectetuer | adipiscing elit |
| Etiam eget | ligula eu lectu |
text-align
[editar | editar código-fonte]Alinha o conteúdo da célula em relação às bordas da mesma (não apenas o texto). As opções possíveis são left, right ou center. Se não for incluído, o padrão será left.
{|class="wikitable"
!Lorem ipsum
!dolor sit amet
|-
|style="text-align:right"|consectetuer
|style="text-align:center"|adipiscing elit
|-
|Etiam eget
|style="text-align:right"|ligula eu lectu
|}
| Lorem ipsum dolor | sit amet consectetuer |
|---|---|
| adipiscing | elit |
| Etiam eget | ligula eu lectu |
vertical-align
[editar | editar código-fonte]Ajusta o alinhamento vertical do texto. O rowspan será usado neste exemplo para que o efeito possa ser observado. Os valores possível são top.
{|class="wikitable"
!Lorem ipsum
!dolor sit amet
|-
|rowspan=2 'style="vertical-align: top"|consectetuer
|adipiscing elit
|-
|Etiam eget
|}
| Lorem ipsum | dolor sit amet |
|---|---|
| consectetuer | adipiscing elit |
| Etiam eget |
width
[editar | editar código-fonte]Regula a largura da célula em relação à página, percentualmente ou em pixels. Note que ao configurar este parâmetro para uma célula, toda a coluna será alterada.
{|class="wikitable"
!Lorem ipsum
!dolor sit amet
|-
|style="width: 100%"|consectetuer
|adipiscing elit
|-
|Etiam eget
|ligula eu lectu
|}
| Lorem ipsum | dolor sit amet |
|---|---|
| consectetuer | adipiscing elit |
| Etiam eget | ligula eu lectu |
white-space
[editar | editar código-fonte]Configura o espaço em branco. Quando configurado com nowrap impede a quebra de linha do texto.
{|class="wikitable"
!Lorem ipsum
!dolor sit amet
|-
|style="white-space: nowrap"|Lorem ipsum dolor sit amet consectetuer adipiscing elit
|adipiscing elit
|-
|Etiam eget
|ligula eu lectu
|}
| Lorem ipsum | dolor sit amet |
|---|---|
| Lorem ipsum dolor sit amet consectetuer adipiscing elit | adipiscing elit |
| Etiam eget | ligula eu lectu |