Bordas da Tabela em Html

Hoje vamos cobrir as bordas da tabela HTML . Ao usar exemplos , antecipamos o cumprimento dos objetivos de aprendizagem.

Em HTML, uma borda de tabela é uma linha ou borda visível que envolve uma tabela ou suas células, criando um limite visual que separa a tabela de outro conteúdo na página. As bordas podem ser adicionadas à tabela usando o atributo “border” da tag “table” ou usando CSS.

A borda da tabela é normalmente usada para melhorar a legibilidade e a organização dos dados tabulares, tornando mais fácil para os usuários distinguir entre diferentes linhas e colunas. A borda pode ser personalizada em termos de cor, espessura e estilo, dependendo do design e layout desejado da mesa.

Tabelas HTML são uma ótima maneira de organizar dados e apresentá-los de maneira estruturada em páginas da web. Um aspecto importante das tabelas é o uso de bordas de tabela HTML para diferenciar entre células , linhas e colunas .

Dica: Estilos e formas exclusivos para bordas de tabelas são possíveis em tabelas HTML.

Índice-

Importância das bordas da tabela HTML

As bordas da tabela HTML são importantes porque ajudam a organizar visualmente e apresentar os dados em um formato estruturado e legível. Sem bordas de tabela, pode ser difícil para os usuários diferenciar entre diferentes linhas e colunas, levando a confusão e possíveis erros.

As bordas da tabela também desempenham um papel no design geral e na estética de um site. Ao personalizar a cor, a espessura e o estilo da borda, os desenvolvedores da Web podem criar designs visualmente atraentes e coesos que aprimoram a experiência do usuário.

Além disso, as bordas da tabela podem ser usadas para criar tabelas interativas e responsivas que ajustam seu tamanho e layout com base no tamanho da tela ou dispositivo do usuário. Isso é importante para criar sites compatíveis com dispositivos móveis que podem ser facilmente acessados ​​e navegados em vários dispositivos.

Adicionando uma borda

O atributo border do HTML pode ser usado para definir a borda de uma tabela.

Este atributo aceita um valor numérico que especifica a espessura da borda em pixels. A propriedade border pode ser usada para definir a espessura, estilo e cor da borda.

Ao colocar uma borda em uma tabela HTML , você também pode colocar uma borda ao redor de cada célula da tabela. A propriedade CSS border é uma maneira mais poderosa de adicionar bordas a tabelas HTML.

Aplique a propriedade de borda CSS na tabela, componentes <th> e <td> para adicionar uma borda:

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
<!DOCTYPE html>
<html>
<head>
<style>
table ,th,td {
border: 1px solild;
}
</style>
</head>
<body>
<table>
<caption>Table of Popular Cars</caption>
<tr>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
<tr>
<td>Toyota</td>
<td>Camry</td>
<td>2020</td>
</tr>
<tr>
<td>Honda</td>
<td>Civic</td>
<td>2021</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Estilo da Borda da Tabela Html

As tabelas HTML podem ser estilizadas com vários estilos de borda para aprimorar a aparência visual da tabela. Existem diferentes estilos de borda disponíveis em CSS para aplicar em tabelas HTML.

Se você fornecer a cada célula uma cor de fundo diferente e deixar a borda branca (igual ao plano de fundo do documento), parecerá que não há borda alguma:

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>
<style>
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #723131;
}
</style>
</head>
<body>
<table>
<caption>Table of Popular Cars</caption>
<tr>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
<tr>
<td>Toyota</td>
<td>Camry</td>
<td>2020</td>
</tr>
<tr>
<td>Honda</td>
<td>Civic</td>
<td>2021</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Bordas Redondas da Tabela Html

As bordas da tabela HTML podem ter cantos arredondados por causa da propriedade border-radius no 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
<!DOCTYPE html>
<html>
<head>
<style>
table{
border: 1px solid white;
border-collapse: collapse;
border-radius: 10px;
}
</style>
</head>
<body>
<table>
<caption>Table of Popular Cars</caption>
<tr>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
<tr>
<td>Toyota</td>
<td>Camry</td>
<td>2020</td>
</tr>
<tr>
<td>Honda</td>
<td>Civic</td>
<td>2021</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Borda da Tabela Html Recolhida

