دليل شامل لبناء وتخصيص جداول HTML

htmlCopy code
<table>
  <caption>جدول البياناتcaption>
  <tr>
    <th>العنوان 1th>
    <th>العنوان 2th>
  tr>
  <tr>
    <td>بيانات 1td>
    <td>بيانات 2td>
  tr>
table>

2. التحكم في هوامش وحدود الجدول:

يمكنك تعديل هوامش وحدود الجدول باستخدام الخصائص التالية:

• cellpadding: تعيين هوامش داخل الخلايا.
• cellspacing: تعيين مسافات بين الخلايا.

htmlCopy code
<table cellpadding="10" cellspacing="5">
  
table>

3. تحديد الألوان والأنماط:

يمكنك تحديد ألوان خلفيات الصفوف أو الخلايا لتعزيز جاذبية الجدول.

htmlCopy code
<style>
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  td:hover {
    background-color: #aaffaa;
  }
style>

4. دمج الخلايا:

لدمج الخلايا، يُستخدم colspan للأعمدة و rowspan للصفوف. يمكنك استخدام هذه الخصائص لتوسيع خلية لتشمل عدة أعمدة أو صفوف.

htmlCopy code
<tr>
  <td colspan="2">خلية مدموجةtd>
tr>

5. الجداول المتداخلة:

يُمكن تضمين جداول داخلية داخل خلايا جدول خارجية، مما يسمح بإنشاء هياكل أكثر تعقيدًا.

htmlCopy code
<td>
  <table>
    
  table>
td>

6. التنسيق باستخدام CSS:

يمكنك تحسين تصميم الجدول باستخدام CSS، حيث يمكن تخصيص الألوان والخطوط والحواف وغيرها.

htmlCopy code
<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }
style>

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