Célula de Cabeçalho de Tabela HTML

Introdução

Em HTML, a tag <th> é usada para definir uma célula como um cabeçalho de um grupo de células. Existem dois tipos de células de tabela HTML: célula de cabeçalho e célula padrão. A célula de cabeçalho é usada como um cabeçalho para o grupo de células, e as células padrão contêm dados para uma tabela.

Este laboratório passo a passo irá guiá-lo através de como criar uma célula de cabeçalho em uma tabela HTML usando a tag <th>, com breves explicações e trechos de código.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Criando uma Tabela HTML Básica

Primeiramente, precisamos criar uma tabela usando HTML.

Para criar uma tabela, você deve usar a tag <table>, com cada linha representada pela tag <tr> e cada célula representada pela tag <td>.

Por exemplo, o seguinte código criará uma tabela HTML simples com duas linhas e duas colunas:

<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

Criando uma Célula de Cabeçalho

Para criar uma célula de cabeçalho, devemos substituir a tag <td> pela tag <th> na linha da tabela onde queremos adicionar uma célula de cabeçalho.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

Adicionando Atributos à Tag

A tag <th> suporta vários atributos para ajudar a formatar e estruturar a célula de cabeçalho.

• Abbr: Usado para definir a abreviação curta para o conteúdo da célula.
• Colspan: Especifica o número de colunas que a célula deve abranger.
• Rowspan: Especifica o número de linhas a serem abrangidas.
• Scope: Especifica as células às quais a tag de cabeçalho se relaciona.
• Header: Usado para especificar uma ou mais células de cabeçalho relacionadas a uma célula.

Por exemplo, o seguinte código criará uma célula de cabeçalho com os atributos "abbr" e "colspan":

<table>
  <tr>
    <th abbr="Header 1" colspan="2">Header 1 &amp; Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

Resumo

Neste laboratório passo a passo, você aprendeu como criar uma célula de cabeçalho em uma tabela HTML usando a tag <th>. Os cabeçalhos de tabela HTML são significativos para organizar dados de maneira estruturada. Usando a tag th, você pode criar uma célula de cabeçalho e gerenciar sua formatação e atributos.