close

Guia para formatar listas e tabelas em CSS- Propriedades e exemplos

A formatação de listas e tabelas é uma parte essencial da exibição de informações em seu site. CSS fornece propriedades e classes para criar e personalizar listas e tabelas ao seu gosto. Aqui está um guia detalhado sobre como formatar listas e tabelas em CSS.

 

Listas de formatação

Lista não ordenada(ul)

Propriedade principal: tipo de estilo de lista.

Valores: none, disc, circle, square.

Exemplo:

ul {  
  list-style-type: disc;  
}

Lista Ordenada(ol)

Propriedade principal: tipo de estilo de lista.

Valores: nenhum(padrão), decimal, alfa inferior, alfa superior, romano inferior, romano superior.

Exemplo:

ol {  
  list-style-type: decimal;  
}

Lista de Definição(dl)

Propriedade principal: Não há nenhuma propriedade CSS específica para formatar listas de definição. No entanto, você pode estilizar os elementos da lista usando classes ou outras propriedades, como font-size, font-weight, margin, padding, etc.

Exemplo:

<dl>  
  <dt>HTML</dt>  
  <dd>A markup language for creating web pages</dd>  
  <dt>CSS</dt>  
  <dd>A styling language for web pages</dd>  
</dl>  

dt {  
  font-weight: bold;  
}

 

Tabelas de formatação

Formatação da estrutura da tabela

Propriedade principal: border-collapse.

Valores: separate(default), collaps e.

Exemplo:

table {  
  border-collapse: collapse;  
}

Formatação da Borda da Tabela

Propriedade principal: border.

Valores: Um valor de borda, por exemplo: 1px solid black.

Exemplo:

table {  
  border: 1px solid black;  
}

Formatação da Borda da Célula

Propriedade principal: border.

Valores: Um valor de borda, por exemplo: 1px solid black.

Exemplo:

td, th {  
  border: 1px solid black;  
}

Alinhamento e espaçamento das células da tabela

Principais propriedades: text-align, padding.

  • text-align: Valores de alinhamento, por exemplo: left, right, center.
  • padding: Valor do espaçamento dentro das células, por exemplo: 10px.

Exemplo:

th {  
  text-align: center;  
  padding: 10px;  
}

Fundo e Cor do Texto em Tabelas

Propriedades principais: background-color, color

  • background-color: Valor da cor de fundo, por exemplo: lightgray.
  • color: Valor da cor do texto, por exemplo: white.

Exemplo:

table {  
  background-color: lightgray;  
  color: white;  
}

Tamanho de coluna e linha em tabelas

Principais propriedades: width, height.

  • width: Valor da largura, por exemplo: "100px", "20%".
  • height: Valor da altura, por exemplo: "50px", "10%".

Exemplo:

th {  
  width: 100px;  
  height: 50px;  
}

 

Este é um guia completo sobre como formatar listas e tabelas em CSS. Você pode personalizar os valores e propriedades para criar estilos de lista e tabela que atendam às suas necessidades de design em seu site.