الجداول والقوائم

الجداول والقوائم في Tailwind CSS

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

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

التحكم في سلوك عرض الجدول باستخدام أدوات العرض التي تحدد كيف يحسب المتصفح عروض الأعمدة.

<!-- التخطيط التلقائي: عرض الأعمدة بناءً على المحتوى -->
<table class="table-auto w-full">
  <thead>
    <tr>
      <th>الاسم</th>
      <th>البريد الإلكتروني</th>
      <th>الدور</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>أحمد محمد</td>
      <td>ahmed@example.com</td>
      <td>مدير</td>
    </tr>
  </tbody>
</table>

<!-- التخطيط الثابت: عروض أعمدة متساوية، عرض أسرع -->
<table class="table-fixed w-full">
  <thead>
    <tr>
      <th class="w-1/3">الاسم</th>
      <th class="w-1/3">البريد الإلكتروني</th>
      <th class="w-1/3">الدور</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>أحمد محمد</td>
      <td>ahmed@example.com</td>
      <td>مدير</td>
    </tr>
  </tbody>
</table>

انهيار الحدود والتباعد

التحكم في كيفية عرض حدود الجدول والتباعد بين خلايا الجدول.

<!-- حدود منهارة: الحدود المجاورة تندمج في واحدة -->
<table class="border-collapse border border-gray-300 w-full">
  <thead>
    <tr>
      <th class="border border-gray-300 px-4 py-2">رأس 1</th>
      <th class="border border-gray-300 px-4 py-2">رأس 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-gray-300 px-4 py-2">خلية 1</td>
      <td class="border border-gray-300 px-4 py-2">خلية 2</td>
    </tr>
  </tbody>
</table>

<!-- حدود منفصلة: مسافة بين الخلايا -->
<table class="border-separate border-spacing-2 w-full">
  <thead>
    <tr>
      <th class="border border-gray-300 px-4 py-2 bg-gray-100">رأس 1</th>
      <th class="border border-gray-300 px-4 py-2 bg-gray-100">رأس 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-gray-300 px-4 py-2 bg-white">خلية 1</td>
      <td class="border border-gray-300 px-4 py-2 bg-white">خلية 2</td>
    </tr>
  </tbody>
</table>

<!-- تباعد متساوٍ في جميع الاتجاهات -->
<table class="border-separate border-spacing-0">بدون تباعد</table>
<table class="border-separate border-spacing-1">تباعد 0.25rem</table>
<table class="border-separate border-spacing-2">تباعد 0.5rem</table>
<table class="border-separate border-spacing-4">تباعد 1rem</table>
<table class="border-separate border-spacing-8">تباعد 2rem</table>

<!-- تباعد أفقي وعمودي مختلف -->
<table class="border-separate border-spacing-x-2 border-spacing-y-4">
  <!-- تباعد أفقي 0.5rem، عمودي 1rem -->
</table>

<!-- تباعد أفقي فقط -->
<table class="border-separate border-spacing-x-4 border-spacing-y-0">
  <!-- 1rem بين الأعمدة فقط -->
</table>

أمثلة جداول كاملة

