close

Vodnik za oblikovanje seznamov in tabel v CSS – lastnosti in primeri

Oblikovanje seznamov in tabel je bistveni del prikaza informacij na vašem spletnem mestu. CSS ponuja lastnosti in razrede za ustvarjanje in prilagajanje seznamov in tabel po vaših željah. Tukaj je podroben vodnik o oblikovanju seznamov in tabel v CSS.

 

Oblikovanje seznamov

Neurejen seznam(ul)

Glavna lastnost: list-style-type.

Vrednosti: none, disc, circle, square.

primer:

ul {  
  list-style-type: disc;  
}

Urejeni seznam(ol)

Glavna lastnost: list-style-type.

Vrednosti: brez(privzeto), decimalno, spodnja alfa, zgornja alfa, spodnja rimska, zgornja rimska.

primer:

ol {  
  list-style-type: decimal;  
}

Seznam definicij(dl)

Glavna lastnost: ni posebne lastnosti CSS za oblikovanje seznamov definicij. Vendar pa lahko elemente na seznamu oblikujete z uporabo razredov ali drugih lastnosti, kot je font-size, font-weight, margin, padding, etc.

primer:

<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 tabel

Oblikovanje strukture tabele

Glavna lastnost: border-collapse.

Vrednosti: separate(default), collaps e.

primer:

table {  
  border-collapse: collapse;  
}

Oblikovanje obrobe tabele

Glavna lastnost: border.

Vrednosti: mejna vrednost, na primer: 1px solid black.

primer:

table {  
  border: 1px solid black;  
}

Oblikovanje meje celice

Glavna lastnost: border.

Vrednosti: mejna vrednost, na primer: 1px solid black.

primer:

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

Poravnava in razmik celic tabele

Glavne lastnosti text-align, padding:.

  • text-align: Vrednosti poravnave, na primer: left, right, center.
  • oblazinjenje: vrednost razmika znotraj celic, na primer: 10 slikovnih pik.

primer:

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

Barva ozadja in besedila v tabelah

Glavne lastnosti: background-color, color

  • background-color: Vrednost barve ozadja, na primer: lightgray.
  • color: Vrednost barve besedila, na primer: white.

primer:

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

Velikost stolpcev in vrstic v tabelah

Glavne lastnosti: width, height.

  • width: Vrednost širine, na primer: "100px", "20%".
  • height: vrednost višine, na primer: "50px", "10%".

primer:

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

 

To je obsežen vodnik o oblikovanju seznamov in tabel v CSS. Vrednosti in lastnosti lahko prilagodite, da ustvarite sloge seznamov in tabel, ki ustrezajo vašim potrebam oblikovanja na vašem spletnem mestu.