close

Jagora zuwa Tsara Lissafi da Tables a CSS- Kayayyaki da Misalai

Tsara jeri da teburi muhimmin sashi ne na nuna bayanai akan gidan yanar gizon ku. CSS yana ba da kaddarori da azuzuwan ƙirƙira da keɓance jeri da teburi yadda kuke so. Anan akwai cikakken jagora kan yadda ake tsara jeri da teburi a cikin CSS.

 

Jerin Lissafi

Jerin da ba a ba da oda ba(ul)

Babban dukiya: nau'in jeri-style.

Darajoji none, disc, circle, square:.

Misali:

ul {  
  list-style-type: disc;  
}

Jerin da aka yi oda(ol)

Babban dukiya: nau'in jeri-style.

Ƙimar: babu ko ɗaya(tsoho), decimal, ƙananan-alpha, babba-alpha, ƙananan-roman, babba-roman.

Misali:

ol {  
  list-style-type: decimal;  
}

Jerin Ma'anar(dl)

Babban kadarorin: Babu takamaiman kayan CSS don tsara lissafin ma'anar. Koyaya, zaku iya salon abubuwan da ke cikin lissafin ta amfani da azuzuwan ko wasu kaddarorin kamar font-size, font-weight, margin, padding, etc.

Misali:

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

 

Tsara Tables

Tsarin Tsarin Tebur

Babban dukiya border-collapse:.

Daraja: separate(default), collaps e.

Misali:

table {  
  border-collapse: collapse;  
}

Tsarin Iyakar Tebur

Babban dukiya border:.

Ƙimar: Ƙimar iyaka, misali 1px solid black:.

Misali:

table {  
  border: 1px solid black;  
}

Tsarin Iyakar salula

Babban dukiya border:.

Ƙimar: Ƙimar iyaka, misali 1px solid black:.

Misali:

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

Daidaitawa da Tazarar Kwayoyin Tebu

Babban kaddarorin: text-align, padding.

  • rubutu-align: Daidaita dabi'u, misali left, right, center:.
  • padding: ƙimar tazara tsakanin sel, misali: 10px.

Misali:

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

Fage da Launin Rubutu a cikin Tebura

Babban kaddarorin: background-color, color

  • background-color: Ƙimar launi ta bango, misali lightgray:.
  • color: Ƙimar launi rubutu, misali white:.

Misali:

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

Girman Rumbun da Layi a cikin Tables

Babban kaddarorin: width, height.

  • width: Nisa darajar, misali: "100px", "20%".
  • height: Ƙimar tsayi, misali: "50px", "10%".

Misali:

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

 

Wannan cikakken jagora ne kan yadda ake tsara jeri da teburi a CSS. Kuna iya tsara dabi'u da kaddarorin don ƙirƙirar jeri da salon tebur waɗanda suka dace da buƙatun ƙirar ku akan gidan yanar gizonku.