الجداول في الـ HTML
يمكنك عمل جداول من خلال الـ HTML
الجداول
يتم عمل الجداول بواسطة الوسم <table> ، و الجدول بطبيعة الحال مقسم إلى عدد من الصفوف حيث يتم إدخال الصفوف بواسطة الوسم <tr> و كل صف مقسم إلى خلايا لإدخال البيانات بواسطة الوسم <td>.
و الأحرف tr هي اختصار table row و هي تعني صف جدول ، بينما نجد الأحرف td هي اختصار table data و هي تعني بيانات الجدول
و خلايا الجدول تحتوي على بيانات الجدول و تلك البيانات قد تكون نص أو صورة أو قوائم أو فقرات أو جداول أخرى ... الخ .
<table border="0">
<tr> <td>خلية 11</td> <td>خلية 12</td> </tr> <tr> <td>خلية 21</td> <td>خلية 22</td> </tr> </table> |
و تظهر عبر المتصفح بالشكل التالي :
| خلية 11 | خلية 12 |
| خلية 21 | خلية 22 |
الجداول وسمة الحدود Border Attribute
إذا لم تقم بتعيين أو توصيف سمة الحدود border attribute فإن الجدول سوف يظهر بدون أي حدود ، أحياناً قد يكون هذا مفيد و ضروري و لكنك في أغلب الأوقات قد تحتاج أو تريد ظهور حدود الجدول.
لعرض حدود الجدول يمكنك استخدام سمة الحدود border attribute كما موضح بالمثال التالي :
<table border="1">
<tr> <td>خلية 11</td> <td>خلية 12</td> </tr> <tr> <td>خلية 21</td> <td>خلية 22</td> </tr> </table> |
و تظهر عبر المتصفح بالشكل التالي :
| خلية 11 | خلية 12 |
| خلية 21 | خلية 22 |
عناوين الجدول
يتم تحديد العناوين في الجداول من خلال الوسم <th> ، حيث أن الأحرف th هي اختصار table head . كما يتضح من المثال التالي:
<table border="1">
<tr> <th>عنوان 1</th> <th>عنوان 2</th> </tr> <tr> <td>خلية 11</td> <td>خلية 12</td> </tr> <tr> <td>خلية 21</td> <td>خلية 22</td> </tr> </table> |
و تظهر عبر المتصفح بالشكل التالي :
| عنوان 1 | عنوان 2 |
|---|---|
| خلية 11 | خلية 12 |
| خلية 21 | خلية 22 |
الخلايا الفارغة في الجداول
خلايا الجدول التي لا تتضمن أي محتوى لن يتم عرضها في أغلب المتصفحات ، كما يتضح من المثال التالي :
<table border="1">
<tr> <th>عنوان 1</th> <th>عنوان 2</th> </tr> <tr> <td>خلية 11</td> <td>خلية 12</td> </tr> <tr> <td>خلية 21</td> <td></td> </tr> </table> |
و تظهر عبر المتصفح بالشكل التالي :
| عنوان 1 | عنوان 2 |
|---|---|
| خلية 11 | خلية 12 |
| خلية 21 |
لاحظ أن
لاحظ أن الحدود حول خلية الجدول الفارغة غير موجودة " غير ظاهرة عبر المتصفح ".
لتفادي حدوث ذلك الأمر يجب إضافة non-breaking space ( ) داخل الخلية الفارغة لجعل الحدود مرئية . كما يتضح من خلال المثال التالي :
<table border="1">
<tr> <td>خلية 11</td> <td>خلية 12</td> </tr> <tr> <td>خلية 21</td> <td>& nbsp;</td> </tr> </table> |
و تظهر عبر المتصفح بالشكل التالي :
| خلية 11 | خلية 12 |
| خلية 21 |
لاحظ أن
العناصر <thead> ، و <tbody> ، و <tfoot> نادرة الاستخدام، بسبب الدعم السيء للمتصفحات... من المتوقع أن يتغير ذلك في الإصدارات المستقبلية من " XHTML "... إذا كان لديك متصفح IE 5.0 أو إصدار أحدث منه ، تستطيع رؤية عمل المثال في دروس XML.
وسوم الجدول
Tag
|
Description
|
<table>
| تحديد الجدول. |
<th>
| تحديد عنوان الجدول. |
<tr>
| تحديد صف جدول. |
<td>
| تحديد خلية جدول. |
<caption>
| تحديد عنوان جدول. |
<colgroup>
| تحديد مجموعات أعمدة للجدول. |
<col>
| تحديد قيم سمة لواحد أو أكثر من الأعمدة في الجدول. |
<thead>
| تحديد رأس " قمة " الجدول. |
<tbody>
| تحديد جسم الجدول. |
<tfoot>
| تحديد تذييل " أسفل " الجدول. |
تعليقات: 0
إرسال تعليق