سی ایس ایس جدول

استفاده از CSS می‌تواند ظاهر HTML جدول را به طور قابل توجهی بهبود بخشد:

کمپانی تماس آدرس شهر
آلوبا ما یون شماره ۶۹۹، جاده ونگشانگ، ناحیه بینجیانگ هانجیو
آپل تیم کوک ۱ اینفینٹ لُپ کوپرتینو، کالیفرنیا ۹۵۰۱۴ کوپرتینو
بایدو لی یان هونگ لیکسینگ جیاوتی دا شا، شماره ۵۸، بیسیهوانگشیولو بِیجنگ
کانن تسونئی اچیدا یک کینن پلازا لیک سکسیس، نیویورک ۱۱۰۴۲ نیویورک
گُوگل لری پیج ۱۶۰۰ امفی تئاتر پارکوی کی، کالیفرنیا ۹۴۰۴۳ ماونٹین ویو
هواوی رن زنگفی پایتیان بی‌ای‌سی بی‌ای، ناحیه لونگگانگ Shenzhen
مایکروسافت بیل گیتس ۱۵۷۰۰۰ نئی ایست ۳۹ام سٹریت ردموند، واشنگتن ۹۸۰۵۲ ردموند
نُوکیا اولی-پیکا کالاسو پوکس ۲۲۶، FIN-۰۰۰۰۴۵ گروپ نُوکیا هلسینکی
سونی کازوو هیرائی Park Ridge, NJ 07656 Park Ridge
Tencent Ma Huateng Tencent Building, High-tech Park, Nanshan District Shenzhen

جربها بنفسك

لبه‌های جدول

برای تنظیم لبه‌های جدول در CSS، از border ویژگی‌ها.

مثال زیر نشان می‌دهد که چگونه لبه‌های <table>، <th> و <td> به رنگ سیاه تنظیم می‌شوند:

اسم الأول اسم العائلة
Bill Gates
Steve Jobs

مثال

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

جربها بنفسك

توجه داشته باشید:در مثال بالا، جدول دارای لبه‌های دوطرفه است. این به دلیل اینکه table و <th> و <td> دارای لبه‌های جداگانه هستند.

جدول تمام‌صفحه

در برخی موارد، جدول بالا ممکن است کوچک به نظر برسد. اگر جدولی نیاز دارید که کل صفحه نمایش را پوشش دهد (بازدهی کامل)، باید به عناصر <table> width: 100% اضافه کنید:

مثال

table {
  width: 100%;
}

جربها بنفسك

لبه‌های دوطرفه

لطفاً توجه کنید که جدول بالا دارای لبه‌های دوطرفه است. این به دلیل اینکه جدول و عناصر th و td دارای لبه‌های جداگانه هستند.

برای حذف لبه‌های دوطرفه، به مثال زیر نگاه کنید.

یکپارچگی لبه‌های جدول

border-collapse ویژگی تنظیم می‌کند که آیا لبه‌های جدول به یک لبه تبدیل شوند:

اسم الأول اسم العائلة
Bill Gates
Steve Jobs

مثال

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

جربها بنفسك

اگر تنها می‌خواهید که اطراف جدول دارای لبه باشد، تنها باید به <table> مشخص کنید border padding

اسم الأول اسم العائلة
Bill Gates
Steve Jobs

مثال

table {
  border: 1px solid black;
}

جربها بنفسك

عرض و ارتفاع جدول

عرض و ارتفاع جدول توسط width و height تعریف ویژگی‌ها.

مثال زیر نشان می‌دهد که چگونه عرض جدول را به 100% تنظیم می‌کند و ارتفاع عناصر <th> را به 50px تنظیم می‌کند:

اسم الأول اسم العائلة توفير
Bill Gates $100
Steve Jobs $150
Elon Musk $300

مثال

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

جربها بنفسك

برای ایجاد جدولی که تنها نیمی از صفحه را اشغال کند، از width: 50% استفاده کنید:

مثال

table {
  width: 50%;
}
th {
  height: 70px;
}

جربها بنفسك

هماهنگی افقی

text-align ویژگی تنظیم می‌کند که چگونه هماهنگی افقی محتوای <th> یا <td> تنظیم می‌شود (چپ، راست یا وسط).

به صورت پیش‌فرض، محتوای عناصر <th> وسط قرار دارد، در حالی که محتوای عناصر <td> چپ‌چین است.

برای اینکه محتوای عناصر <td> نیز وسط قرار گیرد، از text-align: center استفاده کنید:

اسم الأول اسم العائلة توفير
Bill Gates $100
Steve Jobs $150
Elon Musk $300

مثال

th {
  text-align: center;
}

