close

Treoir maidir le Liostaí agus Táblaí a Fhormáidiú i CSS- Airíonna agus Samplaí

Is cuid riachtanach é formáidiú liostaí agus táblaí chun faisnéis a thaispeáint ar do shuíomh Gréasáin. Soláthraíonn CSS airíonna agus ranganna chun liostaí agus táblaí a chruthú agus a shaincheapadh de réir mar is maith leat. Seo treoir mhionsonraithe ar conas liostaí agus táblaí a fhormáidiú i CSS.

 

Liostaí Formáidithe

Liosta Neamhordaithe(ul)

Príomh-airí: liosta-stíl-cineál.

Luachanna: none, disc, circle, square.

Sampla:

ul {  
  list-style-type: disc;  
}

Liosta Ordaithe(ol)

Príomh-airí: liosta-stíl-cineál.

Luachanna: ceann ar bith(réamhshocraithe), deachúlach, íochtair-alfa, alfa uachtair, íochtair rómhánach, rómhánach uachtarach.

Sampla:

ol {  
  list-style-type: decimal;  
}

Liosta sainmhínithe(dl)

Príomh-airí: Níl aon airí sonrach CSS ann chun liostaí sainmhínithe a fhormáidiú. Mar sin féin, is féidir leat na heilimintí a stíliú laistigh den liosta ag baint úsáide as ranganna nó airíonna eile ar nós font-size, font-weight, margin, padding, etc.

Sampla:

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

 

Táblaí Formáidithe

Formáidiú Struchtúr Tábla

Príomh-mhaoin: border-collapse.

Luachanna: separate(default), collaps e.

Sampla:

table {  
  border-collapse: collapse;  
}

Formáidiú Teorainn Tábla

Príomh-mhaoin: border.

Luachanna: Luach teorann, mar shampla: 1px solid black.

Sampla:

table {  
  border: 1px solid black;  
}

Formáidiú Teorainn Cille

Príomh-mhaoin: border.

Luachanna: Luach teorann, mar shampla: 1px solid black.

Sampla:

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

Ailíniú agus Spásáil na gCeall Tábla

Príomh-airíonna: text-align, padding.

  • téacs-ailíniú: Luachanna ailínithe, mar shampla: left, right, center.
  • stuáil: Luach spásála laistigh de chealla, mar shampla: 10px.

Sampla:

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

Cúlra agus Dath Téacs i dTáblaí

Príomh-airíonna: background-color, color

  • background-color: Luach dath an chúlra, mar shampla: lightgray.
  • color: Luach datha an téacs, mar shampla: white.

Sampla:

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

Méid Colún agus Ró i dTáblaí

Príomh-airíonna: width, height.

  • width: Luach leithead, mar shampla: "100px", "20%".
  • height: Luach airde, mar shampla: "50px", "10%".

Sampla:

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

 

Is treoir chuimsitheach é seo ar conas liostaí agus táblaí a fhormáidiú i CSS. Is féidir leat na luachanna agus na hairíonna a shaincheapadh chun stíleanna liostaí agus táblaí a oireann do do riachtanais dearaidh ar do láithreán gréasáin a chruthú.