Continuação do post:

• HTML Báscio Parte 1

Como acredito que já saibam o que é HTML e quais são as principais tags usadas, então pretendo abordar o conceito tabela nesse post, sem a necessidade de explicar o que é tag, parâmetros, valores e demais conceitos básicos.  Caso ainda não entenda muito bem sobre os conceitos como: parâmetros valores e tags, recomendo que leia atentamento o post anterior (“HTML Báscio Parte 1 “).

 

O que é uma Tabela em HTML?

Segundo a Wikipédia tabela é uma representação matricial, isto é, em linhas e colunas, que tem a finalidade de demostrar informações por meio delas. Uma tabela em HTML é a criação de tabelas em um documento por meio de tags HTML, que vão representar linha x coluna.

Muitos utilizam de tabelas para formar o layout de sites inteiros, apesar dessa pratica não ser recomendada mais, o uso de tabelas em layout ainda é bem comum, hoje para formar o design de site e blogs existem linguagens de estilo como CSS, o que faz o uso de tabelas para esse proposito desnecessário.

Como Criar Tabelas Em HTML?

 

Inicio

<table></table> Essa é a principal tag, é ela que define onde começa e termina a tabela, as tags de linha e coluna devem estar entre <table></table>

<table>

</table>

Nessa tag pode-se usar parâmetros como: border=”valor numerico” para criar borda, bgcolor=”valor exadecimal ou nome da cor de fundo em inglês” para acrescentar cor de fundo.

 

Linha

<tr></tr> (Table row) cria a linha da tabela.

 

Coluna

<td></td> (table data)cria a coluna da tabela ou melhor divide a linha em partes (dados), ela é usada sempre dentro de um linha ou seja primeiro se cria a linha depois divide em colunas, veja o exemplo abaixo em que temos duas colunas dentro de uma linha.

<table border="2">
  <tr><td>1ª linha, 1ª coluna</td><td>1ª linha, 2ª coluna</td></tr>
</table>

1ª linha, 1ª coluna

1ª linha, 2ª coluna

No exemplo acima foi criado um tabela com uma linha de duas colunas usando também a parametro border=”valor” (que cria uma borda em volta da tabela).

<table border="2">
  <tr><td>1ª linha, 1ª coluna</td><td>1ª linha, 2ª coluna</td></tr>

<tr><td>2ª linha, 1ª coluna</td><td>2ª linha, 2ª coluna</td></tr>
</table>

Já essa tabela possui 2 linhas com duas colunas.

1ª linha, 1ª coluna	1ª linha, 2ª coluna
2ª linha, 1ª coluna	2ª linha, 2ª coluna

 

Mesclando Linhas e Colunas

Para mesclar linhas e colunas é usado os parâmetros rowspan e colspan  na tag table data com os valores correpondentes a quantidade de casa a serem mescladas.

 

 Mesclando Linhas

Acrescente o parâmetro rowspan dentro da tag table data para mesclar duas linhas ou mais, veja:

<table border="1">

<tr><td rowspan="2">1ª e 2ª l. mescladas, 1ª coluna</td><td>1ª linha, 2ª coluna</td></tr>
<tr><td>2ª linha, 2ª coluna</td></tr>
</table>

No parâmetro rowspan, o valor indica quantas serão as linhas mescladas.

1ª e 2ª linha mesclada, 1ª coluna	1ª linha, 2ª coluna
	2ª linha, 2ª coluna

 

Mesclando Colunas

Use o parâmetro colspan dentro da tag table data para mesclar duas ou mais colunas, veja:

<table border="1">

<tr><td colspan="2">1ª linha 1ª e 2 ª coluna mescladas</td></tr>
<tr><td>2ª linha, 1ª coluna</td><td>2ª linha, 2ª coluna</td></tr>
</table>

No parâmetro colspan o valor indica a quantidade de colunas a serem mescladas.

1ª linha 1ª e 2 ª coluna mescladas
2ª linha, 1ª coluna	2ª linha, 2ª coluna