[HTML] - Criação e personalização de tabelas (Parte 1)

~ 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 é <table> </table>.
O código <table> 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 <tr> </tr> e os que determinam as colunas são <td> </td>.
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 aqui nesta página: Exemplo 1.

1 <table border="1px" bgcolor='yellow'>
2 <tr>
3 <td>1ª coluna - 1ª linha</td>
4 <td bgcolor='#aaddbb'>2ª coluna - 1ª linha</td>
5 </tr>
6 <tr>
7 <td>1ª coluna - 2ª linha</td>
8 <td>2ª coluna - 2ª linha</td>
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 <table> </table>.
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="1px" bgcolor='yellow'>
2 <tr>
3 <td rowspan=2>1ª coluna - 1ª linha + 2ª linha</td>
4 </tr>
5 <tr>
6 <td>1ª coluna - 2ª linha</td><td>2ª coluna - 2ª linha</td>
7 </tr>
8 </table>
Então, na linha 3, nos definimos quer será mesclada 2 linhas. Vamos ver o exemplo aqui nesta página: Exemplo 2.


1 <table border="1px" bgcolor='yellow'>
2 <tr>
3 <td colspan=2>1ª + 2ª coluna - 1ª linha</td>
4 </tr>
5 <tr>
6 <td>1ª coluna - 2ª linha</td><td>2ª coluna - 2ª linha</td>
7 </tr>
8 </table>
Então, na terceira linha mesclamos duas colunas, vamos ver o exemplo do que acontece nesta página: Exemplo 2 (o debaixo)


~ 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]

- Qualquer dúvida, ou erro encontrado, postem aqui!
~ Steeph.

Nossa,você é boa nisso ein,já pode ser professora de HTML isso se não for né

Matheus-M escreveu:Nossa,você é boa nisso ein,já pode ser professora de HTML isso se não for né

xD
É um dos meus sonhos o.o
To planejando algo aqui pra terminar estou fazendo um super avançado LOL heueuhue

Eu goti do tuto
mas n to podendo treinar
como eu semi abandonei meu fórum
eu nem mexo muito nisso
fico só aki
e na outer space

mas olha a minha versão de tabela
foi pra formar um calendario
http://manolegoproductions.forumeiros.com/Calendario-h2.htm
usei esse código

Spoiler:

E eu sei que o calendario ta desatualizado... u.u

ficou muito bom!
So que tem um script que faz isso tudo ae ehuehuehue soh q com menos linhas :P

Steeph escreveu:ficou muito bom!
So que tem um script que faz isso tudo ae ehuehuehue soh q com menos linhas :P

valew...suhahashas
mas rola um tuto desse script aeh
como asim
o que ele faz
fala mais

Pescador Parrudo escreveu:

Steeph escreveu:ficou muito bom!
So que tem um script que faz isso tudo ae ehuehuehue soh q com menos linhas :P

valew...suhahashas
mas rola um tuto desse script aeh
como asim
o que ele faz
fala mais

dificl que soh HEUHUEAHU
o script em si eh feito em java, dps q acaba tem q programar umas coisas, eu sei q da certo e que e possivel mas nao sei como faz exatamente, vou tentar esses dias...

Steeph, seria algo assim?

Clique aqui para ver!

-Los- escreveu:Steeph, seria algo assim?

Clique aqui para ver!

mais ou menos, isso ai me parece q tem banco de dados naoo eh?

Creio que não, mais é um script para tabelas que inclui Paginação.

-Los- escreveu:Creio que não, mais é um script para tabelas que inclui Paginação.

entendi.. por que parecia que estava chamando aqueles dados la, de um banco...
sei fazer de ambos jeitos ^^
aquela tabela ta fofinha pq usou css tb, no avançado eu to ensinando um pouco disso, vou ensinar essa paginaçao tb ^^

Boa steeph *-*