tutorial [TUTORIAL] Criando e configurando tabelas para paginas do site

[Danihcv 607]

     Bom galera, dessa vez venho trazer um tutorial bem simples sobre tabelas e como criá-las para 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:

<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: http://www.tibiaking.com/forum/topic/49092-tutorial-formatando-textos-em-php/#entry284885

___________________________________________________________________________________________

                                                                                                                                                               

 

E isso é tudo, pessoal!

 

Espero que tenha dado para entender tudo de forma correta e simples.

[JonatasLucasf 75]

muito bom REP+

[olokomeu 67]

Opa! Ótimo tutorial ! Como sempre ajudando !! REP+ para o Professor ae rsrsrs 

Editado Janeiro 20, 2015 por olokomeu (veja o histórico de edições)

[Danihcv 607]

huahuahua, vlw galera.

[luanluciano93 1994]

Ótimo tutorial Dani, rsrs, eu era viciado em usar atributos nas tabelas, mas andei pesquisando e não são mais suportados no HTML5

[Thayam 187]

Muito bom Dani!! Obrigado por compartilhar conosco, para mim este tutorial será muito útil haha

 

Abraço!

[Danihcv 607]

@luanluciano93, huauhahu, to lgd... Mas tem ctz que nenhum atributo funciona mais? (É que ainda to começando nessa parte de web-sites hashuashu)

 

 

@Thayam, muito obrigado, cara.

[luanluciano93 1994]

The "align", "bgcolor", "border", "cellpadding", "cellspacing", "frame", "rules", "summary", and "width" attributes are not supported in HTML5.

 

Todas as caracteristicas das tabelas devem ser definidas no CSS agora!