Neste artigo, mostrarei como criar uma tabela em HTML, através da qual você conhecerá as propriedades da tabela como: colspan , rowspan , cellpadding e cellspacing .

A tabela HTML é usada para exibir dados em forma de tabela. Cada tabela será dividida em dois componentes, que são colunas e linhas . Elas são compostas pelas tags table , tr , td , tbody , thead , tfoot .

Em aplicativos da web, as tabelas raramente são usadas, apenas os aplicativos de gerenciamento de dados são usados com frequência. A razão pode ser que a estrutura da tabela parece muito pesada, é difícil combinar com CSS para criar modelos de interface complexos. No entanto, com a exibição dos dados da tabela, a tabela ainda é a prioridade número 1.

O que é a tag de tabela em HTML?

A tag table em HTML é uma tag especial, usada para exibir dados tabulares no navegador. Cada tabela terá um número definido de linhas e colunas. Você também pode mesclar duas células adjacentes em uma célula como no Word. Veja a imagem abaixo para entender mais sobre este cartão.

 <table border="1" cellspacing="0" cellpadding="5"> <tr> <td>Hàng 1 cột 1</td> <td>Hàng 1 cột 2</td> <td>Hàng 1 cột 3</td> </tr> <tr> <td>Hàng 2 cột 1</td> <td>Hàng 2 cột 2</td> <td>Hàng 2 cột 3</td> </tr> </table>

Em que :

• A propriedade border="1" é para declarar a borda da tabela
• O cellspacing="0" declara a distância entre as bordas superior e inferior da borda
• O atributo cellpadding="5" declara a distância entre o conteúdo da célula e a borda
• Se você quiser adicionar uma coluna, basta adicionar um td
• Se você quiser adicionar uma linha, basta adicionar mais uma tr

Por favor, altere manualmente o número de tags tr e td a serem observadas, isso ajudará você a entender melhor a tabela.

Colspan em HTML

Colspan html é um atributo da tag table, é usado para mesclar células na mesma linha. Por exemplo, se você deseja mesclar 2 células, declare o valor como 2, mescle 3 células, declare 3.

Ao declarar colspan , o número de tags td da linha atual será reduzido em comparação com outras linhas.

Como no exemplo abaixo, a primeira tag tr possui apenas duas tags td e a segunda tag tr possui até 3 tags td . A razão é que na primeira tag tr existe uma tag td com colspan = 2 .

 <table border="1" cellspacing="0" cellpadding="5"> <tr> <td colspan="2">Hàng 1 cột 1 và Hàng 1 cột 2</td> <td>Hàng 1 cột 3</td> </tr> <tr> <td>Hàng 2 cột 1</td> <td>Hàng 2 cột 2</td> <td>Hàng 2 cột 3</td> </tr> </table>

Linhas em HTML

Semelhante ao colspan, o rowspan é usado para mesclar duas células. No entanto, ele será agregado por coluna, não por linha. Quantas células você deseja mesclar, digite o número para isso.

 <table border="1" cellspacing="0" cellpadding="5"> <tr> <td rowspan="2">Hàng 1 cột 1</td> <td>Hàng 1 cột 3</td> <td>Hàng 1 cột 3</td> </tr> <tr> <td>Hàng 2 cột 2</td> <td>Hàng 2 cột 3</td> </tr> </table>

Tag do grupo thead – tbody – tfoot

No artigo para saber o que é HTML, dei uma breve introdução ao layout do site, incluindo componentes como header , content , footer , a tabela é semelhante. As pessoas vão dividir a tabela em três componentes principais, que são header , body e footer com as tags thead , tbody e tfoot respectivamente.

 <table border="1" cellspacing="0" cellpadding="5"> <thead> <tr> <td> Username </td> <td> Email </td> </tr> </thead> <tbody> <tr> <td> mitrun </td> <td> mitrun1001@gmail.com </td> </tr> <tr> <td> web888 </td> <td> web888.vn@gmail.com </td> </tr> </tbody> <tfoot> <tr> <td> Username </td> <td> Email </td> </tr> </tfoot> </table>

Execute-o, o resultado é que a interface ainda é a mesma da maneira usual. No entanto, se agora mudarmos a posição do grupo e do tbody thead o que acontece.

Exemplo : alterar a posição das tags thead, tbody e tfoot .

 <table border="1" cellspacing="0" cellpadding="5"> <tbody> <tr> <td> TheHalfheart </td> <td> TheHalfHeart@gmail.com </td> </tr> <tr> <td> Freetuts </td> <td> Freetuts.net@gmail.com </td> </tr> </tbody> <thead> <tr> <td> Username </td> <td> Email </td> </tr> </thead> <tfoot> <tr> <td> Username </td> <td> Email </td> </tr> </tfoot> </table>

A execução da interface ainda é normal. De acordo com as regras de compilação, o tbody deve estar no topo porque está no topo, mas está bem no meio. Isso significa que, se usarmos esses grupos, não importa onde eles sejam colocados, a exibição ainda seguirá a regra ad – tbody – tfoot .

Os atributos de tabela HTML mais usados

Aqui, gostaria de resumir os 4 atributos da tag table em HTML, salvá-los para uso posterior.

• border : Usado para declarar o tamanho da borda da tabela.
• cellspaceing : Declare a largura da borda.
• cellpadding : Declare a distância entre a borda e os dados na célula.
• largura : Declare a largura das colunas ( na tag tr ).

Perguntas frequentes sobre tabelas HTML

Como criar tabela sem borda em HTML?

Para criar uma tabela sem bordas, definiremos a propriedade border="0" .

 <table border="0"> </table>

Como criar espaço entre letras e borda de células na tabela

Usamos a propriedade cellpadding para criar espaço entre os dados e a borda da tabela. As unidades de entrada estão em pixels.

 1 2 3 <table celpadding="10"> </table>

Como definir o comprimento das colunas na tabela

Definimos a propriedade width nas tags tr para definir o comprimento das colunas.

 <table celpadding="10"> <tr width="20%"> </tr> <tr width="80%"> </tr> </table>

Portanto, neste artigo, apresentei as tags HTML relacionadas à tabela. A primeira coisa a ser observada neste artigo é como combinar várias células com duas tags colspan e rowspan . A segunda é entender os grupos de tags thead , tbody e tfoot para montar a posição correta para ela. Este artigo vou parar por aqui, obrigado por acompanhar esta série.