Usando CSS para adicionar bordas internas em uma tabela HTML

Você pode ter ouvido que as tabelas CSS e HTML não se misturam. Este não é o caso. Sim, o uso de tabelas HTML para layout não é mais uma prática recomendada de design da Web, pois elas foram substituídas por estilos de layout CSS, mas as tabelas ainda são a marcação correta a ser usada para adicionar dados tabulares a uma página da Web.

Como muitos profissionais da Web se esquivam das tabelas pensando que não são nada além de problemas, muitos desses profissionais têm pouca experiência em trabalhar com esse elemento HTML comum e lutam quando precisam adicionar linhas internas às células da tabela em uma página da Web.

Bordas da Tabela CSS

Quando você usa CSS para adicionar bordas às tabelas, ele adiciona apenas a borda ao redor da parte externa da tabela. Se você quiser adicionar linhas internas às células individuais dessa tabela, será necessário adicionar bordas aos elementos CSS internos. Você pode usar a tag HR para adicionar linhas dentro de células individuais.

Para aplicar os estilos abordados neste tutorial, você precisa de uma tabela em uma página da Web. Em seguida, você cria uma folha de estilos como uma folha de estilos interna no cabeçalho do documento (se estiver lidando com apenas uma única página) ou anexa ao documento como uma folha de estilos externa (se o site tiver várias páginas). Você coloca os estilos para adicionar linhas internas à folha de estilo.

Antes que você comece

Decida onde você deseja que as linhas apareçam na tabela. Você tem várias opções, incluindo:

• Cercando todas as células para formar uma grade
• Posicionando as linhas entre apenas as colunas
• Apenas entre as linhas
• Entre colunas ou linhas específicas.

Você também pode posicionar as linhas ao redor de células individuais ou dentro de células individuais.

Como adicionar linhas ao redor de todas as células em uma tabela

Para adicionar linhas ao redor de todas as células da sua tabela, criando um efeito de grade, adicione o seguinte à sua folha de estilo:

td, th {borda: sólido 1px preto;}

Como adicionar linhas entre apenas as colunas em uma tabela

Para adicionar linhas entre as colunas para criar linhas verticais que são executadas de cima para baixo nas colunas da tabela, adicione o seguinte à sua folha de estilo:

td, th {borda esquerda: sólido 1px preto;}

Se você não quer linhas verticais para aparecer na primeira coluna, você adiciona uma classe para º e td células. Neste exemplo, suponha uma classe de sem fronteiras nessas células e remova a borda com uma regra de CSS. A classe HTML que você usa é:

class = "sem-fronteira">

Em seguida, adicione o seguinte estilo à folha de estilo:

.no-border {border-left: nenhum;}

Como adicionar linhas entre apenas as linhas em uma tabela

Como com a adição de linhas entre as colunas, você pode adicionar linhas horizontais entre as linhas com um estilo simples adicionado à folha de estilos, da seguinte maneira:

tr {borda inferior: sólido 1px preto;}

Para remover a borda da parte inferior da tabela, você adicionaria novamente uma classe a essa

tag:

class = "sem-fronteira">

Adicione o seguinte estilo à sua folha de estilos:

.no-border {border-bottom: nenhum;}

Como adicionar linhas entre colunas específicas ou linhas em uma tabela

Se você quiser apenas linhas entre linhas ou colunas específicas, precisará usar uma classe nessas células ou linhas. Adicionar uma linha entre colunas é um pouco mais difícil do que entre linhas porque você precisa adicionar a classe a todas as células dessa coluna. Se a sua tabela for gerada automaticamente a partir de um CMS de algum tipo, isso pode não ser possível, mas se você codificar manualmente a página, poderá adicionar classes apropriadas conforme necessário para obter esse efeito.

class = "side-border">

Adicionar linhas entre linhas é mais fácil porque você pode adicionar a classe à linha na qual deseja colocar a linha.

class = "border-bottom">

Em seguida, adicione o CSS à sua folha de estilo:

.border do lado {borda esquerda: sólido 1px preto;}.border-bottom {borda inferior: sólido 1px preto;}

Como adicionar linhas em torno de células individuais em uma tabela

Para adicionar linhas em torno de células individuais, você adiciona uma classe às células nas quais deseja uma borda:

class = "border">

Em seguida, adicione o seguinte CSS à sua folha de estilo:

.fronteira {borda: sólido 1px preto;}

Como adicionar linhas dentro de células individuais em uma tabela

Se você quiser adicionar linhas dentro do conteúdo de uma célula, a maneira mais fácil de fazer isso é com a tag de regra horizontal ().

Dicas úteis

Se você notar lacunas nas bordas, verifique se o estilo de limite de recolhimento está definido na tabela. Adicione o seguinte à sua folha de estilo:

mesa {border-collapse: colapso;}

Você pode evitar tudo e usar o atributo border na sua tag de tabela. Perceba, no entanto, que esse atributo, embora não seja obsoleto, é significativamente menos flexível do que o CSS, já que você só pode definir a largura da borda e só pode tê-lo em torno de todas as células da tabela ou nenhuma.