الجداول في CSS

استخدام CSS يمكن تحسين مظهر جداول HTML بشكل كبير:

Company Contact Address City
Alibaba Ma Yun No. 699, Wangshang Road, Binjiang District Hangzhou
APPLE Tim Cook 1 Infinite Loop Cupertino, CA 95014 Cupertino
BAIDU Li YanHong Lixiang guoji dasha,No 58, beisihuanxilu Beijing
Canon Tsuneji Uchida One Canon Plaza Lake Success, NY 11042 New York
Google Larry Page 1600 Amphitheatre Parkway Mountain View, CA 94043 Mountain View
HUAWEI Ren Zhengfei Putian Huawei Base, Longgang District Shenzhen
Microsoft Bill Gates 15700 NE 39th St Redmond, WA 98052 Redmond
Nokia Olli-Pekka Kallasvuo P.O. Box 226, FIN-00045 Nokia Group Helsinki
SONY Kazuo Hirai 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;
}

تجربة شخصية

ملاحظة:الجدول في المثال السابق يحتوي على حواف ثنائية. هذا بسبب أن الجدول و عناصر <th> و <td> لديها حواف منفردة.

جدول عرض كامل

في بعض الحالات، يبدو الجدول الأعلى صغيرًا. إذا كنت بحاجة إلى جدول يمكنه تغطية كامل الشاشة (عرض كامل)، فأضف width: 100% إلى عنصر <table>:

عنصر

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;

جدول قابلة للتمييز على <tr>. :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 ضبط خوارزمية التخطيط لجدول البيانات.