CSS میں فہرستوں اور جدولوں کی فارمیٹنگ کے لیے گائیڈ- پراپرٹیز اور مثالیں۔

فہرستوں اور جدولوں کی فارمیٹنگ آپ کی ویب سائٹ پر معلومات کی نمائش کا ایک لازمی حصہ ہے۔ CSS آپ کی پسند کے مطابق فہرستیں اور میزیں بنانے اور اپنی مرضی کے مطابق کرنے کے لیے پراپرٹیز اور کلاسز فراہم کرتا ہے۔ یہاں سی ایس ایس میں فہرستوں اور ٹیبلز کو فارمیٹ کرنے کے بارے میں ایک تفصیلی گائیڈ ہے۔

 

فارمیٹنگ کی فہرستیں

غیر ترتیب شدہ فہرست(ul)

مین پراپرٹی: فہرست طرز کی قسم۔

اقدار: none, disc, circle, square.

مثال:

ul {  
  list-style-type: disc;  
}  

ترتیب شدہ فہرست(ol)

مین پراپرٹی: فہرست طرز کی قسم۔

قدریں: کوئی نہیں(پہلے سے طے شدہ)، اعشاریہ، لوئر-الفا، اپر-الفا، لوئر-رومن، اپر-رومن۔

مثال:

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 e.

مثال:

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.

• متن سیدھ کریں: سیدھ کی اقدار، مثال کے طور پر 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;  
}  

 

یہ سی ایس ایس میں فہرستوں اور ٹیبلز کو فارمیٹ کرنے کے بارے میں ایک جامع گائیڈ ہے۔ آپ اپنی ویب سائٹ پر آپ کے ڈیزائن کی ضروریات کے مطابق فہرست اور ٹیبل اسٹائل بنانے کے لیے اقدار اور خصوصیات کو اپنی مرضی کے مطابق بنا سکتے ہیں۔