Marca <td> em HTML

Nosso tópico neste post é Tag <td> . Analisaremos os exemplos na esperança de que eles forneçam aos alunos o que eles precisam aprender.

Tag td significa elemento de célula de dados da tabela.

A seguinte tabela HTML tem cinco linhas e duas células:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
<tr>
<td>Row 3 Cell 1</td>
<td>Row 3 Cell 2</td>
</tr>
<tr>
<td>Row 4 Cell 1</td>
<td>Row 4 Cell 2</td>
</tr>
<tr>
<td>Row 5 Cell 1</td>
<td>Row 5 Cell 2</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Um exemplo de tabela com cinco linhas e duas células de tabela, com o conteúdo dentro das células alinhado ao centro com CSS:

Tag td Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 80%;
margin: 0 auto;
}
td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
<tr>
<td>Row 3 Cell 1</td>
<td>Row 3 Cell 2</td>
</tr>
<tr>
<td>Row 4 Cell 1</td>
<td>Row 4 Cell 2</td>
</tr>
<tr>
<td>Row 5 Cell 1</td>
<td>Row 5 Cell 2</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo para adicionar uma cor de fundo a uma célula de tabela específica:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 80%;
margin: 0 auto;
}
td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
td:first-child {
background-color: red;
}
td:nth-child(2) {
background-color: yellow;
}
td:nth-child(2):hover {
background-color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
<tr>
<td>Row 3 Cell 1</td>
<td>Row 3 Cell 2</td>
</tr>
<tr>
<td>Row 4 Cell 1</td>
<td>Row 4 Cell 2</td>
</tr>
<tr>
<td>Row 5 Cell 1</td>
<td>Row 5 Cell 2</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo de uma tabela com duas linhas e duas células de tabela, com a altura de todas as células definida como 50 pixels:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 80%;
margin: 0 auto;
}
td {
padding: 10px;
border: 1px solid #ccc;
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<td>Cell 1: Artificial Intelligence</td>
<td>Cell 2: Blockchain Technology</td>
</tr>
<tr>
<td>Cell 3: Internet of Things (IoT)</td>
<td>Cell 4: Quantum Computing</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Nenhum exemplo de quebra de linha na célula da tabela:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 80%;
margin: 0 auto;
}
td {
padding: 8px;
border: 1px solid rgb(98, 39, 39);
white-space: nowrap;
}
</style>
</head>
<body>
<table>
<tr>
<td>Cell 1: Artificial Intelligence</td>
<td>Cell 2: Blockchain Technology</td>
</tr>
<tr>
<td>Cell 3: Internet of Things (IoT)</td>
<td>Cell 4: Quantum Computing</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Tabela com uma linha e duas células. Os wrappers de palavras não são usados para o conteúdo alinhado à esquerda:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<style>
td {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
white-space: nowrap;
}
</style>
</head>
<body>
<table>
<tr>
<td>Technology</td>
<td>Description</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Defina a largura da célula da tabela através do CSS:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 80%;
margin: 0 auto;
}
td {
width: 40%;
padding: 8px;
border: 1px solid maroon;
}
</style>
</head>
<body>
<table>
<tr>
<td>Country</td>
<td>Capital</td>
</tr>
<tr>
<td>USA</td>
<td>Washington D.C.</td>
</tr>
<tr>
<td>Canada</td>
<td>Ottawa</td>
</tr>
<tr>
<td>China</td>
<td>Beijing</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Criação de cabeçalhos de tabela em tabela HTML:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Country</th>
<th>Capital</th>
</tr>
<tr>
<td>USA</td>
<td>Washington D.C.</td>
</tr>
<tr>
<td>Canada</td>
<td>Ottawa</td>
</tr>
<tr>
<td>India</td>
<td>New Delhi</td>
</tr>
<tr>
<td>China</td>
<td>Beijing</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo de como criar uma tabela com uma legenda em HTML:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<body>
<table>
<caption>Employee List</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
</tr>
<tr>
<td>John Smith</td>
<td>35</td>
<td>Manager</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>28</td>
<td>Developer</td>
</tr>
<tr>
<td>Bob Johnson</td>
<td>40</td>
<td>Sales</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo de como a tag <td> pode ser usada para criar uma célula de tabela única em HTML:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Availability</th>
</tr>
<tr>
<td>Apple</td>
<td>$1.50</td>
<td>
<div class="unique-cell">
<p>In stock</p>
<button>Add to cart</button>
</div>
</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.75</td>
<td>
<div class="unique-cell">
<p>Out of stock</p>
<button disabled>Add to cart</button>
</div>
</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Por padrão, o texto nas tags <th> está em negrito e centralizado.

