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.htmle 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.
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.
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.
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.
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.
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.
