Como configurar tabela com css?
Tabela CSS
Basta usar as tags html table, th, tr, td e inserir o estilo 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. **/
}
Quer acompanhar as novidade do site?
Leia mais em: ww.w3schools.com/css/default.asp
