close

Udhëzues për formatimin e listave dhe tabelave në CSS- Karakteristikat dhe shembujt

Formatimi i listave dhe tabelave është një pjesë thelbësore e shfaqjes së informacionit në faqen tuaj të internetit. CSS ofron veti dhe klasa për të krijuar dhe personalizuar listat dhe tabelat sipas dëshirës tuaj. Këtu është një udhëzues i detajuar se si të formatoni listat dhe tabelat në CSS.

 

Formatimi i listave

Lista e pa renditur(ul)

Vetia kryesore: list-style-lloj.

Vlerat: none, disc, circle, square.

Shembull:

ul {  
  list-style-type: disc;  
}

Lista e renditur(ol)

Vetia kryesore: list-style-lloj.

Vlerat: asnjë(e parazgjedhur), dhjetore, alfa e poshtme, alfa e sipërme, romake e ulët, romake e sipërme.

Shembull:

ol {  
  list-style-type: decimal;  
}

Lista e përkufizimeve(dl)

Vetia kryesore: Nuk ka veçori specifike CSS për të formatuar listat e definicioneve. Megjithatë, ju mund të stiloni elementet brenda listës duke përdorur klasa ose veçori të tjera si p.sh font-size, font-weight, margin, padding, etc.

Shembull:

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

 

Formatimi i tabelave

Formatimi i strukturës së tabelës

Prona kryesore: border-collapse.

Vlerat: separate(default), collaps e.

Shembull:

table {  
  border-collapse: collapse;  
}

Formatimi i kufirit të tabelës

Prona kryesore: border.

Vlerat: Një vlerë kufitare, për shembull: 1px solid black.

Shembull:

table {  
  border: 1px solid black;  
}

Formatimi i kufirit të qelizave

Prona kryesore: border.

Vlerat: Një vlerë kufitare, për shembull: 1px solid black.

Shembull:

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

Shtrirja dhe hapësira e qelizave të tabelës

Karakteristikat kryesore: text-align, padding.

  • text-align: Vlerat e shtrirjes, për shembull: left, right, center.
  • mbushje: Vlera e ndarjes brenda qelizave, për shembull: 10 px.

Shembull:

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

Sfondi dhe ngjyra e tekstit në tabela

Karakteristikat kryesore: background-color, color

  • background-color: Vlera e ngjyrës së sfondit, për shembull: lightgray.
  • color: Vlera e ngjyrës së tekstit, për shembull: white.

Shembull:

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

Madhësia e kolonës dhe rreshtit në tabela

Karakteristikat kryesore: width, height.

  • width: Vlera e gjerësisë, për shembull: "100px", "20%".
  • height: Vlera e lartësisë, për shembull: "50px", "10%".

Shembull:

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

 

Ky është një udhëzues gjithëpërfshirës se si të formatoni listat dhe tabelat në CSS. Ju mund të personalizoni vlerat dhe vetitë për të krijuar stile të listave dhe tabelave që i përshtaten nevojave tuaja të dizajnit në faqen tuaj të internetit.