close

Ghid pentru formatarea listelor și tabelelor în CSS- Proprietăți și exemple

Formatarea listelor și a tabelelor este o parte esențială a afișării informațiilor pe site-ul dvs. web. CSS oferă proprietăți și clase pentru a crea și personaliza liste și tabele după bunul plac. Iată un ghid detaliat despre cum să formatați listele și tabelele în CSS.

 

Formatarea listelor

Lista neordonată(ul)

Proprietatea principală: list-style-type.

Valori: none, disc, circle, square.

Exemplu:

ul {  
  list-style-type: disc;  
}

Lista ordonată(ol)

Proprietatea principală: list-style-type.

Valori: nici unul(implicit), zecimal, alfa inferior, alfa superior, roman inferior, roman superior.

Exemplu:

ol {  
  list-style-type: decimal;  
}

Lista de definiții(dl)

Proprietatea principală: Nu există nicio proprietate CSS specifică pentru a forma listele de definiții. Cu toate acestea, puteți stila elementele din listă folosind clase sau alte proprietăți, cum ar fi font-size, font-weight, margin, padding, etc.

Exemplu:

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

 

Formatarea tabelelor

Formatarea structurii tabelului

Proprietatea principala: border-collapse.

Valori: separate(default), collaps e.

Exemplu:

table {  
  border-collapse: collapse;  
}

Formatarea chenarului tabelului

Proprietatea principala: border.

Valori: O valoare de frontieră, de exemplu: 1px solid black.

Exemplu:

table {  
  border: 1px solid black;  
}

Formatarea marginii celulei

Proprietatea principala: border.

Valori: O valoare de frontieră, de exemplu: 1px solid black.

Exemplu:

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

Alinierea și spațierea celulelor tabelului

Proprietăți principale: text-align, padding.

  • text-align: Valori de aliniere, de exemplu: left, right, center.
  • padding: Valoare de spațiere în interiorul celulelor, de exemplu: 10px.

Exemplu:

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

Culoare de fundal și text în tabele

Proprietăți principale: background-color, color

  • background-color: Valoarea culorii de fundal, de exemplu: lightgray.
  • color: Valoarea culorii textului, de exemplu: white.

Exemplu:

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

Dimensiunea coloanelor și rândurilor în tabele

Proprietăți principale: width, height.

  • width: Valoarea lățimii, de exemplu: „100px”, „20%”.
  • height: Valoarea înălțimii, de exemplu: „50px”, „10%”.

Exemplu:

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

 

Acesta este un ghid cuprinzător despre cum să formatați liste și tabele în CSS. Puteți personaliza valorile și proprietățile pentru a crea stiluri de liste și tabel care se potrivesc nevoilor dvs. de design pe site-ul dvs. web.