الجداول في HTML

الجداول في HTML

يا هلا والله! اليوم بنتكلم عن الجداول في HTML. الجداول شي أساسي عشان تعرض بيانات منظمة في صفوف وأعمدة.

الأساسيات: <table>, <tr>, <th>, <td>

عشان تسوي جدول، تحتاج العناصر هذي:

  • <table>: هذا الحاوية الأساسية للجدول كله.
  • <tr> (Table Row): يمثل صف واحد في الجدول. كل صف لازم يكون داخل <table>.
  • <th> (Table Header): يمثل رأس العمود (عنوان). عادةً يكون بخط عريض ومُتوسّط. ينحط داخل <tr>.
  • <td> (Table Data): يمثل خلية بيانات عادية. ينحط داخل <tr>.

مثال على جدول بسيط

شوف كيف نسوي جدول بسيط فيه أسماء وأعمار:

<table>  <tr>    <th>الاسم</th>    <th>العمر</th>  </tr>  <tr>    <td>أحمد</td>    <td>30</td>  </tr>  <tr>    <td>سارة</td>    <td>25</td>  </tr></table>

إضافة عنوان للجدول: <caption>

تبغى تعطي جدولك عنوان؟ استخدم عنصر <caption> وحطه أول شي بعد <table> مباشرةً:

<table>  <caption>قائمة الطلاب</caption>  <tr>    <th>الاسم</th>    <th>العمر</th>  </tr>  <tr>    <td>أحمد</td>    <td>30</td>  </tr></table>

تجميع المحتوى: <thead>, <tbody>, <tfoot>

عشان تخلي جدولك منظم أكثر، تقدر تقسمه لأجزاء:

  • <thead> (Table Head): لرؤوس الأعمدة.
  • <tbody> (Table Body): لمحتوى الجدول الأساسي.
  • <tfoot> (Table Foot): للتذييل، زي المجاميع أو ملاحظات.

هذي العناصر ما تغير شكل الجدول كثير، بس تفيد في سهولة القراءة للدولبر وتفيد لما تستخدم CSS أو JavaScript.

<table>  <caption>تقرير مبيعات الربع الأول</caption>  <thead>    <tr>      <th>المنتج</th>      <th>المبيعات (ريال)</th>    </tr>  </thead>  <tbody>    <tr>      <td>لابتوب</td>      <td>50000</td>    </tr>    <tr>      <td>جوال</td>      <td>30000</td>    </tr>  </tbody>  <tfoot>    <tr>      <td>الإجمالي</td>      <td>80000</td>    </tr>  </tfoot></table>

دمج الخلايا: rowspan و colspan

أحياناً تحتاج خلية تمتد على أكثر من صف أو عمود. هنا يجي دور rowspan و colspan:

  • colspan: لدمج خلايا في نفس الصف (يمتد على عدة أعمدة).
  • rowspan: لدمج خلايا في نفس العمود (يمتد على عدة صفوف).

مثال على colspan و rowspan

<table>  <caption>جدول دمج الخلايا</caption>  <thead>    <tr>      <th>الاسم</th>      <th colspan="2">معلومات الاتصال</th>    </tr>  </thead>  <tbody>    <tr>      <td>علي</td>      <td>ايميل: ali@example.com</td>      <td>جوال: 0501234567</td>    </tr>    <tr>      <td rowspan="2">فاطمة</td>      <td colspan="2">ايميل: fatima@example.com</td>    </tr>    <tr>      <td colspan="2">الملاحظة: تحتاج تحديث بيانات</td>    </tr>  </tbody></table>

ملاحظة سريعة: الجداول تستخدم لعرض البيانات الجدولية، مو للتنسيق! يعني لا تستخدم الجداول عشان ترتب عناصر الصفحة. استخدم CSS لترتيب العناصر.