تنسيق الجداول

الانماط الافتراضية للجداول في المتصفح

تاتي جداول HTML مع الحد الادنى من التنسيق الافتراضي من المتصفح. بشكل افتراضي، لا تحتوي الجداول على حدود مرئية للخلايا، ولا الوان خلفية، ومسافات غير متسقة. العرض الافتراضي يفصل كل خلية بفجوة صغيرة، ويحاذي النص الى اليسار في عناصر <td> ويتوسطه في عناصر <th>، وتعرض خلايا الراس بخط عريض. هذا العرض البسيط وظيفي لكنه غير جذاب بصريا لاي تطبيق ويب حديث. فهم هذه الاعدادات الافتراضية هو الخطوة الاولى نحو بناء جداول بيانات مصقولة واحترافية.

عندما تنشئ جدولا في HTML بدون اي CSS، يطبق المتصفح ورقة الانماط الخاصة به. تختلف ورقة الانماط هذه قليلا بين المتصفحات، لكن السلوك العام متسق: الخلايا متباعدة، والحدود غير مرئية، والحشو ضئيل. مهمتك كمطور هي تجاوز هذه الاعدادات الافتراضية لانشاء جداول قابلة للقراءة وجذابة ومتجاوبة.

<table>
  <thead>
    <tr>
      <th>الاسم</th>
      <th>الدور</th>
      <th>القسم</th>
      <th>الراتب</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>اليس جونسون</td>
      <td>مطور</td>
      <td>الهندسة</td>
      <td>$95,000</td>
    </tr>
    <tr>
      <td>بوب سميث</td>
      <td>مصمم</td>
      <td>الابداع</td>
      <td>$82,000</td>
    </tr>
  </tbody>
</table>

بدون CSS، يعرض هذا الجدول كنص عادي مع خلايا مفصولة بفجوات غير مرئية. دعنا الان نستكشف كيفية تحويل هذا الى جدول بيانات منسق جيدا خطوة بخطوة.

border-collapse مقابل border-separate

خاصية border-collapse هي واحدة من اهم خصائص CSS لتنسيق الجداول. تتحكم في ما اذا كانت خلايا الجدول المتجاورة تشترك في الحدود او لديها حدود فردية خاصة بها مع فجوات بينها. يتم تطبيق هذه الخاصية على عنصر <table> نفسه وتؤثر على جميع الخلايا داخله.

هناك قيمتان ممكنتان:

• border-separate (الافتراضي) -- كل خلية لها حدودها الفردية الخاصة. الخلايا المتجاورة لها فجوة مرئية بين حدودها. هذا هو السلوك الافتراضي للمتصفح.
• border-collapse -- تندمج حدود الخلايا المتجاورة في حد واحد. لا توجد فجوة بين الخلايا. ينتج عن هذا المظهر النظيف الشبيه بالشبكة الذي يتوقعه معظم المطورين من الجداول.

table {
    border-collapse: separate;
    border: 2px solid #333;
}

th, td {
    border: 1px solid #999;
    padding: 10px 15px;
}

/* النتيجة: كل خلية لها حدودها الخاصة مع فجوات مرئية
   بين الخلايا المتجاورة. تظهر الحدود مزدوجة حيث
   تلتقي الخلايا ببعضها. */

table {
    border-collapse: collapse;
    border: 2px solid #333;
}

th, td {
    border: 1px solid #999;
    padding: 10px 15px;
}

/* النتيجة: تندمج الحدود المتجاورة في خط واحد.
   لا توجد فجوات بين الخلايا. مظهر شبكي نظيف.
   هذا هو الاعداد الاكثر شيوعا لجداول البيانات. */

عندما تنهار الحدود، يمكن ان تنشا تعارضات عندما يكون للخلايا المتجاورة انماط حدود مختلفة. يحل CSS هذه التعارضات باستخدام مجموعة من القواعد: الحدود الاعرض تفوز على الحدود الاضيق، والحدود الصلبة تفوز على المتقطعة او المنقطة، وحدود الخلايا تفوز على حدود الصفوف التي بدورها تفوز على حدود الجدول. فهم هذا التسلسل يساعدك على التنبؤ بكيفية عرض جدولك.