<div class="overflow-x-auto">
  <table class="table-auto w-full border-collapse">
    <thead>
      <tr class="bg-gray-100">
        <th class="px-6 py-3 text-right text-xs font-medium
                   text-gray-700 uppercase tracking-wider">
          الاسم
        </th>
        <th class="px-6 py-3 text-right text-xs font-medium
                   text-gray-700 uppercase tracking-wider">
          البريد الإلكتروني
        </th>
        <th class="px-6 py-3 text-right text-xs font-medium
                   text-gray-700 uppercase tracking-wider">
          الدور
        </th>
        <th class="px-6 py-3 text-right text-xs font-medium
                   text-gray-700 uppercase tracking-wider">
          الحالة
        </th>
      </tr>
    </thead>
    <tbody class="bg-white divide-y divide-gray-200">
      <tr class="hover:bg-gray-50">
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="text-sm font-medium text-gray-900">أحمد محمد</div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="text-sm text-gray-500">ahmed@example.com</div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="text-sm text-gray-900">مدير</div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <span class="px-2 inline-flex text-xs leading-5 font-semibold
                       rounded-full bg-green-100 text-green-800">
            نشط
          </span>
        </td>
      </tr>
      <tr class="hover:bg-gray-50">
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="text-sm font-medium text-gray-900">سارة أحمد</div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="text-sm text-gray-500">sara@example.com</div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="text-sm text-gray-900">مستخدم</div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <span class="px-2 inline-flex text-xs leading-5 font-semibold
                       rounded-full bg-red-100 text-red-800">
            غير نشط
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<div class="bg-white rounded-lg shadow overflow-hidden">
  <table class="table-auto w-full">
    <thead class="bg-gray-800 text-white">
      <tr>
        <th class="px-6 py-4 text-right text-sm font-semibold">المنتج</th>
        <th class="px-6 py-4 text-right text-sm font-semibold">السعر</th>
        <th class="px-6 py-4 text-right text-sm font-semibold">المخزون</th>
        <th class="px-6 py-4 text-left text-sm font-semibold">الإجراءات</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b border-gray-200 hover:bg-gray-50">
        <td class="px-6 py-4">
          <div class="flex items-center">
            <img src="product.jpg" class="w-10 h-10 rounded-lg ml-3" alt="منتج">
            <span class="font-medium">اسم المنتج</span>
          </div>
        </td>
        <td class="px-6 py-4 text-gray-700">99 ريال</td>
        <td class="px-6 py-4">
          <span class="text-green-600 font-medium">متوفر</span>
        </td>
        <td class="px-6 py-4 text-left">
          <button class="text-blue-600 hover:text-blue-800 ml-3">تحرير</button>
          <button class="text-red-600 hover:text-red-800">حذف</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<table class="table-fixed border-separate border-spacing-2 w-full">
  <thead>
    <tr>
      <th class="w-1/4"></th>
      <th class="w-1/4 bg-blue-100 border-2 border-blue-300 rounded-lg px-4 py-3">
        <div class="text-lg font-bold text-blue-800">أساسي</div>
        <div class="text-2xl font-bold text-blue-900 mt-2">9 ريال/شهر</div>
      </th>
      <th class="w-1/4 bg-purple-100 border-2 border-purple-300 rounded-lg px-4 py-3">
        <div class="text-lg font-bold text-purple-800">محترف</div>
        <div class="text-2xl font-bold text-purple-900 mt-2">29 ريال/شهر</div>
      </th>
      <th class="w-1/4 bg-yellow-100 border-2 border-yellow-300 rounded-lg px-4 py-3">
        <div class="text-lg font-bold text-yellow-800">مؤسسي</div>
        <div class="text-2xl font-bold text-yellow-900 mt-2">99 ريال/شهر</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="px-4 py-3 font-medium">المستخدمون</td>
      <td class="bg-white border border-gray-200 rounded-lg px-4 py-3 text-center">5</td>
      <td class="bg-white border border-gray-200 rounded-lg px-4 py-3 text-center">25</td>
      <td class="bg-white border border-gray-200 rounded-lg px-4 py-3 text-center">غير محدود</td>
    </tr>
    <tr>
      <td class="px-4 py-3 font-medium">التخزين</td>
      <td class="bg-white border border-gray-200 rounded-lg px-4 py-3 text-center">10 جيجا</td>
      <td class="bg-white border border-gray-200 rounded-lg px-4 py-3 text-center">100 جيجا</td>
      <td class="bg-white border border-gray-200 rounded-lg px-4 py-3 text-center">1 تيرا</td>
    </tr>
  </tbody>
</table>

موضع التسمية التوضيحية

<!-- التسمية في الأعلى (افتراضي) -->
<table class="w-full caption-top">
  <caption class="text-lg font-bold text-gray-900 mb-3">
    دليل الموظفين
  </caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

<!-- التسمية في الأسفل -->
<table class="w-full caption-bottom">
  <thead>...</thead>
  <tbody>...</tbody>
  <caption class="text-sm text-gray-600 mt-3">
    آخر تحديث: يناير 2024
  </caption>
</table>

نوع نمط القائمة

التحكم في مظهر علامات القائمة (النقاط، الأرقام، إلخ) باستخدام أدوات نمط القائمة.

<!-- بدون علامات -->
<ul class="list-none">
  <li>عنصر بدون نقطة</li>
  <li>عنصر آخر</li>
</ul>

<!-- علامات قرصية (افتراضي لـ ul) -->
<ul class="list-disc pr-5">
  <li>نقطة</li>
  <li>نقطة أخرى</li>
</ul>

<!-- أرقام عشرية (افتراضي لـ ol) -->
<ol class="list-decimal pr-5">
  <li>العنصر الأول</li>
  <li>العنصر الثاني</li>
</ol>

<!-- أنماط قوائم أخرى -->
<ul class="list-circle pr-5">
  <li>علامة دائرة</li>
</ul>

<ul class="list-square pr-5">
  <li>علامة مربع</li>
</ul>

<ol class="list-lower-alpha pr-5">
  <li>أ. العنصر الأول</li>
  <li>ب. العنصر الثاني</li>
</ol>

<ol class="list-upper-alpha pr-5">
  <li>A. العنصر الأول</li>
  <li>B. العنصر الثاني</li>
</ol>

<ol class="list-lower-roman pr-5">
  <li>i. العنصر الأول</li>
  <li>ii. العنصر الثاني</li>
</ol>

<ol class="list-upper-roman pr-5">
  <li>I. العنصر الأول</li>
  <li>II. العنصر الثاني</li>
</ol>

موضع نمط القائمة

<!-- داخل: العلامة داخل صندوق المحتوى (افتراضي) -->
<ul class="list-disc list-inside bg-gray-100 p-4">
  <li>العلامة داخل صندوق المحتوى</li>
  <li>النص يلتف تحت العلامة</li>
</ul>

