Célula de Dados da Tabela HTML: Dominando a Tag TD

Introdução

Neste laboratório, você aprenderá sobre a tag HTML <td>, que é usada para definir dados de tabela em uma tabela HTML. Você também aprenderá sobre os vários atributos que podem ser usados com esta tag.

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

O primeiro passo é criar uma tabela HTML com alguns dados. Abra o arquivo index.html e adicione o seguinte código:

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Smith</td>
        <td>25</td>
      </tr>
    </table>
  </body>
</html>

Aqui, criamos uma tabela HTML com duas linhas e três colunas. A tag <td> é usada para definir o conteúdo de cada célula na tabela.

Usando o Atributo Colspan

O atributo colspan é usado para especificar quantas colunas uma célula deve abranger. Para usar o atributo colspan, adicione o seguinte código:

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <td colspan="2">John Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td colspan="2">Jane Smith</td>
        <td>25</td>
      </tr>
    </table>
  </body>
</html>

Aqui, usamos o atributo colspan para abranger as duas primeiras colunas e exibir o nome da pessoa em uma única célula.

Usando o Atributo Rowspan

O atributo rowspan é usado para especificar quantas linhas uma célula deve abranger. Para usar o atributo rowspan, adicione o seguinte código:

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <td rowspan="2">John</td>
        <td>Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td colspan="2">Male</td>
      </tr>
      <tr>
        <td rowspan="2">Jane</td>
        <td>Smith</td>
        <td>25</td>
      </tr>
      <tr>
        <td colspan="2">Female</td>
      </tr>
    </table>
  </body>
</html>

Aqui, usamos o atributo rowspan para abranger a coluna do primeiro nome e exibir o nome da pessoa em uma única célula para duas linhas.

Usando o Atributo Header

O atributo header é usado para especificar que uma célula se relaciona a uma ou mais células de cabeçalho. Para usar o atributo header, adicione o seguinte código:

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <th id="name-header">Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td headers="name-header">John Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td headers="name-header">Jane Smith</td>
        <td>25</td>
      </tr>
    </table>
  </body>
</html>

Aqui, usamos o atributo header para especificar que a primeira coluna se relaciona à célula de cabeçalho com o ID name-header.

Resumo

Parabéns! Você aprendeu como usar a tag HTML <td> para definir dados de tabela em uma tabela HTML. Você também aprendeu sobre os vários atributos, como colspan, rowspan e header, que podem ser usados com esta tag para criar tabelas mais complexas.