ٹیل ونڈ میں ٹیبل کیپشن کا استعمال کیسے کریں۔

Yl Wn My Ybl Kypshn Ka Ast Mal Kys Kry



ایک ' ٹیبل کیپشن ” کا استعمال کسی خاص ٹیبل کو عنوان یا نام دینے کے لیے کیا جاتا ہے۔ یہ کیپشن متعدد ٹیبلز میں موجود ڈیٹا کی بڑی مقدار کو سنبھالتے وقت صارف کے لیے ہدف کی میز پر واپس جانا آسان بناتا ہے۔ کیپشنز مختصر عنوانات ہیں جو ظاہر کرتے ہیں کہ ٹیبل میں موجود ڈیٹا کا کیا مطلب ہے اور اس سے کیا تعلق ہے۔ صارف کی فارمیٹنگ تھیم کے مطابق کیپشن کو میز کے اوپر یا نیچے رکھا جا سکتا ہے۔

ٹیبل کیپشن کی اہمیت کیا ہے؟

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

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





Tailwind CSS میں ٹیبل کیپشن کا استعمال کیسے کریں؟

Tailwind CSS میں، ایک کیپشن ٹیبل میں شامل کیا جاتا ہے ' 'ٹیگ۔ یہ کیپشن ٹیبل میں موجود ڈیٹا کے بارے میں ایک عنوان اور مزید معلومات کی وضاحت کرتا ہے۔



مثال: ٹیبل کے اوپر اور نیچے دونوں میں ٹیبل کیپشن شامل کرنا
مندرجہ ذیل کوڈ میں، ہم ٹیبل کے اوپر اور نیچے دونوں میں 'کیپشن' کا اضافہ کریں گے۔



< ٹیبل >
< ٹیبل کلاس = 'من سے مکمل بارڈر بارڈر-گرے-300 تقسیم-y تقسیم-گرے-300' >
< تھیڈ >
< tr >
< ویں کلاس = 'py-2 px-4 bg-gray-100 بارڈر-b' >
نام
< / ویں >
< ویں کلاس = 'py-2 px-4 bg-gray-100 بارڈر-b' >
ای میل
< / ویں >
< ویں کلاس = 'py-2 px-4 bg-gray-100 بارڈر-b' >
ID
< / ویں >
< ویں کلاس = 'py-2 px-4 bg-gray-100 بارڈر-b' >
رابطہ کریں۔
< / ویں >
< / tr >
< / تھیڈ >
< tbody >
< tr >
< td کلاس = 'py-2 px-4 بارڈر-b' > جیمز < / td >
< td کلاس = 'py-2 px-4 بارڈر-b' > james@tsl.com < / td >
< td کلاس = 'py-2 px-4 بارڈر-b' > 61101-1234567-8 < / td >
< td کلاس = 'py-2 px-4 بارڈر-b' > 123-456-7890 < / td >
< / tr >
< tr >
< td کلاس = 'py-2 px-4 بارڈر-b' > مائیکل < / td >
< td کلاس = 'py-2 px-4 بارڈر-b' > michael@tsl.com < / td >
< td کلاس = 'py-2 px-4 بارڈر-b' > 61101-8765432-1 < / td >
< td کلاس = 'py-2 px-4 بارڈر-b' > 098-765-4321 < / td >
< / tr >
< tr >
< td کلاس = 'py-2 px-4 بارڈر-b' > ڈیوڈ < / td >
< td کلاس = 'py-2 px-4 بارڈر-b' > David@TSL.com < / td >
< td کلاس = 'py-2 px-4 بارڈر-b' > 54791-1234567-8 < / td >
< td کلاس = 'py-2 px-4 بارڈر-b' > 123-786-4290 < / td >
< / tr >
< tr >
< td کلاس = 'py-2 px-4 بارڈر-b' > پیٹر < / td >
< td کلاس = 'py-2 px-4 بارڈر-b' > peter@tsl.com < / td >
< td کلاس = 'py-2 px-4 بارڈر-b' > 54300-1234567-8 < / td >
< td کلاس = 'py-2 px-4 بارڈر-b' > 611-239-7890 < / td >
< / tr >
< / tbody >
< عنوان >
ملازمین کی ذاتی معلومات
< / عنوان >
< / ٹیبل >
< عنوان >
کمپنی کا نام
< / عنوان >

مندرجہ بالا کوڈ میں ان اقدامات پر عمل کریں: