CSS-ში სიებისა და ცხრილების ფორმატირების გზამკვლევი- თვისებები და მაგალითები

სიებისა და ცხრილების ფორმატირება თქვენს ვებსაიტზე ინფორმაციის ჩვენების მნიშვნელოვანი ნაწილია. CSS უზრუნველყოფს თვისებებს და კლასებს სიებისა და ცხრილების შესაქმნელად და თქვენი შეხედულებისამებრ მორგებისთვის. აქ არის დეტალური გზამკვლევი, თუ როგორ უნდა დაფორმატოთ სიები და ცხრილები CSS-ში.

 

სიების ფორმატირება

შეუკვეთავი სია(ul)

ძირითადი საკუთრება: list-style-type.

ღირებულებები: none, disc, circle, square.

მაგალითი:

ul {  
  list-style-type: disc;  
}  

შეკვეთილი სია(ol)

ძირითადი საკუთრება: list-style-type.

მნიშვნელობები: არცერთი(ნაგულისხმევი), ათობითი, ქვედა-ალფა, ზედა-ალფა, ქვედა-რომაული, ზედა-რომაული.

მაგალითი:

ol {  
  list-style-type: decimal;  
}  

განმარტებების სია(dl)

მთავარი თვისება: არ არსებობს სპეციფიკური CSS თვისება, რომ დააფორმატოს განსაზღვრების სიები. თუმცა, თქვენ შეგიძლიათ ჩამოაყალიბოთ ელემენტები სიაში კლასების ან სხვა თვისებების გამოყენებით, როგორიცაა font-size, font-weight, margin, padding, etc.

მაგალითი:

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

 

ცხრილების ფორმატირება

ცხრილის სტრუქტურის ფორმატირება

ძირითადი ქონება border-collapse:.

ღირებულებები: separate(default), collaps ე.

მაგალითი:

table {  
  border-collapse: collapse;  
}  

ცხრილის საზღვრების ფორმატირება

ძირითადი ქონება border:.

მნიშვნელობები: საზღვრის მნიშვნელობა, მაგალითად: 1px solid black.

მაგალითი:

table {  
  border: 1px solid black;  
}  

უჯრედის საზღვრის ფორმატირება

ძირითადი ქონება border:.

მნიშვნელობები: საზღვრის მნიშვნელობა, მაგალითად: 1px solid black.

მაგალითი:

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

ცხრილის უჯრედების გასწორება და დაშორება

ძირითადი თვისებები text-align, padding:.

• text-align: გასწორების მნიშვნელობები, მაგალითად: left, right, center.
• padding: დაშორების მნიშვნელობა უჯრედებში, მაგალითად: 10px.

მაგალითი:

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

ფონის და ტექსტის ფერი ცხრილებში

ძირითადი თვისებები: background-color, color

• background-color: ფონის ფერის მნიშვნელობა, მაგალითად: lightgray.
• color: ტექსტის ფერის მნიშვნელობა, მაგალითად: white.

მაგალითი:

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

სვეტისა და მწკრივის ზომა ცხრილებში

ძირითადი თვისებები: width, height.

• width: სიგანის მნიშვნელობა, მაგალითად: "100px", "20%".
• height: სიმაღლის მნიშვნელობა, მაგალითად: "50px", "10%".

მაგალითი:

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

 

ეს არის ყოვლისმომცველი გზამკვლევი იმის შესახებ, თუ როგორ დავაფორმოთ სიები და ცხრილები CSS-ში. თქვენ შეგიძლიათ დააკონფიგურიროთ მნიშვნელობები და თვისებები, რათა შექმნათ სია და ცხრილის სტილები, რომლებიც შეესაბამება თქვენს დიზაინის საჭიროებებს თქვენს ვებსაიტზე.