Borda da tabela HTML

“Uma borda da tabela define os limites de uma tabela além da qual você não pode expandir esta tabela. No HTML, você pode criar diferentes tipos de bordas para suas mesas para torná -las mais fascinantes. Neste guia, ensinaremos o básico da criação das fronteiras da mesa em HTML, levando você a alguns exemplos.”

Como criar uma tabela com uma borda em HTML?

Existem diferentes tipos de bordas de tabela que estão disponíveis no HTML. Você pode usar essas fronteiras de acordo com sua própria escolha. No entanto, nos três exemplos listados abaixo, compartilharemos com você os métodos de criação de três das fronteiras de tabela mais usadas em HTML.

Exemplo 1: Criando uma borda da tabela em colapso

Uma borda de tabela em colapso é aquela em que as fronteiras de todas as células de uma tabela entram em colapso e se fundem em uma única borda sólida. Neste exemplo, mostraremos como você pode criar uma borda de tabela em colapso no HTML usando o seguinte script HTML:

Neste exemplo, criamos uma tabela em html com a ajuda da tag da tabela. Selecionamos uma fronteira de “preto sólido de 1 pixels” para esta tabela e também escolhemos essa borda para ser desmoronada, eu.e., Todas as células da tabela terão a mesma borda. Então, queríamos que esta tabela tivesse duas colunas diferentes, a saber, "funcionário" e "designação" e queríamos ter os registros de dois funcionários diferentes nesta tabela. Portanto, mencionamos os nomes desses funcionários e suas respectivas designações em tags separadas de “TR” e “TD” de HTML.

Quando executamos o script HTML acima mencionado, nossa tabela com borda colapsada apareceu na página da web, como mostrado na imagem abaixo:

Exemplo 2: Criando uma borda de tabela invisível

Uma borda invisível da tabela é aquela em que escolhemos uma cor de fundo para todas as células da nossa mesa, mantendo a cor da borda da tabela como "branca" por causa da qual parece que nossa mesa está sem fronteiras. Para criar essa tabela no HTML, você terá que usar o seguinte script HTML:

Neste script, definimos a cor da borda da mesa como branca para que possa parecer invisível. Então, escolhemos a cor aleatória de fundo para todas as células da nossa mesa. Depois disso, usamos as mesmas entradas de tabela que usamos em nosso primeiro exemplo.

Agora, quando executamos esse script HTML, nossa tabela com uma borda invisível apareceu na página da web, como mostrado na imagem abaixo:

Exemplo 3: Criando uma borda de mesa pontilhada

Como o nome diz, uma borda pontilhada de mesa é aquela cuja fronteira está na forma de pontos, em vez de ser sólida. Para criar essa tabela em HTML, você deverá consultar o seguinte script:

Neste exemplo de script, escolhemos o estilo de borda pontilhado para a nossa mesa. Depois disso, o restante das entradas da tabela é exatamente o mesmo que usamos em nossos dois primeiros exemplos.

Após a execução, este script HTML renderizou uma tabela com uma borda pontilhada na página da web, conforme mostrado na imagem abaixo:

Conclusão

Este tutorial foi criado para demonstrar o uso e a criação de bordas de mesa em HTML. Para explicar isso em detalhes, conversamos sobre três tipos diferentes de bordas de mesa em HTML. Você pode ver claramente o impacto de alterar o estilo de fronteira na aparência geral da sua tabela dos exemplos mostrados acima. Portanto, agora, você pode escolher convenientemente a borda da tabela que você mais gosta e criá -la em segundos. Além disso, você também pode explorar outras fronteiras de tabela que estão disponíveis no HTML por conta própria.