A propriedade border-collapse do CSS pode ser usada para especificar se as bordas da tabela devem ser recolhidas em uma única borda ou separadas.

O valor padrão é separado . Modifique a propriedade border-collapse do CSS para recolher para evitar bordas duplicadas, como no exemplo anterior.

Nas bordas da tabela HTML, isso fará com que as bordas se fundam em uma única borda:

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>
<style>
table ,th,td{
border-collapse: collapse;
margin: 20px auto;
}
</style>
</head>
<body>
<table>
<caption>Table of Popular Cars</caption>
<tr>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
<tr>
<td>Toyota</td>
<td>Camry</td>
<td>2020</td>
</tr>
<tr>
<td>Honda</td>
<td>Civic</td>
<td>2021</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cor da Borda da Tabela Html

Você pode modificar a cor da borda usando a propriedade border-color em CSS. Aqui está um exemplo:

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>
<style>
td,th{
border-color: #802d2d;
font-size: 15px;
}
</style>
</head>
<body>
<table>
<caption>Table of Popular Cars</caption>
<tr>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
<tr>
<td>Toyota</td>
<td>Camry</td>
<td>2020</td>
</tr>
<tr>
<td>Honda</td>
<td>Civic</td>
<td>2021</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Ao excluir a tabela do seletor de CSS, a borda ao redor da tabela será ignorada:

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>
<head>
<style>
td,th{
border: 1px solid white;
border-collapse: collapse;
border-radius: 10px;
}
</style>
</head>
<body>
<table>
<caption>Table of Popular Cars</caption>
<tr>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
<tr>
<td>Toyota</td>
<td>Camry</td>
<td>2020</td>
</tr>
<tr>
<td>Honda</td>
<td>Civic</td>
<td>2021</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Bordas da Tabela Html Pontilhadas

O estilo de borda pontilhada cria uma série de pontos ao redor da mesa.

Você pode personalizar como uma borda de tabela HTML aparece empregando a propriedade border-style.

Estes valores são permitidos::

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden

Aqui está o código CSS para aplicar um estilo de borda pontilhada a uma 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
<!DOCTYPE html>
<html>
<head>
<style>
td,th{
border-style: dotted;
}
</style>
</head>
<body>
<table>
<caption>Table of Popular Cars</caption>
<tr>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
<tr>
<td>Toyota</td>
<td>Camry</td>
<td>2020</td>
</tr>
<tr>
<td>Honda</td>
<td>Civic</td>
<td>2021</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Vantagens da borda da tabela HTML

Aqui estão algumas vantagens de usar bordas de tabelas HTML:

  • As bordas da tabela podem ajudar a facilitar a leitura dos dados em uma tabela, fornecendo limites visuais que separam diferentes linhas e colunas. Isso pode ajudar a evitar confusão e erros ao interpretar os dados.
  • As bordas da tabela podem ajudar a organizar os dados em uma tabela, facilitando a compreensão e a navegação dos usuários. Ao usar diferentes estilos e cores de borda, é possível criar distinções visuais claras entre as diferentes partes da mesa.
  • As bordas da tabela podem ser personalizadas usando CSS para corresponder ao design geral e à estética de um site. Isso permite que os desenvolvedores da Web criem designs visualmente atraentes e coesos que aprimoram a experiência do usuário.
  • As bordas da tabela HTML podem ser usadas para criar tabelas responsivas e compatíveis com dispositivos móveis que ajustam seu layout e tamanho com base no tamanho da tela ou dispositivo do usuário. Isso torna mais fácil para os usuários acessar e navegar pelas tabelas em vários dispositivos.
  • As bordas da tabela também podem melhorar a acessibilidade, fornecendo dicas visuais e estrutura para leitores de tela e outras tecnologias assistivas. Isso pode ajudar a tornar o conteúdo mais acessível para usuários com deficiências.
Deixe sua reação abaixo como forma de agradecimento ou para sugerir algumas ideias para o aprimoramento deste site.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.