خاصية border-spacing

تتحكم خاصية border-spacing في الفجوة بين حدود الخلايا المتجاورة عندما يكون border-collapse مضبوطا على separate. تقبل قيمة واحدة او قيمتين للطول -- قيمة واحدة تحدد مسافات افقية وعمودية متساوية، بينما قيمتان تحدد المسافات الافقية والعمودية بشكل مستقل.

/* مسافات متساوية في جميع الاتجاهات */
table {
    border-collapse: separate;
    border-spacing: 10px;
}

/* مسافات افقية وعمودية مختلفة */
table {
    border-collapse: separate;
    border-spacing: 15px 8px; /* افقي عمودي */
}

/* بدون مسافات (الخلايا تتلامس لكن الحدود لا تندمج) */
table {
    border-collapse: separate;
    border-spacing: 0;
}

/* استخدام ابداعي: صفوف جدول بنمط البطاقات */
table.card-table {
    border-collapse: separate;
    border-spacing: 0 12px; /* بدون فجوة افقية، 12 بكسل فجوة عمودية */
}

table.card-table td {
    background: #fff;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

table.card-table td:first-child {
    border-right: 1px solid #e0e0e0;
    border-radius: 0 8px 8px 0;
}

table.card-table td:last-child {
    border-left: 1px solid #e0e0e0;
    border-radius: 8px 0 0 8px;
}

تنسيق رؤوس وخلايا الجدول

رؤوس الجدول (<th>) وخلايا البيانات (<td>) هي اللبنات الاساسية لمظهر الجدول. التنسيق الفعال للجدول ينشئ تسلسلا هرميا بصريا واضحا يساعد المستخدمين على مسح البيانات وفهمها بسرعة. يجب ان تبرز الرؤوس عن خلايا البيانات من خلال اختلافات في لون الخلفية ووزن الخط ولون النص واحيانا تحويل النص.

table {
    border-collapse: collapse;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/* تنسيق الراس */
thead th {
    background-color: #1a1a2e;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.05em;
    padding: 14px 18px;
    text-align: right;
    border-bottom: 3px solid #e94560;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* تنسيق خلايا البيانات */
tbody td {
    padding: 12px 18px;
    border-bottom: 1px solid #e8e8e8;
    color: #333;
    vertical-align: middle;
}

/* تنسيق التذييل */
tfoot td {
    background-color: #f0f0f0;
    font-weight: 700;
    padding: 14px 18px;
    border-top: 2px solid #ccc;
}

لاحظ استخدام position: sticky على الراس. هذا يبقي الراس مرئيا عندما يمرر المستخدمون عبر الجداول الطويلة، وهو امر ضروري لسهولة الاستخدام. top: 0 يضمن ان الراس يلتصق باعلى حاوية التمرير، وz-index: 10 يضمن بقاءه فوق محتوى جسم الجدول.

/* الاعمدة الرقمية يجب محاذاتها لليسار في RTL */
td.numeric,
th.numeric {
    text-align: left;
    font-variant-numeric: tabular-nums;
}

/* اعمدة الحالة مع شارات ملونة */
td.status .badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

td.status .badge--active {
    background-color: #d4edda;
    color: #155724;
}

td.status .badge--inactive {
    background-color: #f8d7da;
    color: #721c24;
}

td.status .badge--pending {
    background-color: #fff3cd;
    color: #856404;
}

صفوف مخططة باستخدام nth-child

التخطيط الحمار الوحشي -- تبديل الوان خلفية الصفوف -- هو احد اكثر الطرق فعالية لتحسين قابلية قراءة الجدول. عندما يمسح المستخدمون جدولا عريضا افقيا، تساعد الصفوف المخططة اعينهم على البقاء في الصف الصحيح. يجعل CSS هذا بسيطا جدا مع محدد الفئة الزائفة :nth-child.

/* تلوين الصفوف الزوجية */
tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

/* او تلوين الصفوف الفردية بدلا من ذلك */
tbody tr:nth-child(odd) {
    background-color: #f8f9fa;
}

/* تخطيط ملون للجداول ذات السمات */
tbody tr:nth-child(even) {
    background-color: rgba(0, 123, 255, 0.05);
}

/* تخطيط بتباين اقوى */
tbody tr:nth-child(even) {
    background-color: #e9ecef;
}

tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

الاختيار بين تلوين الصفوف الزوجية او الفردية يعتمد على تصميمك. اذا كان لجسم الجدول خلفية بيضاء، فان تلوين الصفوف الزوجية بلون رمادي فاتح ينشئ نمطا متبادلا طبيعيا يبدا بالابيض للصف الاول.

/* تلوين كل صف ثالث */
tbody tr:nth-child(3n) {
    background-color: #f0f7ff;
}

/* تخطيط مجموعات: 2 ابيض، 2 ملون */
tbody tr:nth-child(4n+1),
tbody tr:nth-child(4n+2) {
    background-color: #ffffff;
}

tbody tr:nth-child(4n+3),
tbody tr:nth-child(4n) {
    background-color: #f5f5f5;
}

/* تخطيط الاعمدة (اقل شيوعا لكنه مفيد) */
td:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

/* تمييز عمود محدد */
td:nth-child(3),
th:nth-child(3) {
    background-color: #fff8e1;
    font-weight: 600;
}

تاثيرات التحويم على صفوف الجدول

توفر تاثيرات التحويم على الصفوف ملاحظات بصرية فورية اثناء تحرك المستخدمين بمؤشرهم فوق صفوف البيانات. هذا مهم بشكل خاص في الجداول العريضة حيث قد يكون من الصعب تتبع الصف الذي تقراه. تاثير التحويم المنفذ جيدا يبرز الصف بالكامل، مما يجعله يبرز بوضوح عن الصفوف المحيطة.

/* تحويم صف اساسي */
tbody tr:hover {
    background-color: #e8f4fd;
}

/* تحويم بانتقال سلس */
tbody tr {
    transition: background-color 0.15s ease;
}

tbody tr:hover {
    background-color: #e3f2fd;
}

/* تحويم مع حد جانبي مميز */
tbody tr {
    transition: all 0.15s ease;
    border-right: 3px solid transparent;
}

tbody tr:hover {
    background-color: #f5f5f5;
    border-right: 3px solid #2196f3;
}

/* تحويم على مستوى الخلية لاستكشاف البيانات */
tbody td {
    transition: background-color 0.1s ease;
}

tbody td:hover {
    background-color: #bbdefb;
    cursor: pointer;
}

/* تنسيق صف قابل للنقر */
tbody tr.clickable {
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

tbody tr.clickable:hover {
    background-color: #e8f5e9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* المفتاح: التحويم يجب ان يتجاوز الوان التخطيط */
tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

/* التحويم يتجاوز كلا لوني التخطيط */
tbody tr:hover {
    background-color: #d4e6f1 !important;
}

/* نهج افضل بدون !important -- استخدم خصوصية اعلى */
tbody tr:nth-child(even):hover,
tbody tr:nth-child(odd):hover {
    background-color: #d4e6f1;
}

تنسيق التسمية التوضيحية وخاصية caption-side

يوفر عنصر <caption> عنوانا او وصفا للجدول. انه ميزة وصول مهمة لان قارئات الشاشة تعلن عن التسمية التوضيحية عندما تواجه جدولا، مما يمنح المستخدمين سياقا حول البيانات قبل التنقل عبر الخلايا. تتحكم خاصية caption-side في ما اذا كانت التسمية التوضيحية تظهر اعلى او اسفل الجدول.

<table>
  <caption>تقرير المبيعات الفصلي -- الربع الرابع 2024</caption>
  <thead>
    <tr>
      <th>المنطقة</th>
      <th>الايرادات</th>
      <th>النمو</th>
    </tr>
  </thead>
  <!-- ... -->
</table>

/* التسمية التوضيحية اعلى الجدول (الافتراضي) */
caption {
    caption-side: top;
    text-align: right;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    padding: 12px 0;
    margin-bottom: 8px;
}

/* التسمية التوضيحية اسفل الجدول */
caption {
    caption-side: bottom;
    text-align: left;
    font-size: 13px;
    font-style: italic;
    color: #777;
    padding: 10px 0;
}

/* تسمية توضيحية منسقة مع زخرفة */
caption {
    caption-side: top;
    text-align: right;
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    padding: 16px 0;
    border-bottom: 3px solid #3498db;
    margin-bottom: 0;
}

تنسيق مجموعة الاعمدة باستخدام colgroup وcol

تسمح لك عناصر <colgroup> و<col> بتطبيق الانماط على اعمدة كاملة بدون اضافة فئات لكل خلية. هذه ميزة HTML قوية يمكن لـ CSS الاستفادة منها لتنسيق فعال على مستوى العمود. ومع ذلك، فان مجموعة محدودة فقط من خصائص CSS تعمل على عناصر <col>: background وborder وwidth وvisibility.

<table>
  <colgroup>
    <col class="col-name" style="width: 30%;">
    <col class="col-role" style="width: 25%;">
    <col class="col-dept" style="width: 25%;">
    <col class="col-salary" style="width: 20%;">
  </colgroup>
  <thead>
    <tr>
      <th>الاسم</th>
      <th>الدور</th>
      <th>القسم</th>
      <th>الراتب</th>
    </tr>
  </thead>
  <tbody>
    <!-- الصفوف هنا -->
  </tbody>
</table>

/* تمييز عمود */
col.col-salary {
    background-color: #fffde7;
}

/* تعيين عرض الاعمدة */
col.col-name { width: 200px; }
col.col-role { width: 150px; }
col.col-dept { width: 150px; }
col.col-salary { width: 120px; }

/* استخدام span لتجميع الاعمدة */
/* في HTML:
<colgroup>
  <col span="2" style="background-color: #f0f8ff;">
  <col span="2" style="background-color: #fff8f0;">
</colgroup>
*/

table-layout: fixed مقابل auto

تتحكم خاصية table-layout في الخوارزمية التي يستخدمها المتصفح لحساب عرض الاعمدة. لها تاثير كبير على كل من اداء العرض والتخطيط المرئي، خاصة للجداول الكبيرة التي تحتوي على صفوف كثيرة من البيانات.

• table-layout: auto (الافتراضي) -- يفحص المتصفح محتوى كل خلية في كل صف لتحديد عرض الاعمدة الامثل. ينتج عن هذا التخطيط الافضل ملاءمة لكنه ابطا لان المتصفح يجب ان يحمل ويحلل الجدول بالكامل قبل ان يتمكن من عرض اي شيء.
• table-layout: fixed -- يحدد المتصفح عرض الاعمدة بناء على الصف الاول فقط من الخلايا (او قيم العرض الصريحة على عناصر <col> او <th>). المحتوى في الصفوف اللاحقة لا يؤثر على عرض الاعمدة. هذا اسرع لان المتصفح يمكنه بدء العرض بمجرد استلام الصف الاول.

/* تخطيط تلقائي (افتراضي) -- المتصفح يحسب العرض من المحتوى */
table.auto-table {
    table-layout: auto;
    width: 100%;
}

/* تخطيط ثابت -- العرض يحدد بالصف الاول او عناصر col */
table.fixed-table {
    table-layout: fixed;
    width: 100%;
}

/* مع التخطيط الثابت، حدد عرض الاعمدة صراحة */
table.fixed-table th:nth-child(1) { width: 30%; }
table.fixed-table th:nth-child(2) { width: 25%; }
table.fixed-table th:nth-child(3) { width: 25%; }
table.fixed-table th:nth-child(4) { width: 20%; }

/* التعامل مع الفائض في خلايا التخطيط الثابت */
table.fixed-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

مع table-layout: fixed، المحتوى الاعرض من عرض العمود المخصص سيتجاوز الخلية. لهذا السبب من المهم دمجه مع overflow: hidden وtext-overflow: ellipsis لاقتطاع المحتوى الطويل بشكل انيق. يمكنك ايضا استخدام word-wrap: break-word اذا كنت تريد ان يلتف النص الطويل داخل الخلية بدلا من اقتطاعه.

table.fixed-wrap {
    table-layout: fixed;
    width: 100%;
}

table.fixed-wrap td {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* بديل: اقتطاع بعلامة حذف */
table.fixed-truncate td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0; /* يفرض علامة الحذف في التخطيط الثابت */
}

المحاذاة العمودية في خلايا الجدول

تعمل خاصية vertical-align في خلايا الجدول بشكل مختلف عما تفعله في العناصر السطرية. في سياق خلية الجدول، تتحكم في الموضع العمودي لمحتوى الخلية داخل صندوق الخلية. القيم المتاحة هي top وmiddle وbottom وbaseline.

/* الافتراضي: محاذاة وسطية */
td {
    vertical-align: middle;
}

/* محاذاة علوية -- مفيدة للخلايا ذات ارتفاعات محتوى متفاوتة */
td {
    vertical-align: top;
}

/* محاذاة سفلية */
td {
    vertical-align: bottom;
}

/* محاذاة خط الاساس -- يحاذي خطوط اساس النص عبر الخلايا */
td {
    vertical-align: baseline;
}

/* مثال عملي: محتوى متعدد الارتفاعات */
table.mixed-content td {
    vertical-align: top;
    padding: 12px;
}

table.mixed-content td.avatar {
    width: 60px;
    vertical-align: middle;
}

table.mixed-content td.actions {
    vertical-align: middle;
    text-align: left;
}

المحاذاة الافتراضية vertical-align: middle تعمل بشكل جيد للجداول البسيطة حيث تحتوي جميع الخلايا على ارتفاع محتوى مماثل. انتقل الى vertical-align: top عندما تحتوي الخلايا على نص متعدد الاسطر او كميات متفاوتة من المحتوى، مثل عمود وصف المنتج بجانب عمود حالة قصير. هذا يمنع مظهر النص المتوسط الغريب في الخلايا القصيرة عندما تحتوي الخلايا المجاورة على محتوى اطول بكثير.

خاصية empty-cells

تتحكم خاصية empty-cells في ما اذا كانت الحدود والخلفيات ترسم حول خلايا الجدول الفارغة (الخلايا التي لا تحتوي على اي محتوى على الاطلاق). تنطبق هذه الخاصية فقط عندما يكون border-collapse مضبوطا على separate.

/* اظهار الحدود والخلفية على الخلايا الفارغة (الافتراضي) */
table {
    border-collapse: separate;
    empty-cells: show;
}

/* اخفاء الحدود والخلفية على الخلايا الفارغة */
table {
    border-collapse: separate;
    empty-cells: hide;
}

/* مثال عملي */
table.schedule {
    border-collapse: separate;
    border-spacing: 4px;
    empty-cells: hide;
}

table.schedule td {
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #f9f9f9;
}

/* ستظهر الخلايا الفارغة كفجوات في الشبكة،
   وهذا مفيد لجداول الجدول الزمني/التقويم */

الجداول المتجاوبة

الجداول بطبيعتها صلبة -- لها اعمدة ثابتة يجب ان تتناسب جميعها مع عرض نافذة العرض. على الشاشات الصغيرة، تتجاوز الجداول العريضة حاوياتها وتكسر تخطيط الصفحة. هناك عدة استراتيجيات لجعل الجداول متجاوبة، كل منها مع مقايضاتها الخاصة.

الاستراتيجية 1: التمرير الافقي

النهج الابسط والاكثر شيوعا هو تغليف الجدول في حاوية مع تمرير افقي. هذا يحافظ على تخطيط الجدول تماما كما صمم ويسمح ببساطة للمستخدمين بالتمرير جانبيا لرؤية جميع الاعمدة.

<div class="table-responsive">
  <table>
    <!-- محتوى الجدول -->
  </table>
</div>

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* تمرير سلس على iOS */
}

/* اختياري: مؤشرات ظل التمرير */
.table-responsive {
    background:
        linear-gradient(to right, white 30%, transparent),
        linear-gradient(to left, white 30%, transparent),
        linear-gradient(to right, rgba(0,0,0,0.1), transparent 15px),
        linear-gradient(to left, rgba(0,0,0,0.1), transparent 15px);
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 15px 100%, 15px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* تاكد من ان الجدول لا يتقلص اقل من عرض محتواه */
.table-responsive table {
    min-width: 600px;
    width: 100%;
}

الاستراتيجية 2: تخطيط مكدس على الجوال

للجداول ذات الاعمدة الاقل، يمكنك تحويل الجدول الى تخطيط بطاقات مكدسة على الشاشات الصغيرة. يصبح كل صف بطاقة، وتعرض كل خلية كزوج تسمية-قيمة. يتطلب هذا استخدام CSS لتجاوز خصائص العرض لعناصر الجدول.

@media screen and (max-width: 768px) {
    table.stackable thead {
        display: none; /* اخفاء صف الراس */
    }

    table.stackable tbody tr {
        display: block;
        margin-bottom: 16px;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 8px 0;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    table.stackable tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 16px;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        text-align: left;
    }

    table.stackable tbody td:last-child {
        border-bottom: none;
    }

    /* عرض التسميات باستخدام سمات البيانات */
    table.stackable tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #555;
        text-align: right;
        flex-shrink: 0;
        margin-left: 16px;
    }
}

<table class="stackable">
  <thead>
    <tr>
      <th>الاسم</th>
      <th>الدور</th>
      <th>القسم</th>
      <th>الراتب</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="الاسم">اليس جونسون</td>
      <td data-label="الدور">مطور</td>
      <td data-label="القسم">الهندسة</td>
      <td data-label="الراتب">$95,000</td>
    </tr>
  </tbody>
</table>

الاستراتيجية 3: اعمدة الاولوية

للجداول ذات الاعمدة الكثيرة، يمكنك اخفاء الاعمدة الاقل اهمية على الشاشات الاصغر والاحتفاظ فقط بالاعمدة الاساسية مرئية. هذا يحافظ على تنسيق الجدول مع تقليل العرض المطلوب.

/* وضع علامات على الاعمدة بفئات اولوية */
@media screen and (max-width: 992px) {
    .col-priority-low {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .col-priority-medium {
        display: none;
    }
}

@media screen and (max-width: 576px) {
    .col-priority-high {
        display: none;
    }
    /* تبقى الاعمدة الاساسية فقط مرئية */
}

بناء جدول بيانات كامل

الان دعنا نجمع كل ما تعلمناه في جدول بيانات منسق بالكامل واحترافي. يتضمن هذا الجدول حدودا منهارة ورؤوسا منسقة وصفوفا مخططة وتاثيرات تحويم ورؤوسا لاصقة ومحاذاة مناسبة وسلوكا متجاوبا.

<div class="data-table-wrapper">
  <table class="data-table">
    <caption>دليل الموظفين -- قسم الهندسة</caption>
    <colgroup>
      <col style="width: 5%;">
      <col style="width: 22%;">
      <col style="width: 18%;">
      <col style="width: 20%;">
      <col style="width: 12%;">
      <col style="width: 12%;">
      <col style="width: 11%;">
    </colgroup>
    <thead>
      <tr>
        <th>#</th>
        <th>الموظف</th>
        <th>المنصب</th>
        <th>البريد الالكتروني</th>
        <th class="text-left">الراتب</th>
        <th class="text-center">الحالة</th>
        <th class="text-center">الاجراءات</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>اليس جونسون</td>
        <td>مطور اول</td>
        <td>alice@company.com</td>
        <td class="text-left">$120,000</td>
        <td class="text-center">
          <span class="badge badge--active">نشط</span>
        </td>
        <td class="text-center">
          <button class="btn-icon">تعديل</button>
        </td>
      </tr>
      <!-- المزيد من الصفوف... -->
    </tbody>
    <tfoot>
      <tr>
        <td colspan="4">اجمالي الموظفين: 12</td>
        <td class="text-left">$1,140,000</td>
        <td colspan="2"></td>
      </tr>
    </tfoot>
  </table>
</div>

/* غلاف الجدول للتمرير المتجاوب */
.data-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* انماط الجدول الاساسية */
.data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    background: #fff;
}

/* التسمية التوضيحية */
.data-table caption {
    caption-side: top;
    text-align: right;
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 2px solid #3498db;
}

/* الراس */
.data-table thead th {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 14px 16px;
    text-align: right;
    border: none;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* خلايا الجسم */
.data-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    color: #444;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* تخطيط حمار وحشي */
.data-table tbody tr:nth-child(even) {
    background-color: #fafbfc;
}

/* تاثير التحويم */
.data-table tbody tr {
    transition: background-color 0.15s ease;
}

.data-table tbody tr:nth-child(even):hover,
.data-table tbody tr:nth-child(odd):hover {
    background-color: #e8f4fd;
}

/* التذييل */
.data-table tfoot td {
    padding: 14px 16px;
    font-weight: 700;
    color: #2c3e50;
    background: #f1f3f5;
    border-top: 2px solid #dee2e6;
}

/* ادوات المحاذاة */
.data-table .text-left { text-align: left; }
.data-table .text-center { text-align: center; }

/* الخلايا الرقمية */
.data-table td.text-left {
    font-variant-numeric: tabular-nums;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

/* شارات الحالة */
.data-table .badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.data-table .badge--active {
    background: #d4edda;
    color: #155724;
}

.data-table .badge--inactive {
    background: #f8d7da;
    color: #721c24;
}

/* ازرار الاجراءات */
.data-table .btn-icon {
    padding: 4px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #555;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.data-table .btn-icon:hover {
    background: #3498db;
    color: #fff;
    border-color: #3498db;
}

/* متجاوب: تمرير على الشاشات الصغيرة */
@media screen and (max-width: 768px) {
    .data-table {
        min-width: 700px;
    }
}

مؤشرات الترتيب باستخدام CSS

تتضمن العديد من جداول البيانات اعمدة قابلة للترتيب. بينما يتطلب منطق الترتيب الفعلي JavaScript، يمكنك انشاء اسهم مؤشر الترتيب بالكامل باستخدام CSS. يعطي هذا المستخدمين اشارة بصرية بان الاعمدة قابلة للترتيب ويظهر اتجاه الترتيب الحالي.

/* راس عمود قابل للترتيب */
th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-left: 24px;
}

th.sortable::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid rgba(255, 255, 255, 0.3);
    margin-top: -4px;
}

th.sortable::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid rgba(255, 255, 255, 0.3);
    margin-top: 4px;
}

/* ترتيب تصاعدي نشط */
th.sort-asc::after {
    border-bottom-color: #fff;
}

/* ترتيب تنازلي نشط */
th.sort-desc::before {
    border-top-color: #fff;
}

th.sortable:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

تنسيق حدود الجدول بطرق ابداعية

بينما الحدود الصلبة البسيطة هي الخيار الاكثر شيوعا، يسمح لك CSS بانشاء العديد من انماط الحدود المثيرة للاهتمام للجداول. يمكنك استخدام خطوط افقية فقط لمظهر نظيف وحديث، او اضافة حدود مميزة لتسليط الضوء على اقسام محددة.

table.clean {
    border-collapse: collapse;
    width: 100%;
}

table.clean th,
table.clean td {
    border: none;
    border-bottom: 1px solid #e0e0e0;
    padding: 14px 16px;
}

table.clean thead th {
    border-bottom: 2px solid #333;
    font-weight: 700;
    color: #222;
}

table.clean tbody tr:last-child td {
    border-bottom: 2px solid #333;
}

table.borderless {
    border-collapse: collapse;
    width: 100%;
}

table.borderless th,
table.borderless td {
    border: none;
    padding: 12px 16px;
}

table.borderless tbody tr {
    border-bottom: 1px solid transparent;
    background-image: linear-gradient(#e8e8e8, #e8e8e8);
    background-size: calc(100% - 32px) 1px;
    background-repeat: no-repeat;
    background-position: center bottom;
}