CSSలో జాబితాలు మరియు పట్టికలను ఫార్మాటింగ్ చేయడానికి గైడ్- లక్షణాలు మరియు ఉదాహరణలు

జాబితాలు మరియు పట్టికలను ఫార్మాటింగ్ చేయడం అనేది మీ వెబ్‌సైట్‌లో సమాచారాన్ని ప్రదర్శించడంలో ముఖ్యమైన భాగం. మీ ఇష్టానుసారం జాబితాలు మరియు పట్టికలను సృష్టించడానికి మరియు అనుకూలీకరించడానికి CSS లక్షణాలు మరియు తరగతులను అందిస్తుంది. CSSలో జాబితాలు మరియు పట్టికలను ఎలా ఫార్మాట్ చేయాలనే దానిపై వివరణాత్మక గైడ్ ఇక్కడ ఉంది.

 

ఫార్మాటింగ్ జాబితాలు

క్రమం లేని జాబితా(ఉల్)

ప్రధాన ఆస్తి: జాబితా-శైలి-రకం.

విలువలు: none, disc, circle, square.

ఉదాహరణ:

ul {  
  list-style-type: disc;  
}  

ఆర్డర్ చేసిన జాబితా(ఓల్)

ప్రధాన ఆస్తి: జాబితా-శైలి-రకం.

విలువలు: ఏదీ లేదు(డిఫాల్ట్), దశాంశం, దిగువ-ఆల్ఫా, ఎగువ-ఆల్ఫా, దిగువ-రోమన్, ఎగువ-రోమన్.

ఉదాహరణ:

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.
  • పాడింగ్: సెల్‌లలో స్పేసింగ్ విలువ, ఉదాహరణకు: 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లో జాబితాలు మరియు పట్టికలను ఎలా ఫార్మాట్ చేయాలనే దానిపై సమగ్ర గైడ్. మీ వెబ్‌సైట్‌లో మీ డిజైన్ అవసరాలకు సరిపోయే జాబితా మరియు పట్టిక శైలులను సృష్టించడానికి మీరు విలువలు మరియు లక్షణాలను అనుకూలీకరించవచ్చు.