<!-- خارج: العلامة خارج صندوق المحتوى -->
<ul class="list-disc list-outside pr-5 bg-gray-100 p-4">
  <li>العلامة خارج صندوق المحتوى</li>
  <li>النص لا يلتف تحت العلامة</li>
</ul>

تنسيق علامات القائمة

<!-- علامات ملونة باستخدام عنصر marker الزائف -->
<ul class="list-disc pr-5 space-y-2">
  <li class="marker:text-blue-600">علامة زرقاء</li>
  <li class="marker:text-red-600">علامة حمراء</li>
  <li class="marker:text-green-600">علامة خضراء</li>
</ul>

<!-- علامات منسقة مع حجم -->
<ul class="list-disc pr-5 space-y-2">
  <li class="marker:text-sky-600 marker:text-lg">
    علامة زرقاء كبيرة
  </li>
  <li class="marker:text-purple-600 marker:font-bold">
    علامة أرجوانية عريضة
  </li>
</ul>

<!-- محتوى مخصص للعلامات -->
<ol class="list-none pr-0 space-y-2">
  <li class="flex items-start">
    <span class="flex-shrink-0 w-6 h-6 rounded-full bg-blue-600
                 text-white flex items-center justify-center text-sm ml-3">
      1
    </span>
    <span>علامة مرقمة مخصصة مع تنسيق</span>
  </li>
  <li class="flex items-start">
    <span class="flex-shrink-0 w-6 h-6 rounded-full bg-blue-600
                 text-white flex items-center justify-center text-sm ml-3">
      2
    </span>
    <span>علامة مخصصة أخرى</span>
  </li>
</ol>

أمثلة قوائم كاملة

<ul class="space-y-3">
  <li class="flex items-start">
    <svg class="w-6 h-6 text-green-500 ml-3 flex-shrink-0" fill="currentColor">
      <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
    </svg>
    <span>منتجات عالية الجودة مع ضمان مدى الحياة</span>
  </li>
  <li class="flex items-start">
    <svg class="w-6 h-6 text-green-500 ml-3 flex-shrink-0" fill="currentColor">
      <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
    </svg>
    <span>دعم عملاء على مدار 24/7</span>
  </li>
  <li class="flex items-start">
    <svg class="w-6 h-6 text-green-500 ml-3 flex-shrink-0" fill="currentColor">
      <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
    </svg>
    <span>شحن مجاني على الطلبات فوق 50 ريال</span>
  </li>
</ul>

<ol class="list-decimal pr-5 space-y-2">
  <li>
    <strong>البدء</strong>
    <ul class="list-disc pr-5 mt-2 space-y-1">
      <li>إنشاء حساب</li>
      <li>التحقق من البريد الإلكتروني</li>
      <li>إكمال الملف الشخصي</li>
    </ul>
  </li>
  <li>
    <strong>الإعداد</strong>
    <ul class="list-disc pr-5 mt-2 space-y-1">
      <li>تكوين التفضيلات</li>
      <li>ربط التكاملات</li>
      <li>دعوة أعضاء الفريق</li>
    </ul>
  </li>
  <li>
    <strong>الميزات المتقدمة</strong>
    <ul class="list-disc pr-5 mt-2 space-y-1">
      <li>سير العمل المخصص</li>
      <li>الوصول إلى API</li>
      <li>لوحة معلومات التحليلات</li>
    </ul>
  </li>
</ol>

<ul class="list-none space-y-4">
  <li class="bg-white rounded-lg shadow p-6 border-r-4 border-blue-500">
    <h3 class="text-xl font-bold text-gray-900 mb-2">الخطوة 1: التخطيط</h3>
    <p class="text-gray-600">
      حدد أهدافك وأنشئ خطة مشروع مفصلة.
    </p>
  </li>
  <li class="bg-white rounded-lg shadow p-6 border-r-4 border-green-500">
    <h3 class="text-xl font-bold text-gray-900 mb-2">الخطوة 2: البناء</h3>
    <p class="text-gray-600">
      نفذ حلك باستخدام أفضل الممارسات.
    </p>
  </li>
  <li class="bg-white rounded-lg shadow p-6 border-r-4 border-purple-500">
    <h3 class="text-xl font-bold text-gray-900 mb-2">الخطوة 3: الإطلاق</h3>
    <p class="text-gray-600">
      انشر ومراقب مشروعك في الإنتاج.
    </p>
  </li>
</ul>

الخلاصة

يوفر Tailwind أدوات شاملة للجداول والقوائم:

• تخطيط الجدول: التحكم في حساب عرض العمود (table-auto، table-fixed)
• انهيار الحدود: دمج أو فصل حدود الخلايا (border-collapse، border-separate)
• تباعد الحدود: التحكم في التباعد بين الخلايا (border-spacing-{n})
• موضع التسمية: وضع تسميات الجدول التوضيحية (caption-top، caption-bottom)
• نوع نمط القائمة: اختيار أنماط العلامات (list-disc، list-decimal، list-none)
• موضع القائمة: التحكم في وضع العلامة (list-inside، list-outside)
• تنسيق العلامات: تخصيص مظهر العلامة (marker:text-{color})

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