Danihcv 332 Postado Abril 20, 2015 Share Postado Abril 20, 2015 Bom galera, dessa vez venho trazer um tutorial bem simples sobre tabelas e como criá-las em suas paginas PHP. Então vamos ao que interessa. ___________________________________________________________________________________ Para definir o que estará dentro da tabela usamos <table> no inicio e </table> no final. Para definirmos o que estará entro de uma linha da tabela usamos <tr> no inicio e </tr> no final.*A linha por sua vez estará dentro da tabela, então primeiro declaramos o inicio da table e dps declaramos o inicio da linha. Para definirmos o que estará dentro de uma coluna usamos <td> no inicio e </td> no final.*A coluna por sua vez estará dentro da linha, que por sua vez estará dentro da tabela. Então primeiro declaramos o inicio da linha e dps declaramos o inicio da coluna.*Antes de começar uma nova coluna, finalize a anterior, para que não gere nenhum "bug". Para colocarmos um título às colunas devemos delimitar o mesmo usando <th> no inicio e </th> no final.*O titulo da coluna segue a mesma logica da coluna, ou seja, vc deve declarar uma linha para colocar os títulos dentro da mesma.*A diferença to th para o td é que o th coloca o seu texto em negrito. E no caso das paginas de sites de tibia, também coloca um fundo cinza escuro e altera a cor da letra para branco. Então vamos ver uma tabela de exemplo: <table> <tr> <th>Titulo-Coluna-1</th> <th>Titulo-Coluna-2</th> <th>Titulo-Coluna-3</th> <tr> <td>Coluna-1,linha-1</td> <td>Coluna-2,linha-1</td> </tr> <tr> <td>Coluna-1,linha-2</td> </table> E esse seria o resultado:Titulo-Coluna-1 Titulo-Coluna-2 Titulo-Coluna-3Coluna-1,linha-1 Coluna 2,linha-1Coluna-1,linha-2*Como pode-se ver, podem haver espaços vazios, os seja, uma linha pode ter mais colunas que outras. Dessa forma a coluna não terá valor algum nas demais linhas. Agora vamos colocar as bordas da nossa tabela. Para isso devemos adicionar as especificações da borda após decalararmos o inicio da table e colocamos tais especificações dentro do "comando" que usamos para dar o inicio à table. Obrserve: <table ESPECIFICAÇÕES-DA-BORDA-AQUI > "Mas quais são as especificações da borda?" Bom, elas são basicamente 3: a espessura, o espaçamento e a cor. Códigos para os respectivos parametros: *Espessura: border="1" (nesse caso, a espessura da borda seria de 1 pixel) *Espaçamento: cellspacing="0" (nesse caso, não haverá espaçamento de uma borda pra outra entre 2 linhas/colunas. Assim fazemos uma borda simples, pois sem isso a borda da tabela ficaria com 2 linhas separadas, deixando um aspecto inusitado.) *Cor: bordercolor="#000000" (nesse caso a borda seria preta. Para ver o código da cor que vc deseja colocar, visite essa pagina de cores HTML e copie o código HTML da cor que vc qr e coloque dentro das aspas.) Então vamos ver um exemplo de uma tabela com bordas simples: <table [b]border="1" [b]cellspacing="0[/b]" [b]bordercolor="[url=null]#248685[/url]"[/b][/b]> <tr> <th>Titulo-Coluna-1</th> <th>Titulo-Coluna-2</th> <th>Titulo-Coluna-3</th> <tr> <td>Coluna-1,linha-1</td> <td>Coluna-2,linha-1</td> </tr> <tr> <td>Coluna-1,linha-2</td> </table> Esse seria o resultado (estou usando uma pagina do Gesior para mostrar o resultado): Porém se vc fizer o teste aí com frases maiores dentro das colunas e etc. Verá que todo o conteúdo de dentro da tabela (e inclusive a própria tabela) estarão concentrados no canto das colunas (e no caso da tabela, a mesma estará concentrada no canto esquerdo da pagina). Então digamos que vc queira colocar a tabela no centro da pagina e que vc queira centralizar todo o conteúdo da tabela no centro de suas respectivas colunas. Vc teria que usar um "comando" que centraliza o conteúdo. E esse comando é <div align="center"> (onde tem center vc pode esolher entre left (esquerda), right (direita) e claro center (centro)) aí logo em seguida vc coloca o conteúdo a ser centralizado e fecha o mesmo com </div>Atenção! Para usar o div align para centralizar uma tabela vc deve primeiro declarar ele e em seguida declarar o inicio da tabela e então após declarar o fim da tabela vc deve logo em seguida declarar o fim do div. Exemplo para centralizar a tabela no centro da pagina: <div align="center"> <table> <tr> <th>Titulo-Coluna-1</th> <th>Titulo-Coluna-2</th> <th>Titulo-Coluna-3</th> <tr> <td>Coluna-1,linha-1</td> <td>Coluna-2,linha-1</td> </tr> <tr> <td>Coluna-1,linha-2</td> </table> </div> Caso vc queira centralizar o conteúdo de uma coluna, vc deve declarar o div align após declarar o inicio da coluna. Exemplo de coluna com conteúdo centralizado no centro da mesma: <th> <div align="center"> Testando </div> </th> _____________________________________________________________________________________________ Caso vc queira fazer edições no conteúdo da tabela, aqui tem um tutorial sobre edição de textos em HTML: *Link ainda indisponível, estou criando o tópico ___________________________________________________________________________________________ E isso é tudo, pessoal! Espero que tenha dado para entender tudo de forma correta e simples. ^^ Link para o comentário Compartilhar em outros sites More sharing options...
Posts Recomendados