Fazendo Tabelas HTML – aula 6

Iniciaremos uma tabela usando as tags <table> e finalizamos usando </table>

<table>…</table>

A seguir vamos separar ela em linhas e células (colunas).

Para criarmos as linhas usaremos as tags <tr> …linha… </tr>, e para cada linha faremos as colunas usando <td>..célula ..</td>. Segue exemplo:

<table>
<tr>
        <td>Linha 01, célula 01</td>
        <td>Linha 01, célula 02</td>
        <td>Linha 01, célula 03</td>
</tr>
<tr>
        <td>Linha 02, célula 01</td>
        <td>Linha 02, célula 02</td>
        <td>Linha 02, célula 03</td>
</tr>
<tr>
        <td>Linha 03, célula 01</td>
        <td>Linha 03, célula 02</td>
        <td>Linha 03, célula 03</td>
</tr>
</table>

Fica assim:

Linha 01, célula 01	Linha 01, célula 02	Linha 01, célula 03
Linha 02, célula 01	Linha 02, célula 02	Linha 02, célula 03
Linha 03, célula 01	Linha 03, célula 02	Linha 03, célula 03

 

Para definir uma largura usaremos widht e para altura height e border para inserir a espessura da borda da tabela:

Para a tabela toda:

<table widht=”770px “  height=”430px”  border=”1”>   - largura de 770 pixel`s por altura de 430 pixel`s </table>

Para a célula:

<td width=”270 px” height=”50px” border=”1”>…….</td>

 Como faço para chegar ao resultado a seguir:

Linha 01, célula 01, 02  03
Linha 02, célula 01	Linha 02, célula 02	Linha 02, célula 03
Linha 03, célula 01	Linha 03, célula 02	Linha 03, célula 03

 

Todos nós sabemos que são 3 células em cada linha. Vamos juntar essas 3 células da primeira linha usando colspan formando uma única célula:

<table>
<tr>
        <td colspan=”3”>Linha 01, célula 01</td>
</tr>
<tr>
        <td>Linha 02, célula 01</td>
        <td>Linha 02, célula 02</td>
        <td>Linha 02, célula 03</td>
</tr>
<tr>
        <td>Linha 03, célula 01</td>
        <td>Linha 03, célula 02</td>
        <td>Linha 03, célula 03</td>
</tr>
</table>

E para juntarmos duas células em uma mesma coluna?

Linha 01, célula 01
Linha 02, célula 01 Linha 03, célula 01	Linha 02, célula 02	Linha 02, célula 03
	Linha 03, célula 02	Linha 03, célula 03

 

Agora usaremos rowspan , no exemplo acima foi juntado as células 01 e 01 das linhas 02 e 03:

Na célula 01 da linha 02 digitaremos rowspan=”2” para juntarmos as duas células, e na linha 3 eliminaremos a célula 01.

<table>
<tr>
        <td colspan=”3”>Linha 01, célula 01</td>
</tr>
<tr>
        <td rowspan=”2”>Linha 02 – célula 01, Linha 03 – célula 01</td>
        <td>Linha 02, célula 02</td>
        <td>Linha 02, célula 03</td>
</tr>
<tr>     
        <td>Linha 03, célula 02</td>
        <td>Linha 03, célula 03</td>
</tr>
</table>

Espaçamento:

cellspacing: para inserir um espaço entre cada célula;

cellpadding: espaço entre a borda da tabela e o texto dentro da célula.

<table cellpadding=”5px” cellspacing=”5px”>…..</table>

Jair Alievi