Exibir posts
61
Orientações / [Guia]: Tabelas
« Online: 07 de Abril, 2020, 02:49:52 am »
Uma tabela é uma representação matricial, isto é, em linhas e colunas, tantas quantas a aplicação que se queira. Também nos permite acomodar imagens e textos, proporcionando uma boa estética ao seu tópico. Para poder utilizar a tabela no fórum é necessário utilizar os códigos BBcode, saber qual é o código da tabela, linha ou coluna.
Para dar início a uma criação de tabela, clique na ferramenta de "Inserir Tabela", que já nos permite criar uma tabela a partir de uma estrutura básica.
Exemplo 1: Tabela com 1 linha e 1 coluna
Exemplo 2: Tabela com 1 linha e 2 colunas
Exemplo 3: Tabela com 2 linhas e 2 colunas
E estrutura da tabela se inicia com (table) e é finalizada com (/table), dentro dela deve haver uma ou mais linhas que se deve iniciar com (tr) e finalizada com (/tr). Dentro de cada linha deve haver uma ou mais colunas, que se iniciam com (td) e se finaliza com (/td), dentro de cada coluna podemos colocar textos ou imagens, editar os textos e modificar o tamanho das imagens, elas também podem ser colocadas dentro das linhas ou simplesmente dentro da tabela, omitindo as colunas, mas não terão nenhum tipo de posicionamento de acordo com uma tabela.
Se deseja colocar imagens, você pode modificar o tamanho dela sem necessidade de editá-la em algum programa, somente utilizando os códigos width (altura) e height (altura).
Essas dimensões podem ser usadas juntas ou apenas uma, e devem ser colocados no código inicial da imagem.
Ao usá-las juntas podemos modificar a altura e a largura ao nosso gosto, mas poderá ocorrer deformidades/e ou perda de qualidade da imagem. Ao utilizar uma única dimensão (width ou height), a outra será colocada automaticamente para que a imagem não se deforme e perca sua qualidade.
Exemplo 1: Nesse exemplo coloquei uma imagem e designei 100 pixels de largura para ela, isso significa que a altura a ser colocada será automaticamente compatível com sua largura, para que não haja deformidades.
Código: [Selecionar]
[img width=100]http://imgfz.com/i/N7PiJ9u.png[/img]O resultado é esse: uma imagem com 100 pixels de largura e sem deformidades
Exemplo 2: Nesse exemplo coloquei uma imagem e designei 100 pixels de altura para ela, isso significa que a largura a ser colocada será automaticamente compatível com sua altura, para que não haja deformidades.
Código: [Selecionar]
[img height=100]http://imgfz.com/i/N7PiJ9u.png[/img]
O resultado é esse: uma imagem com 100 pixels de altura e sem deformidades
Exemplo 3: Neste exemplo foi atribuído as duas dimensões na imagem, uma altura de 57 pixels e largura de 70 pixels.
Código: [Selecionar]
[img width=70 height=57]http://imgfz.com/i/N7PiJ9u.png[/img]O resultado é esse: uma imagem com 57 pixels de altura e 70 pixels de largura, mas com deformidades
Caso queira uma imagem que te redirecione a outro link, basta utilizar a ferramenta de inserir hyperlink (Clique aqui para saber mais).
 |  |
