close

Mwongozo wa Orodha za Uumbizaji na Majedwali katika CSS- Sifa na Mifano

Uumbizaji orodha na majedwali ni sehemu muhimu ya kuonyesha taarifa kwenye tovuti yako. CSS hutoa sifa na madarasa ili kuunda na kubinafsisha orodha na majedwali kwa kupenda kwako. Huu hapa ni mwongozo wa kina wa jinsi ya kupanga orodha na majedwali katika CSS.

 

Orodha za Uumbizaji

Orodha Isiyopangwa(ul)

Sifa kuu: aina ya mtindo wa orodha.

Maadili none, disc, circle, square:.

Mfano:

ul {  
  list-style-type: disc;  
}

Orodha Iliyoagizwa(ol)

Sifa kuu: aina ya mtindo wa orodha.

Thamani: hakuna(chaguo-msingi), desimali, alfa ya chini, alfa ya juu, ya kirumi ya chini, ya juu-kirumi.

Mfano:

ol {  
  list-style-type: decimal;  
}

Orodha ya Ufafanuzi(dl)

Sifa kuu: Hakuna kipengele mahususi cha CSS cha kupanga orodha za ufafanuzi. Walakini, unaweza kuunda vipengee vilivyo ndani ya orodha kwa kutumia madarasa au mali zingine kama vile font-size, font-weight, margin, padding, etc.

Mfano:

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

 

Uumbizaji wa Jedwali

Uumbizaji wa Muundo wa Jedwali

Mali kuu border-collapse:.

Maadili: separate(default), collaps e.

Mfano:

table {  
  border-collapse: collapse;  
}

Uumbizaji wa Mipaka ya Jedwali

Mali kuu border:.

Thamani: Thamani ya mpaka, kwa mfano: 1px solid black.

Mfano:

table {  
  border: 1px solid black;  
}

Uumbizaji wa Mpaka wa Kiini

Mali kuu border:.

Thamani: Thamani ya mpaka, kwa mfano: 1px solid black.

Mfano:

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

Mpangilio na Nafasi ya Seli za Jedwali

Tabia kuu text-align, padding:.

  • upangaji wa maandishi: Thamani za upangaji, kwa mfano: left, right, center.
  • padding: Thamani ya nafasi ndani ya seli, kwa mfano: 10px.

Mfano:

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

Rangi ya Mandharinyuma na Maandishi katika Majedwali

Tabia kuu: background-color, color

  • background-color: Thamani ya rangi ya usuli, kwa mfano: lightgray.
  • color: Thamani ya rangi ya maandishi, kwa mfano white:.

Mfano:

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

Safu wima na Ukubwa wa Safu katika Majedwali

Sifa kuu: width, height.

  • width: Thamani ya upana, kwa mfano: "100px", "20%".
  • height: Thamani ya urefu, kwa mfano: "50px", "10%".

Mfano:

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

 

Huu ni mwongozo wa kina wa jinsi ya kupanga orodha na majedwali katika CSS. Unaweza kubinafsisha thamani na sifa ili kuunda orodha na mitindo ya jedwali inayokidhi mahitaji yako ya muundo kwenye tovuti yako.