[TUTORIAL] Criando e configurando tabelas para paginas do site

[Danihcv 335]

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:

<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.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)

Editado Abril 20, 2015 por Danihcv