البرمجة

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

اخر تحديث 09/06/2025
16 تمت قراءة 3 دقيقة

الجداول (Tables) في CSS: التصميم، التنسيق، والتحكم المتقدم

تُعد الجداول (Tables) أحد الأدوات الأساسية في تصميم واجهات الويب، حيث تلعب دوراً محورياً في عرض البيانات المنظمة بطريقة واضحة وسهلة الفهم. منذ بدايات الويب، استخدمت الجداول لعرض البيانات وحتى في تنسيق التخطيطات الكاملة للمواقع قبل ظهور نماذج تخطيط CSS الحديثة مثل Flexbox وGrid. ومع تطور CSS، أصبح من الممكن تنسيق الجداول وتحسين مظهرها بشكل كبير، بما يحقق توازناً بين البنية المنطقية للبيانات والمظهر الجمالي الاحترافي.

المفهوم الأساسي للجداول في HTML

قبل الغوص في CSS، من المهم فهم الهيكل الأساسي للجداول في HTML، حيث تُبنى الجداول باستخدام العناصر التالية:

مواضيع ذات صلة

  • : العنصر الرئيسي الذي يحتوي على محتوى الجدول.

    • : يمثل صفاً في الجدول.

    • : خلية في رأس الجدول، وتُستخدم عادة لتحديد أسماء الأعمدة.

    		• : خلية في بيانات الجدول.

    • : يتيح إضافة عنوان للجدول.

    مثال بسيط:

    html
    <table>
  <caption>جدول درجات الطلابcaption>
  <tr>
    <th>الاسمth>
    <th>الدرجةth>
  tr>
  <tr>
    <td>أحمدtd>
    <td>95td>
  tr>
  <tr>
    <td>سارةtd>
    <td>88td>
  tr>
table>

    الجداول في CSS: المفاهيم الأساسية

    عند استخدام CSS مع الجداول، يمكن التحكم في تنسيق الجدول كاملاً أو في العناصر الفرعية كالصفوف والخلايا بشكل منفصل. فيما يلي أهم الخصائص التي يمكن تطبيقها:

    خاصية border

    تستخدم لتحديد حدود الجدول والخلايا:

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

    خاصية border-collapse

    تحدد كيفية دمج حدود الخلايا:

    • collapse: تدمج الحدود المتجاورة.

    • separate: تبقي الحدود منفصلة.

    css
    table {
  border-collapse: collapse;
}

    خاصية padding و text-align

    لتحسين تنسيق محتوى الخلايا:

    css
    th, td {
  padding: 10px;
  text-align: center;
}

    خاصية width و height

    يمكن التحكم بأبعاد الجدول والخلايا:

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

    خاصية background-color

    تُستخدم لتحديد ألوان خلفية الجدول أو الصفوف أو الخلايا:

    css
    th {
  background-color: #f2f2f2;
}

    التصميم المتقدم للجداول باستخدام CSS

    تمييز الصفوف المتناوبة (Zebra Stripes)

    من الممارسات الشائعة في تصميم الجداول تمييز كل صف بلون مختلف لتسهيل القراءة:

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

    تفاعل المستخدم (Hover Effects)

    لإبراز الصف الذي يمر عليه المؤشر:

    css
    tr:hover {
  background-color: #e0e0e0;
}

    التحكم بالمحتوى داخل الخلية

    يمكن التحكم بتغليف النصوص:

    css
    td {
  white-space: nowrap; /* يمنع النزول للسطر التالي */
  overflow: hidden;
  text-overflow: ellipsis;
}

    محاذاة الجداول في الصفحة

    css
    table {
  margin: 0 auto; /* لمحاذاة الجدول في الوسط */
}

    دمج الخلايا باستخدام colspan و rowspan

    لتوسيع خلية أفقياً أو عمودياً:

    html
    <tr>
  <td colspan="2">تم دمج خليتين أفقياًtd>
tr>
<tr>
  <td rowspan="2">تم دمج خليتين عمودياًtd>
  <td>بياناتtd>
tr>
<tr>
  <td>بيانات أخرىtd>
tr>

    التحكم بتخطيط الجدول: مقارنة بين CSS التقليدي وDisplay: Table

    أحد الأساليب المتقدمة في CSS هو استخدام display: table لمحاكاة الجداول دون استخدام عناصر

    مباشرة. يسمح هذا النهج بإنشاء تخطيطات مرنة دون الإخلال ببنية HTML.

    مثال:

    html
    <div class="table">
  <div class="row">
    <div class="cell">الاسمdiv>
    <div class="cell">العمرdiv>
  div>
  <div class="row">
    <div class="cell">خالدdiv>
    <div class="cell">30div>
  div>