Código: [Selecionar]
[table]
[tr]
[td][url=br.fenixzone.com/foro][img]http://imgfz.com/i/6J1uOsp.png[/img][/url][/td]
[td][url=br.fenixzone.com/foro][img]http://imgfz.com/i/zcpLWnh.png[/img][/url][/td]
[/tr]
[/table]Caso a tabela possua texto, podemos atribuir efeitos, cores, tamanhos, etc. Ao seu critério, devem ser colocados no local correspondente para não comprometer a tabela.
Exemplo: O texto é colocado em cada coluna de cada linha com os nomes das alterações feitas
Código: [Selecionar]
[table]
[tr]
[td][b][color=red]Vermelho e negrito..[/color][/b][/td]
[td][i][color=green]Verde e itálico.[/color][/i][/td]
[td][move][b][color=blue]Azul negrito com movimento.[/color][/b][/move][/td]
[/tr]
[tr]
[td][u][font=arial black]Arial Black e sublinhado.[/font][/u][/td]
[td][size=14pt][color=pink]Rosa fonte 14.[/color][/size][/td]
[td][s][glow=green,2,300]Com glow, verde e riscado.[/glow][/s][/td]
[/tr]
[/table]
Resultado: o texto já possui as alterações feitas e é colocado sem problemas na tabela
| Vermelho e negrito.. | Verde e itálico. | |
| Arial Black e sublinhado. | Rosa fonte 14. |
Também é possível centralizar a tabela, o código deve ser colocado no início e no fim da tabela.
Exemplo:
Código: [Selecionar]
[center][table]
[tr]
[td]Vicente 1[/td]
[td]Vicente 2[/td]
[/tr]
[tr]
[td]Vicente 3[/td]
[td]Vicente 4[/td]
[/tr]
[/table][/center]Resultado:
| John 1 | John 2 |
| John 3 | John 4 |
EXEMPLO DE MODELOS
MODELO 1:
 | | | | |
Código: [Selecionar]
[center][img width=800 height=228]http://imgfz.com/i/RaSZYAw.png[/img][/center]
[center][table]
[tr]
[td][img width=157]http://imgfz.com/i/Q4dNRBy.png[/img][/td]
[td][img width=157]http://imgfz.com/i/Q4dNRBy.png[/img][/td]
[td][img width=157]http://imgfz.com/i/Q4dNRBy.png[/img][/td]
[td][img width=157]http://imgfz.com/i/Q4dNRBy.png[/img][/td]
[td][img width=157]http://imgfz.com/i/Q4dNRBy.png[/img][/td]
[/tr]
[/table][/center]MODELO 2:
 | | | | |
