[Tutorial] Criação e Personalização de Tabelas (parte 1)

Ir em baixo

[Tutorial] Criação e Personalização de Tabelas (parte 1)

Mensagem por JaFoste em Sab 8 Maio 2010 - 14:44

Fanta escreveu:
~ HTML - Criação e Personalização de Tabelas | (parte 1) ~


~ Para que serve? / Introdução básica
Então, este é outro tutorial que andam me pedindo ultimamente.
A criação de tabelas é muito importante, embora digam que não. É possível fazer inúmeras coisas se houver a criatividade de quem está aprendendo. Como a maioria aqui tem e é usuário de fóruns, vou dar uma adaptada a bbcode também. Em breve exemplos de algumas criações que utilizam tabelas.
Para começar, é bom que saiba o básico do HTML, veja em outros tópicos aqui mesmo, alguma coisa que fale o básico.
Dividi em duas partes pois uma vai ser o básico, e a outra algo mais avançado, tudo coloridinho como seria se estivesse sendo feito em um editor, espero que gostem.

~ Começando...
Vamos ao código principal, o nome é
.
O código determina que o que está dentro será tabelado, e que estamos fazendo uma tabela, obviamente.
Nas tabelas existem colunas, assim como no exel, as tags que determinam as linhas são e os que determinam as colunas são .
Então entrando agora na personalização, é possível determinar as cores, usando o bgcolor='COR', essa opção de personalização é integrada no <table> como também no <td>, veja um exemplo:

1 <table border=1px bgcolor='yellow'>
2 <tr>
3 <td>1ª coluna - 1ª linhatd>
4 <td bgcolor='#aaddbb'>2ª coluna - 1ª linhatd>
5 tr>
6 <tr>
7 <td>1ª coluna - 2ª linhatd>
8 <td>2ª coluna - 2ª linhatd>
9 tr>
10 table>

Coloquei uma contagem de linhas, para facilitar o entendimento da explicação. Vamos lá, agora vamos comentar o código!
Linha 1, abrimos a tag da tabela, definimos uma borda de um pixel e adicionamos uma cor ao background, yellow (amarela), as cores podem ser tanto em nome em inglês como também em códigos de cor.
Linha 2, abrimos uma linha.
Linha 3, abrimos uma coluna simples com o texto dentro e fechamos.
Linha 4, abrimos outroa coluna porém com uma cor de background definida, o texto dentro e fechamos.
Linha 5 e 6, respectivamente fechamos a primeira linha e abrimos a segunda.
Linha 7, repetimos o primeiro passo.
Linha 9, fechamos a linha.
Linha 10, fechamos toda a tabela.

~ Aprofundando...
Ainda existem outros atributos para as tabelas, alguns dos mais usados são:
cellspacing - especifica o tamanho dos espaços entre as células na tabela.
cellpadding - especifica o tamanho dos espaços entre a borda da célula e seu conteúdo.
border - especifica o tamanho da borda da tabela, porém só funciona na tag
.
width - largura da tabela ou coluna
height - algura da tabela ou coluna
rowspan - especifica quantas linhas a célula será mesclada
colspan - especifica quantas colunas a célula será mesclada

~ Usando o Rowspan e o Colspan
1 <table border=1 bgcolor='yellow'>
2 <tr>
3 <td rowspan=2>1ª coluna - 1ª linha + 2ª linhatd
>
4 tr>
5 <tr>
6 <td>1ª coluna - 2ª linha2ª coluna - 2ª linhatd>
7 tr>
8 table>
Então, na linha 3, nos definimos quer será mesclada 2 linhas. Vamos ver o exemplo aqui embaixo:
1ª coluna - 1ª linha + 2ª linha
1ª coluna - 2ª linha2ª coluna - 2ª linha

1 <table border=1 bgcolor='yellow'>
2 <tr>
3 <td colspan=2>1ª + 2ª coluna - 1ª linhatd>
4 tr>
5 <tr>
6 <td>1ª coluna - 2ª linhatd><td>2ª coluna - 2ª linhatd>
7 tr>
8 table>
Então, na terceira linha mesclamos duas colunas, vamos ver o exemplo do que acontece:

1ª + 2ª coluna - 1ª linha
1ª coluna - 2ª linha2ª coluna - 2ª linha


~ E o bbcode???
No bbcode, é tudo da mesma forma, se seu fórum aceitar o html basta fazer em html assim como ali foi feito, se só aceitar o bbcode, substitua as < > por [ ]. Exemplo:
Código:
1  [table border=1 bgcolor='yellow']
2    [tr]
3        [td]1ª coluna - 1ª linha[/td]
4        [td bgcolor='#aaddbb'>2ª coluna - 1ª linha[/td]
5    [/tr]
6  [/table]

~ Resultado da primeira tabela de exemplo acima
1ª coluna - 1ª linha 1ª coluna - 2ª linha 2ª coluna - 2ª linha


Créditos a: Steeph

____innovation____

Ainda és fraquinho, Convidado! Tens de postar mais Very Happy
Tens dúvidas sobre o fórum?Esclarece-as aqui.



Queres que o teu tópico seja respondido? Põe o conteúdo dentro desta TAG:
[code:1][hide]TEXTO[/hide][/code:1]
E, de seguida informa o pessoal que necessita de responder para ver a mensagem
avatar
JaFoste
Administrador
Administrador

Sexo : Masculino
Mensagens : 1192
iPoints : 6672
iReputation : 23
Data de inscrição : 09/01/2010
Localização : Portugal
Frase : Não deixes para hoje o que podes fazer amanhã
Rate : Sem Rate

Vencedor n 1º Lugar n 2º Lugar n 3º Lugar n
Warning! :
0 / 1000 / 100


http://innovation.forum.st

Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum