HTML Tutorial

As tabelas HTML permitem que os autores da web organizem dados como texto, imagens, links, outras tabelas, etc. em linhas e colunas de células.

As tabelas HTML são criadas usando a tag <table> na qual a tag <tr> é usada para criar linhas da tabela e a tag <td> é usada para criar células de dados. Os elementos em <td> são regulares e alinhados à esquerda por padrão:

See the Pen
HTML – Tabelas by John Pires (@johnpiresBR)
on CodePen.

Aqui, a borda é um atributo da tag <table> e é usada para colocar uma borda em todas as células. Se você não precisa de uma borda, pode usar border = “0”.

Título da Tabela



O cabeçalho da tabela pode ser definido usando a tag <th>. Esta tag será colocada para substituir a tag <td>, que é usada para representar a célula de dados real. Normalmente, você colocará a linha superior como cabeçalho da tabela conforme mostrado abaixo, caso contrário, você pode usar o elemento <th> em qualquer linha. Os títulos, que são definidos na tag <th>, são centralizados e em negrito por padrão.

See the Pen
HTML – Título da Tabela by John Pires (@johnpiresBR)
on CodePen.

Atributos de Cellpadding e Cellspacing

Existem dois atributos chamados cellpadding e cellspacing, que você usará para ajustar o espaço em branco nas células da tabela. O atributo cellspacing define o espaço entre as células da tabela, enquanto o cellpadding representa a distância entre as bordas da célula e o conteúdo dentro de uma célula.

See the Pen
HTML – Atributos de Cellpadding e Cellspacing by John Pires (@johnpiresBR)
on CodePen.

Atributos Colspan e Rowspan



Você usará o atributo colspan se quiser mesclar duas ou mais colunas em uma única coluna. De maneira semelhante, você usará rowspan se quiser mesclar duas ou mais linhas.

See the Pen
HTML – Atributos Colspan e Rowspan by John Pires (@johnpiresBR)
on CodePen.

Backgrounds de tabelas:

Você pode definir o fundo da mesa usando uma das seguintes maneiras:

• Atributo bgcolor – você pode definir a cor de fundo para a tabela inteira ou apenas para uma célula.
• Atributo de fundo – você pode definir a imagem de fundo para a tabela inteira ou apenas para uma célula.

Você também pode definir a cor da borda usando o atributo bordercolor.

See the Pen
HTML – Backgrounds de tabelas by John Pires (@johnpiresBR)
on CodePen.