Índice-

Marca <td> Em HTML:

Uso de marca Td

A Tag td <td> indica uma célula de dados regular em uma tabela HTML.

Existem dois tipos de células em uma tabela HTML :

As células do cabeçalho – contêm as informações do cabeçalho (feitas pela tag <th> )
A célula de dados – contém dados (feitos com o elemento <td> )

Informações Adicionais: O texto nas tags Tag <td> é alinhado à esquerda por padrão.

Aqui estão alguns usos comuns da tag <td> :

A tag <td> é usada para exibir dados em uma célula da tabela. Isso pode incluir texto, números, imagens, links e outros tipos de conteúdo.
A tag <td> pode ser usada para formatar as células da tabela com CSS, permitindo que os designers personalizem a aparência das células da tabela. Isso pode incluir a alteração do tamanho da fonte, cor, cor de fundo e outras propriedades de estilo.
A tag <td> pode incluir atributos como rowspan e colspan, que permitem que as células ocupem várias linhas ou colunas na tabela. Isso é útil para exibir dados que precisam ser agrupados ou organizados de uma maneira específica.
A tag <td> pode ser usada para adicionar links e botões às células da tabela. Isso é útil para criar tabelas interativas que permitem aos usuários navegar para diferentes páginas ou executar ações.
A tag <td> pode ser usada para criar tabelas responsivas que se ajustam a diferentes tamanhos de tela. Ao definir a largura das células da tabela com CSS, os designers podem garantir que as tabelas sejam fáceis de ler e navegar em diferentes dispositivos.

Atributos

Global

A Tag <td> também é compatível com os Atributos Globais em HTML.

Evento

O Tag td também é compatível com os Atributos de Evento em HTML.

Lista de Atributos

Atributo	Valor	Visão geral
colspan	número	Determina quantas colunas uma célula deve ter
cabeçalhos	header_id	Indica a quais células de cabeçalho uma célula pertence
Expansão de linha	número	Determinar quantas linhas devem ser exibidas em uma célula

Compatibilidade do navegador

Elemento
<td>	Sim	Sim	Sim	Sim	Sim

CSS predefinido

Em muitos navegadores, o elemento <td> aparecerá com os seguintes valores padrão:

td {
display: table-cell;
vertical-align: inherit;
}

Vantagens do Tag Td

A tag <td> em HTML oferece várias vantagens para exibir e organizar dados em uma tabela:

A tag <td> é fácil de usar e entender, mesmo para desenvolvedores web iniciantes. É um elemento HTML padrão amplamente suportado por todos os navegadores e plataformas modernos.
A tag <td> pode ser personalizada com CSS para controlar a aparência das células da tabela. Isso permite que os designers criem tabelas que correspondam à aparência de seu site ou aplicativo.
A tag <td> pode ser usada para exibir uma ampla variedade de tipos de dados, incluindo texto, números, imagens e links. Também pode ser usado para abranger várias linhas ou colunas na tabela.
A tag <td> pode ser usada para adicionar links e botões às células da tabela, tornando a tabela interativa e permitindo que os usuários naveguem para diferentes páginas ou executem ações.
Ao usar a tag <td> para estruturar dados em uma tabela, os designers podem melhorar a acessibilidade de seu site ou aplicativo. Tabelas bem estruturadas com tags <td> são mais fáceis de navegar e entender para usuários com deficiências.
A tag <td> é uma maneira eficiente de exibir e organizar dados em uma tabela. Requer menos código do que outros métodos, como o uso de vários elementos div, o que pode fazer a página carregar mais rápido e melhorar o desempenho.

Não deixe de deixar sua reação abaixo como forma de feedback para apreciar nossos esforços ou nos sugerir algumas melhorias para o aprimoramento deste site.

Nós valorizamos o seu feedback.

Marca <td> em HTML

Example:

Tag td Example:

Example:

Example:

Example:

Example:

Example:

Example:

Example:

Example:

Uso de marca Td

Atributos

Global

Evento

Lista de Atributos

Compatibilidade do navegador

CSS predefinido

Vantagens do Tag Td

Sentindo entediado?