جربها بنفسك

مثال زیر نشان می‌دهد که چگونه چپ‌چین کردن متن عناصر <th> را تنظیم می‌کند:

اسم الأول اسم العائلة توفير
Bill Gates $100
Steve Jobs $150
Elon Musk $300

مثال

th {
  padding: 15px;
}

جربها بنفسك

هماهنگی عمودی

vertical-align ویژگی تنظیم می‌کند که چگونه هماهنگی عمودی محتوای <th> یا <td> تنظیم می‌شود (بالای، پایین یا وسط).

به صورت پیش‌فرض، هماهنگی عمودی محتوای جدول (عناصر <th> و <td>) در وسط است.

مثال می‌زند که چگونه روشنایی <td> عناصر را تنظیم می‌کند:

اسم الأول اسم العائلة توفير
Bill Gates $100
Steve Jobs $150
Elon Musk $300

مثال

td {
  height: 50px;
  vertical-align: bottom;
}

جربها بنفسك

表格内边距

تمدد داخلي لتحكم في مسافة الحدود والنص في جدول، استخدم padding

اسم الأول اسم العائلة توفير
Bill Gates $100
Steve Jobs $150
Elon Musk $300

مثال

خصائص، لإضافة خطوط الفصل الأفقية:
  خصائص:
  padding: 15px;
}

جربها بنفسك

text-align: left;

اسم الأول اسم العائلة توفير
Bill Gates $100
Steve Jobs $150
Elon Musk $300

التمدد الداخلي إضافة خطوط الفصل الأفقية إلى border-bottom

مثال

خصائص، لإضافة خطوط الفصل الأفقية:
  th, td {
}

جربها بنفسك

border-bottom: 1px solid #ddd;

جدول قابل للتمييز استخدام :hover

اسم الأول اسم العائلة توفير
Bill Gates $100
Steve Jobs $150
Elon Musk $300

مثال

tr:hover {background-color: #f5f5f5;}

جربها بنفسك

جدول شرائحي

اسم الأول اسم العائلة توفير
Bill Gates $100
Steve Jobs $150
Elon Musk $300

لتحقيق تأثير جدول شرائحي، استخدم nth-child() مصفوفة، وإضافة لون الخلفية إلى جميع الصفوف المزدوجة (أو المثلى) من الجدول: background-color:

مثال

tr:nth-child(even) {background-color: #f2f2f2;}

جربها بنفسك

لون الجدول

في المثال التالي، تم تحديد لون الخلفية والنص للعنصر <th>:

اسم الأول اسم العائلة توفير
Bill Gates $100
Steve Jobs $150
Elon Musk $300

مثال

th {
  background-color: #4CAF50;
  color: white;
}

جربها بنفسك

جدول تفاعلي

إذا كان الشاشة صغيرة جدًا بحيث لا يمكن عرض جميع المحتويات، فإن الجدول التفاعلي سيظهر سحببة التمرير الأفقية:

اسم الأول اسم العائلة Points Points Points Points Points Points Points Points Points Points
Bill Gates 50 50 50 50 50 50 50 50 50 50
Steve Jobs 94 94 94 94 94 94 94 94 94 94
Elon Musk 67 67 67 67 67 67 67 67 67 67

إضافة معرف معين حول overflow-x:auto عنصر الحاوية (مثل <div>)، لتحقيق تأثير تفاعلي:

مثال

<div style="overflow-x:auto;">
<table>
... محتوى الجدول ...
</table>
</div>

جربها بنفسك

ملاحظة:في OS X Lion (على Mac)، تكون سحببة التمرير مخفية بشكل افتراضي وتظهر فقط عند الاستخدام (حتى لو تم تعيين "overflow:scroll").

مزيد من الأمثلة

صنع جدول زخرفي
هذا المثال يوضح كيفية إنشاء جدول زخرفي.
تعيين موقع عنوان الجدول
هذا المثال يوضح كيفية وضع عنوان الجدول.

خصائص جدول CSS

خصائص وصف
border مختصر نمائندہ، تمام بوردر نمائندگان کو ایک دفعے میں ساتھ چینی کریں
border-collapse تختی کی بوردر کو پتھر سے پتھر پر چسپا کرنا یا نہ چسپا کرنا کا قوانین
border-spacing تختی میں مجاور سلولوں کے درمیان بوردر کی دوری کا قوانین
caption-side تختی کی عنوان کی نمائندگی کا قوانین
empty-cells تختی میں خالی سلولوں پر بوردر اور پس منظر کا دکھنا یا نہ دکھنا کا قوانین
table-layout تختی کیلئے لائحہ بندی الگوریتم کا استعمال کریں