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

[JaFoste]

~ 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ª linha	2ª 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ª linha	2ª 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