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

١القائمة النقطية والمرقّمة

للقائمة وسمان حسب نوعها، وكل عنصر فيها يُكتب بالوسم <li>:

<h3>مكونات القهوة</h3><ul>  <li>بن مطحون</li>  <li>ماء ساخن</li>  <li>هيل</li></ul> <h3>طريقة التحضير</h3><ol>  <li>اغلِ الماء.</li>  <li>أضف البن والهيل.</li>  <li>اتركه دقيقتين ثم صبّه.</li></ol>

٢قائمة داخل قائمة

ضع <ul> جديدة داخل <li>، فتصبح قائمة فرعية. هكذا تُبنى قوائم التنقل ذات الأقسام:

<ul>  <li>المشروبات    <ul>      <li>قهوة</li>      <li>شاي</li>    </ul>  </li>  <li>الحلى</li></ul>

لاحظ: القائمة الفرعية داخل <li> قبل إغلاقه، لا بعده.

٣الجدول: صفوف وخلايا

الجدول يُبنى صفًّا صفًّا: <tr> صف، وفي داخله خلايا <td>. وخلايا العناوين <th> تظهر عريضة:

<style>table{border-collapse:collapse}th,td{border:1px solid #999;padding:4px 10px}th{background:#eee}</style><table>  <caption>أسعار القهوة</caption>  <tr>    <th>الصنف</th>    <th>الحجم</th>    <th>السعر</th>  </tr>  <tr>    <td>قهوة عربية</td>    <td>صغير</td>    <td>8</td>  </tr>  <tr>    <td>قهوة مختصة</td>    <td>كبير</td>    <td>18</td>  </tr></table>

سطر <style> في أول المثال يرسم حدود الخلايا فقط. ستتعلم كتابته بنفسك في وحدة CSS؛ بدونه يظهر الجدول بلا خطوط.

٤دمج الخلايا

السمة colspan تجعل الخلية تمتد على أكثر من عمود، و rowspan على أكثر من صف:

<style>table{border-collapse:collapse}th,td{border:1px solid #999;padding:4px 10px}th{background:#eee}</style><table>  <tr>    <th>اليوم</th>    <th colspan="2">الحصص</th>  </tr>  <tr>    <td rowspan="2">الأحد</td>    <td>برمجة</td>    <td>ويب</td>  </tr>  <tr>    <td>رياضيات</td>    <td>إنجليزي</td>  </tr></table>

٥رأس الجدول وجسمه

في الجداول الكبيرة نقسم الصفوف إلى <thead> لصف العناوين، و <tbody> لصفوف البيانات، و <tfoot> للمجموع. لا يتغير الشكل كثيرًا، لكن المعنى أوضح، وتستفيد منه CSS والطباعة.

<table>  <thead>    <tr><th>الصنف</th><th>السعر</th></tr>  </thead>  <tbody>    <tr><td>قهوة</td><td>10</td></tr>    <tr><td>شاي</td><td>5</td></tr>  </tbody>  <tfoot>    <tr><td>المجموع</td><td>15</td></tr>  </tfoot></table>