📊Tag <table> para tabelas

Tabelas em HTML organizam dados em linhas <tr> e colunas <td>. Use colspan para combinar colunas, rowspan para combinar linhas, e border para bordas. Funciona como uma planilha do Excel.

Introdução

Tabelas em HTML são usadas para organizar dados em linhas e colunas, muito parecido com uma planilha do Excel. Vamos explorar como criar uma tabela básica usando as tags <table>, <tr>, e <td>, além de usar atributos como colspan, rowspan, e border.

Estrutura Básica da Tabela

• <table>: Essa é a tag principal que define a tabela.

• <tr>: Cada linha da tabela é definida com <tr>.

• <td>: Cada célula da tabela é definida com <td>.

Exemplo Básico:

<table>
  <tr>
    <td>Nome</td>
    <td>Idade</td>
  </tr>
  <tr>
    <td>João</td>
    <td>30</td>
  </tr>
</table>

Neste exemplo, criamos uma tabela com duas linhas. A primeira linha contém os cabeçalhos "Nome" e "Idade", e a segunda linha contém os dados "João" e "30".

Atributo border

O atributo border é usado para adicionar bordas às células da tabela, tornando-a mais fácil de visualizar.

Exemplo com Bordas:

<table border="1">
  <tr>
    <td>Nome</td>
    <td>Idade</td>
  </tr>
  <tr>
    <td>João</td>
    <td>30</td>
  </tr>
</table>

Atributo colspan

O colspan permite que uma célula se estenda por várias colunas, como combinar células em uma planilha do Excel.

Exemplo de colspan:

<table border="1">
  <tr>
    <td>Nome</td>
    <td>Idade</td>
  </tr>
  <tr>
    <td colspan="2">Dados combinados</td>
  </tr>
</table>

Aqui, a segunda linha tem uma célula que ocupa duas colunas.

Atributo rowspan

O rowspan permite que uma célula se estenda por várias linhas.

Exemplo de rowspan:

<table border="1">
  <tr>
    <td rowspan="2">Nome</td>
    <td>Idade</td>
  </tr>
  <tr>
    <td>30</td>
  </tr>
</table>

Neste exemplo, a célula "Nome" ocupa duas linhas.