Tabelas em HTML: um guia para criar e formatar tabelas em HTML

Uma tabela é um componente essencial em HTML para exibir dados em um formato estruturado com linhas e colunas. Em HTML, as tabelas são criadas usando as tags <table>, <tr> e <td>.

A tag <table> representa o contêiner da tabela principal, que contém todas as linhas e colunas. As linhas são definidas usando a tag <tr>(linha da tabela), enquanto as células dentro das linhas são definidas usando a tag <td>(dados da tabela). Além disso, você pode usar a tag <th>(cabeçalho da tabela) para definir as células do cabeçalho da tabela.

Você pode usar atributos como colspan e rowspan para mesclar células na tabela ou estender células em várias linhas e colunas. Além disso, você pode aplicar propriedades CSS para personalizar a aparência e o layout da tabela.

Tabela( <table>)

- O <table> elemento é usado para criar uma tabela em HTML.

- Os dados são colocados em linhas( <tr>) e colunas( <td> ou <th>).

- Cada célula de dados é colocada dentro dos elementos <td>(célula de dados) ou <th>(célula de cabeçalho).

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>  

Cabeçalho da coluna( <th>)

- O <th> elemento é usado para criar cabeçalhos de coluna em uma tabela.

- Normalmente colocado na primeira linha da tabela.

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <!-- data rows -->  
</table>  

Linhas de Dados( <tr>):

- O <tr> elemento é usado para criar linhas de dados em uma tabela.

- As células de dados( <td>) ou células de cabeçalho( <th>) são colocadas dentro desses <tr> elementos.

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>  

Abrangência de colunas( colspan)

O colspan atributo é usado para determinar o número de colunas que uma célula de dados ou célula de cabeçalho abrangerá na tabela.

<table>  
  <tr>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td colspan="2">John Doe</td>  
  </tr>  
</table>  

Abrangência de linha( rowspan)

O rowspan atributo é usado para determinar o número de linhas que uma célula de dados ou célula de cabeçalho abrangerá na tabela.

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <td>1</td>  
    <td>John</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
  </tr>  
</table>  

Mesclando Células( colspan e rowspan)

Você pode combinar atributos colspan e rowspan para mesclar células em uma tabela.

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
</table>  

border propriedade

- A border propriedade especifica a espessura da borda da tabela.

- O valor de border é um número inteiro não negativo.

<table border="1">  
<!-- Table rows and columns -->  
</table>  

cellpadding propriedade

- ,A cellpadding propriedade especifica a distância entre o conteúdo da célula e a borda da célula na tabela.

- O valor de cellpadding é um número inteiro não negativo

<table cellpadding="5">  
<!-- Table rows and columns -->  
</table>  

cellspacing propriedade

- A cellspacing propriedade especifica o espaçamento entre as células da tabela.

- O valor de cellspacing é um número inteiro não negativo.

<table cellspacing="10">  
<!-- Table rows and columns -->  
</table>  

Esses atributos e elementos permitem que você crie e personalize tabelas em HTML de acordo com suas necessidades. Você pode usá-los para exibir dados de maneira clara e organizada em seu site.