close

Vodič za oblikovanje popisa i tablica u CSS-u- Svojstva i primjeri

Formatiranje popisa i tablica bitan je dio prikazivanja informacija na vašoj web stranici. CSS pruža svojstva i klase za stvaranje i prilagodbu popisa i tablica prema vašim željama. Ovdje je detaljan vodič o tome kako formatirati popise i tablice u CSS-u.

 

Oblikovanje popisa

Neuređeni popis(ul)

Glavno svojstvo: list-style-type.

Vrijednosti: none, disc, circle, square.

Primjer:

ul {  
  list-style-type: disc;  
}

Poredani popis(ol)

Glavno svojstvo: list-style-type.

Vrijednosti: ništa(zadano), decimalno, donja alfa, gornja alfa, donja rimska, gornja rimska.

Primjer:

ol {  
  list-style-type: decimal;  
}

Popis definicija(dl)

Glavno svojstvo: Ne postoji specifično CSS svojstvo za formatiranje popisa definicija. Međutim, elemente unutar popisa možete stilizirati pomoću klasa ili drugih svojstava kao što su font-size, font-weight, margin, padding, etc.

Primjer:

<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;  
}

 

Oblikovanje tablica

Oblikovanje strukture tablice

Glavno svojstvo: border-collapse.

Vrijednosti: separate(default), collaps e.

Primjer:

table {  
  border-collapse: collapse;  
}

Oblikovanje obruba tablice

Glavno svojstvo: border.

Vrijednosti: granična vrijednost, na primjer: 1px solid black.

Primjer:

table {  
  border: 1px solid black;  
}

Oblikovanje obruba ćelije

Glavno svojstvo: border.

Vrijednosti: granična vrijednost, na primjer: 1px solid black.

Primjer:

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

Poravnanje i razmak ćelija tablice

Glavna svojstva: text-align, padding.

  • text-align: Vrijednosti poravnanja, na primjer: left, right, center.
  • padding: vrijednost razmaka unutar ćelija, na primjer: 10px.

Primjer:

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

Boja pozadine i teksta u tablicama

Glavna svojstva: background-color, color

  • background-color: Vrijednost boje pozadine, na primjer: lightgray.
  • color: Vrijednost boje teksta, na primjer: white.

Primjer:

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

Veličina stupaca i redaka u tablicama

Glavna svojstva: width, height.

  • width: Vrijednost širine, na primjer: "100px", "20%".
  • height: Vrijednost visine, na primjer: "50px", "10%".

Primjer:

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

 

Ovo je opsežan vodič o formatiranju popisa i tablica u CSS-u. Možete prilagoditi vrijednosti i svojstva za izradu stilova popisa i tablica koji odgovaraju vašim potrebama dizajna na vašoj web stranici.