Pesquisar na Comunidade

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-3 Coluna-1,linha-1 Coluna 2,linha-1 Coluna-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: "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: http://www.xtibia.com/forum/topic/233324-tutorial-formatando-textos-em-php/ ___________________________________________________________________________________________ E isso é tudo, pessoal! Espero que tenha dado para entender tudo de forma correta e simples. ^^ ___________________________________________________________________________________________ Créditos Eu (@Danihcv)

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-3 Coluna-1,linha-1 Coluna 2,linha-1 Coluna-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: "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. ^^