| | | | |
|  |
Código: [Selecionar]
[center][img width=800 height=185]http://imgfz.com/i/MGLkm1u.png[/img]
[hr]
[table]
[tr]
[td][img]http://imgfz.com/i/x7CADkM.png[/img][/td]
[td][img]http://imgfz.com/i/x7CADkM.png[/img][/td]
[td][img]http://imgfz.com/i/x7CADkM.png[/img][/td]
[td][img]http://imgfz.com/i/x7CADkM.png[/img][/td]
[td][img]http://imgfz.com/i/x7CADkM.png[/img][/td]
[/tr]
[tr]
[td]
[img]http://imgfz.com/i/x7CADkM.png[/img]
[/td]
[td]
[img]http://imgfz.com/i/x7CADkM.png[/img]
[/td]
[td]
[img]http://imgfz.com/i/x7CADkM.png[/img]
[/td]
[td]
[img]http://imgfz.com/i/x7CADkM.png[/img]
[/td]
[td]
[img]http://imgfz.com/i/x7CADkM.png[/img]
[/td]
[/tr]
[/table]
[table]
[tr]
[td]
[table][tr][td][img]http://imgfz.com/i/x7CADkM.png[/img][/td][/tr]
[tr][td][img]http://imgfz.com/i/x7CADkM.png[/img][/td][/tr]
[tr][td][img]http://imgfz.com/i/x7CADkM.png[/img][/td][/tr]
[tr][td][img]http://imgfz.com/i/x7CADkM.png[/img][/td][/tr]
[tr][td][img]http://imgfz.com/i/x7CADkM.png[/img][/td][/tr]
[tr][td][img]http://imgfz.com/i/x7CADkM.png[/img][/td][/tr]
[tr][td][img]http://imgfz.com/i/x7CADkM.png[/img][/td][/tr]
[/table]
[/td][td][img]http://imgfz.com/i/OBCfLeG.png[/img][/td][/tr]
[/table]
[hr]
[img width=800 height=68]http://imgfz.com/i/hq415oS.png[/img][/center]MODELO 3:
| | | | |
| | | | |
Código: [Selecionar]
[center][img width=800 height=228]http://imgfz.com/i/PiwgJ8F.png[/img][/center]
[center][table]
[tr]
[td][img width=157]http://imgfz.com/i/Q4dNRBy.png[/img][/td]
[td][img width=157]http://imgfz.com/i/Q4dNRBy.png[/img][/td]
[td][img width=157]http://imgfz.com/i/Q4dNRBy.png[/img][/td]
[td][img width=157]http://imgfz.com/i/Q4dNRBy.png[/img][/td]
[td][img width=157]http://imgfz.com/i/Q4dNRBy.png[/img][/td]
[/tr]
[tr]
[td][img width=157]http://imgfz.com/i/Q4dNRBy.png[/img][/td]
[td][img width=157]http://imgfz.com/i/Q4dNRBy.png[/img][/td]
[td][img width=157]http://imgfz.com/i/Q4dNRBy.png[/img][/td]
[td][img width=157]http://imgfz.com/i/Q4dNRBy.png[/img][/td]
[td][img width=157]http://imgfz.com/i/Q4dNRBy.png[/img][/td]
[/tr]
[/table][/center]MODELO 4:
| | | | |
|  |
Código: [Selecionar]
[center][img width=800 height=185]http://imgfz.com/i/ToRhcVN.png[/img]
[hr]
[table]
[tr]
[td]
[img]http://imgfz.com/i/N7PiJ9u.png[/img]
[/td]
[td]
[img]http://imgfz.com/i/N7PiJ9u.png[/img]
[/td]
[td]
[img]http://imgfz.com/i/N7PiJ9u.png[/img]
[/td]
[td]
[img]http://imgfz.com/i/N7PiJ9u.png[/img]
[/td]
[td]
[img]http://imgfz.com/i/N7PiJ9u.png[/img]
[/td]
[/tr]
[/table]
[table]
[tr]
[td]
[table][tr][td][img]http://imgfz.com/i/N7PiJ9u.png[/img][/td][/tr]
[tr][td][img]http://imgfz.com/i/N7PiJ9u.png[/img][/td][/tr]
[tr][td][img]http://imgfz.com/i/N7PiJ9u.png[/img][/td][/tr]
[tr][td][img]http://imgfz.com/i/N7PiJ9u.png[/img][/td][/tr]
[tr][td][img]http://imgfz.com/i/N7PiJ9u.png[/img][/td][/tr]
[tr][td][img]http://imgfz.com/i/N7PiJ9u.png[/img][/td][/tr]
[tr][td][img]http://imgfz.com/i/N7PiJ9u.png[/img][/td][/tr]
[/table]
[/td][td][img]http://imgfz.com/i/PvIMbHl.png[/img][/td][/tr]
[/table]
[hr]
[img width=800 height=68]http://imgfz.com/i/n4m3TXs.png[/img][/center]MODELO 5:
| Nomes | Apelido | DNI | Telefone | Nacionalidade |
| Vazio | Vazio | Vazio | Vazio | Vazio |
| Vazio | Vazio | Vazio | Vazio | Vazio |
| Vazio | Vazio | Vazio | Vazio | Vazio |
| Vazio | Vazio | Vazio | Vazio | Vazio |
Código: [Selecionar]
[table]
[tr]
[td][b]Nomes[/b][/td]
[td][b]Apelido[/b][/td]
[td][b]DNI[/b][/td]
[td][b]Telefone[/b][/td]
[td][b]Nacionalidade[/b][/td]
[/tr]
[tr]
[td]Vazio[/td]
[td]Vazio[/td]
[td]Vazio[/td]
[td]Vazio[/td]
[td]Vazio[/td]
[/tr]
[tr]
[td]Vazio[/td]
[td]Vazio[/td]
[td]Vazio[/td]
[td]Vazio[/td]
[td]Vazio[/td]
[/tr]
[tr]
[td]Vazio[/td]
[td]Vazio[/td]
[td]Vazio[/td]
[td]Vazio[/td]
[td]Vazio[/td]
[/tr]
[tr]
[td]Vazio[/td]
[td]Vazio[/td]
[td]Vazio[/td]
[td]Vazio[/td]
[td]Vazio[/td]
[/tr]
[/table]Criado por: Vicente Romo - ROL 1
Tradução e adaptção: John Wood - ROL BR/PT
Tradução e adaptção: John Wood - ROL BR/PT