div>

    css
    .table {
  display: table;
  width: 100%;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  padding: 10px;
  border: 1px solid #ccc;
}

    الجداول التفاعلية (Responsive Tables)

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

    1. جعل الجدول قابلًا للتمرير

    css
    .table-wrapper {
  overflow-x: auto;
}

    html
    <div class="table-wrapper">
  <table>
    
  table>
div>

    2. استخدام جداول قابلة للتحول (Stacked Tables)

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

    3. تقليل الأعمدة

    أحيانًا يمكن إخفاء أعمدة غير ضرورية في العرض على الشاشات الصغيرة:

    css
    @media (max-width: 600px) {
  .column-hide-mobile {
    display: none;
  }
}

    مثال عملي: جدول متكامل بتصميم CSS احترافي

    html
    <div class="responsive-table">
  <table>
    <caption>بيانات الموظفينcaption>
    <thead>
      <tr>
        <th>الاسمth>
        <th>القسمth>
        <th>الوظيفةth>
        <th class="column-hide-mobile">تاريخ التوظيفth>
      tr>
    thead>
    <tbody>
      <tr>
        <td>منى العتيبيtd>
        <td>الموارد البشريةtd>
        <td>مدير قسمtd>
        <td class="column-hide-mobile">2018-05-01td>
      tr>
      <tr>
        <td>سامي الدوسريtd>
        <td>التقنيةtd>
        <td>مبرمجtd>
        <td class="column-hide-mobile">2020-11-12td>
      tr>
    tbody>
  table>
div>

    css
    .responsive-table {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 12px;
  text-align: left;
  border: 1px solid #ccc;
}
th {
  background-color: #f5f5f5;
}
tr:nth-child(even) {
  background-color: #f9f9f9;
}
@media (max-width: 600px) {
  .column-hide-mobile {
    display: none;
  }
}

    جدول يلخص خصائص CSS الأساسية للجداول

    الخاصية الوظيفة القيم الشائعة
    border يحدد الحدود حول الجدول أو الخلايا 1px solid black
    border-collapse دمج أو فصل الحدود بين الخلايا collapse, separate
    padding المسافة داخل الخلية 10px, 5px 10px, إلخ
    text-align محاذاة النص داخل الخلية left, center, right
    background-color تغيير لون الخلفية #f9f9f9, rgba(), transparent
    width, height التحكم في أبعاد الجدول والخلايا 100%, auto, px, %
    nth-child() تحديد تنسيقات خاصة للصفوف الفردية أو الزوجية even, odd, أو رقم معين
    hover تفاعل عند مرور الماوس background-color, font-weight
    display تغيير نوع العرض للهيكل الافتراضي للعنصر table, table-row, table-cell
    overflow-x تمكين التمرير الأفقي للجدول auto, scroll, hidden

    أفضل الممارسات في تصميم الجداول باستخدام CSS

    • الوضوح البصري: استخدم خطوطاً واضحة وألواناً مريحة للعين لسهولة قراءة البيانات.

    • التجاوب الكامل: تأكد أن الجدول يعمل على جميع الأجهزة باستخدام Media Queries.

    • إخفاء الأعمدة غير الضرورية في الشاشات الصغيرة لتقليل التمرير الأفقي.

    • تناسق التصميم مع هوية الموقع: استخدم نفس الألوان والخطوط المعتمدة لبقية عناصر الموقع.

    • تضمين تسميات في العناوين لتوضيح محتوى كل عمود أو صف.

    الخلاصة التقنية

    تمنح الجداول في CSS قدرة هائلة على عرض البيانات بشكل منسق ومهني، سواء من خلال استخدام خصائص تقليدية كـ border و padding أو من خلال تقنيات حديثة كـ display: table، إلى جانب استراتيجيات التصميم التفاعلي. ومع تطور CSS وتعدد الأدوات المتاحة، لم تعد الجداول أداة جامدة بل أصبحت جزءاً ديناميكياً من واجهات المستخدم، يمكن التحكم فيها بدقة كبيرة دون التضحية بجماليات التصميم أو سهولة الاستخدام.

    المصادر

    اخر تحديث 09/06/2025
    16 تمت قراءة 3 دقيقة