Marca <tabela> em HTML

Hoje vamos cobrir a tabela de tags HTML . Ao usar exemplos , antecipamos o cumprimento dos objetivos de aprendizagem.

A tag <table> em HTML é usada para criar uma tabela de dados em uma página da web. O elemento <table> é usado para definir a própria tabela, enquanto o elemento <tr> (linha da tabela) é usado para definir cada linha da tabela e o elemento <td> (dados da tabela) é usado para definir cada célula dentro uma fila.

Uma tabela HTML com linhas e colunas:

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>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Para adicionar bordas recolhidas a uma tabela usando CSS, você pode usar a propriedade de colapso de borda no elemento 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
<!DOCTYPE html>
<html>
<head>
<style>
table.collapsed-borders {
border-collapse: collapse;
}
</style>
</head>
<body>
<table class="collapsed-borders">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Para alinhar uma tabela à direita usando CSS, você pode usar a propriedade float no elemento table:

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>
<style>
.table-container {
text-align: center;
}
table {
margin: 0 auto;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Para centralizar uma tabela usando CSS, você pode usar a propriedade margin com um valor auto no elemento table:

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>
<style>
.table-container {
text-align: center;
}
table {
margin: 0 auto;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Para adicionar uma cor de fundo a uma tabela usando CSS, você pode usar a propriedade background-color no elemento table:

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
<!DOCTYPE html>
<html>
<head>
<style>
table.colored-table {
background-color: maroon;
color:white;
}
</style>
</head>
<body>
<table class="colored-table">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O preenchimento de uma tabela pode ser adicionado usando CSS, você pode usar a propriedade padding no elemento table ou em células específicas usando os elementos td e th:

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
<!DOCTYPE html>
<html>
<head>
<style>
table {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Largura de uma tabela usando CSS, você pode usar a propriedade width na tag 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
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 80%;
}
td {
width: 25%;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

A tabela possui 3 células de cabeçalho definidas pelos elementos <th>, dentro de um elemento <tr>, dentro de um elemento <thead>:

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
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

A tag <caption> pode ser usada como o primeiro filho do elemento <table>, seguido pelo cabeçalho e dados 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
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<caption>Employee Details</caption>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ricky Clark</td>
<td>Manager</td>
<td>$75,000</td>
</tr>
<tr>
<td>Peterson</td>
<td>Developer</td>
<td>$65,000</td>
</tr>
<tr>
<td>Sam billings</td>
<td>Designer</td>
<td>$55,000</td>
</tr>
</tbody>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O atributo rowspan especifica o número de linhas que uma célula deve abranger e o atributo colspan especifica o número de colunas que uma célula deve abranger:

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
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td colspan="2">Data 6</td>
<td>Data 7</td>
</tr>
</tbody>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Índice-

Marca <tabela> Em HTML:

Usos da tabela de tags

A Tag <table> especifica uma tabela em HTML.

Essencialmente, as tabelas HTML consistem em um elemento Tag table <table> e várias tags <tr>, <th> e <td>.

Existem três tipos de elementos Tag Table: o elemento <tr> representa uma linha da tabela, o elemento <th> indica um cabeçalho da tabela e o elemento <td> descreve uma célula da tabela.

As tabelas em HTML podem ainda consistir em elementos <caption> , <colgroup> , <thead> , <tfoot> e <tbody> .

As tabelas podem ser usadas para exibir vários tipos de informações, como:

As tabelas são comumente usadas para apresentar dados tabulares, como informações financeiras, especificações de produtos e dados estatísticos.
As tabelas podem ser usadas para comparar diferentes conjuntos de dados lado a lado, tornando mais fácil para os usuários comparar e contrastar diferentes opções.
As tabelas podem ser usadas para apresentar cronogramas, horários e calendários de forma estruturada.
As tabelas podem ser usadas para exibir menus e informações de preços, especialmente para restaurantes, cafés e outros negócios de alimentos e bebidas.
As tabelas podem ser usadas para apresentar formulários e campos de entrada, tornando mais fácil para os usuários inserir dados e concluir tarefas.
As tabelas podem ser usadas para criar estruturas de layout, especialmente para modelos de e-mail e newsletters HTML.

Compatibilidade do navegador

Elemento
<tabela>	Sim	Sim	Sim	Sim	Sim

CSS predefinido

A maioria dos navegadores mostrará o elemento <table> com os seguintes valores por padrão na Tag Table :

table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}

Atributos

Global

A Tag Table <table> é compatível com os Atributos Globais em HTML.

Evento

A Tag Table <table> é compatível com os Atributos de Evento em HTML.

Benefícios da tabela de tags

A tag <table> em HTML oferece vários benefícios para a apresentação de dados em uma página da web:

As tabelas fornecem uma maneira clara e organizada de apresentar os dados, tornando mais fácil para os usuários entender e analisar as informações apresentadas.
A tag <table> fornece uma ampla gama de atributos e elementos que podem ser usados para personalizar a aparência e a funcionalidade das tabelas, permitindo que os designers criem tabelas que atendam às necessidades específicas de seus usuários.
As mesas podem ser projetadas tendo em mente a acessibilidade, tornando-as mais fáceis de usar para usuários com deficiências. Por exemplo, os designers podem usar células de cabeçalho e rótulos apropriados para fornecer contexto e informações sobre os dados que estão sendo apresentados.
As tabelas são amplamente suportadas em diferentes navegadores e plataformas da Web, garantindo que sejam acessíveis a uma ampla gama de usuários.
As tabelas podem ser usadas para apresentar uma ampla variedade de tipos de dados, desde listas simples até informações e cronogramas financeiros complexos.
As tabelas podem ser projetadas para serem responsivas, o que significa que podem se adaptar a diferentes tamanhos de tela e dispositivos, tornando-as acessíveis em dispositivos móveis e outras plataformas.

Se este artigo foi informativo o suficiente para atender aos seus desejos educacionais, compartilhe essas informações significativas com seus amigos clicando nos links abaixo.

Nós valorizamos o seu feedback.

Marca <tabela> em HTML

Example:

Example:

Example:

Example:

Example:

Example:

Example:

Example:

Example:

Example:

Usos da tabela de tags

Compatibilidade do navegador

CSS predefinido

Atributos

Global

Evento

Benefícios da tabela de tags

Sentindo entediado?