مولّد جداول HTML

أنشئ جداول HTML بمحرر مرئي وانسخ الكود فوراً.

صفوفأعمدة صف الرأس حدود صفوف متناوبةالحشو

HTML الناتج

<table border="1" cellpadding="8" style="border-collapse: collapse; width: 100%;">
  <thead>
    <tr>
      <th style="padding: 8px; text-align: left;">Header 1</th>
      <th style="padding: 8px; text-align: left;">Header 2</th>
      <th style="padding: 8px; text-align: left;">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding: 8px;">Cell 1,1</td>
      <td style="padding: 8px;">Cell 1,2</td>
      <td style="padding: 8px;">Cell 1,3</td>
    </tr>
    <tr>
      <td style="padding: 8px;">Cell 2,1</td>
      <td style="padding: 8px;">Cell 2,2</td>
      <td style="padding: 8px;">Cell 2,3</td>
    </tr>
    <tr>
      <td style="padding: 8px;">Cell 3,1</td>
      <td style="padding: 8px;">Cell 3,2</td>
      <td style="padding: 8px;">Cell 3,3</td>
    </tr>
  </tbody>
</table>

حول هذه الأداة

يتيح لك مولّد جداول HTML ضبط عدد الصفوف والأعمدة وتحرير الخلايا مباشرة والحصول على كود HTML جاهز للجداول. يمكنك تهيئة صف الرأس والحدود والصفوف المتناوبة والحشو بصرياً.

يتبع HTML المُولَّد ترميزاً دلالياً بهيكل thead وtbody صحيح، وهو أفضل لإمكانية الوصول وقارئات الشاشة. يتحدث الكود فوراً أثناء التحرير.

كيفية الاستخدام

حدد عدد الصفوف والأعمدة.
فعّل/عطّل صف الرأس والحدود والصفوف المتناوبة باستخدام خانات الاختيار.
اضبط قيمة حشو الخلية.
انقر على أي خلية لكتابة محتواك مباشرة.
انسخ الكود تحت "HTML الناتج" واستخدمه في مشروعك.

حالات الاستخدام

رائع لجداول مقارنة البيانات وجداول الأسعار والجداول الزمنية وجداول مواصفات المنتجات وأي معلومات تُعرض بتنسيق جدولي على صفحة ويب.

الأسئلة الشائعة

هل يمكنني تنسيق الجدول بدون CSS؟ — نعم. يتضمن HTML المُولَّد خصائص border وcellpadding، لذا يُطبَّق نمط أساسي بدون CSS.
هل يمكنني إضافة colspan أو rowspan؟ — هذه الأداة تُنشئ هيكل جدول أساسي. عدّل الكود المُولَّد مباشرة لإضافة خصائص colspan/rowspan.
كيف أجعل الجدول متجاوباً؟ — اضبط الجدول داخل div بخاصية overflow-x: auto، أو استخدم media queries CSS للسماح بالتمرير الأفقي على الشاشات الصغيرة.