***Saiba como estilizar tabela com css

Como configurar tabela com css?

Leia mais sobre: Tabela CSS

Basta usar as tags html table, th, tr, td e inserir o estilo css.

Essa pergunta é muito genérica, pois não tem um objetivo exato, por exemplo: como deixar as linhas cor sim, cor não na tabela com css, ou como estilizar o cabeçalho de uma tabela em css.

Então vou mostrar o básico.

A criação da tabela em HTML pode ser conferida aqui.

Veja a tabela só com html:

Categoria	Subcategoria	Título
Linguagem	HTML	Criar tabela com HTML
Linguagem	CSS	Estilizar tabela com css
Linguagem	PHP	Criar tabela dinâmica com PHP
Framework	Angular	Criar tabela dinâmica com ngfor
Banco de dados	MySQL	Criar tabela no SQL

Agora vou mostrar como ficaria com alguns estilos e explicar o que foi feito no código.

Categoria	Subcategoria	Título
Linguagem	HTML	Criar tabela com HTML
Linguagem	CSS	Estilizar tabela com css
Linguagem	PHP	Criar tabela dinâmica com PHP
Framework	Angular	Criar tabela dinâmica com ngfor
Banco de dados	MySQL	Criar tabela no SQL

O css aplicado é:

table{ /** Faz o estilo da tabela inteira. **/
   background: orange; /** Coloca um fundo laranja. **/
   border-color: blue; /** Insere a borda azul. **/
   border-style: dotted; /** Define a borda pontilhada. **/
}
tr{/** Faz o estilo para as linhas. **/
   text-align: center; /** Centraliza o conteúdo. **/
}
th{/** Faz o estilo para as células do cabeçalho. **/
   background: #666; /** Muda para um fundo cinza. **/
   color: white; /** Troca a cor da fonte para branco. **/
}
td .esquerda{ /** É feito o estilo das celulas com o auxilio de uma classe. **/
   text-align: left; /**Alinha o texto da primeira coluna para esquerda. **/
}
td .centro{
   text-align: center; /**Centraliza o texto. **/
}
td .direita{
   text-align: right; /**Coloca o texto para esquerda. **/
}

Como adicionar bordas a tabela?

Tabela com Bordas - Guia de Estilização e Melhoria com CSS

Para adicionar bordas a uma tabela, você pode usar as propriedades CSS para estilizar a tabela. As bordas podem ser adicionadas às células da tabela e à própria tabela.

Aqui está um exemplo simples de como fazer isso:

CSS:

HTML:

     <table>
        <tr>
            <th>Categoria</th>
            <th>Linguagem</th>
            <th>Título</th>
        </tr>
        <tr>
            <td>Linguagem</td>
            <td>HTML</td>
            <td>Criar tabela com HTML</td>
        </tr>
        <tr>
            <td>Linguagem</td>
            <td>CSS</td>
            <td>Estilizar tabela com css</td>
        </tr>
        <tr>
            <td>Linguagem</td>
            <td>PHP</td>
            <td>Criar tabela dinâmica com PHP</td>
        </tr>
    </table>

Categoria	Linguagem	Título
Linguagem	HTML	Criar tabela com HTML
Linguagem	CSS	Estilizar tabela com css
Linguagem	PHP	Criar tabela dinâmica com PHP

Neste exemplo, estamos usando CSS para definir as bordas da tabela e das células. O estilo border-collapse: collapse; é usado para que as bordas das células sejam unidas, criando uma aparência mais limpa e organizada.

As propriedades CSS que controlam as bordas são:

border: Define a espessura, o estilo e a cor da borda. No exemplo, estamos usando 3px solid black, o que cria uma borda preta com 3 pixels de espessura.
padding: Define o espaçamento interno dentro das células, dando um espaço entre o conteúdo e as bordas.
text-align: Alinha o texto dentro das células à esquerda.

Você pode personalizar as propriedades CSS para se adequarem ao estilo visual que você deseja para a sua tabela. Além disso, é possível adicionar classes às células ou linhas específicas para aplicar estilos diferentes em determinadas partes da tabela.

Dicas gerais de CSS para aplicação das bordas

As tabelas são elementos essenciais para organizar e apresentar informações de forma clara e estruturada em páginas web. Além de fornecer uma excelente usabilidade para os visitantes do site, é fundamental melhorar a apresentação do conteúdo. Neste guia, exploraremos como estilizar tabelas com bordas de maneira eficiente para garantir uma melhor experiência do usuário.

Utilize CSS para Estilização:

Ao adicionar bordas a uma tabela, é importante utilizar CSS para garantir um código limpo e semântico. Evite o uso de estilos embutidos ou tags de estilo direto no HTML. Ao invés disso, utilize classes ou seletores CSS para aplicar as bordas às células e à tabela. Isso tornará o código mais organizado e fácil de manter.

Escolha a Propriedade border-collapse:

Para criar tabelas com bordas consistentes e bem definidas, utilize a propriedade border-collapse: collapse; no CSS. Essa propriedade une as bordas das células adjacentes, proporcionando uma aparência mais limpa e profissional. Além disso, evita espaçamentos indesejados entre as bordas.

Defina Estilos Adequados:

Escolha o estilo das bordas que se harmonizem com o design geral do site. Opte por cores e espessuras que não distraiam os usuários do conteúdo principal da tabela. Lembre-se de manter o equilíbrio entre a estética e a legibilidade.

Estilizar tabelas com bordas é uma prática essencial para proporcionar uma experiência agradável ao usuário. Utilizando CSS para estilização, a propriedade border-collapse: collapse;, estilos adequados, atributos de acessibilidade e otimização de conteúdo e desempenho, você estará preparado para criar tabelas atraentes e funcionais.

Veja mais em:

Como inserir bordas duplas em uma tabela?
Como Colocar Bordas na Tabela no Excel?
Como fazer borda na planilha do Excel?
como colocar cor na borda da tabela em html?
O que é o cellspacing?