أساسيات جداول HTML

يبدأ الجدول بـ <table> وكل صف <tr> والخلية العادية <td> وخلية العنوان <th>. الجداول للبيانات الجدولية فقط وليست لتنسيق الصفحة.

<table>
  <caption>Weekly plan</caption>
  <tr><th>Day</th><th>Task</th></tr>
  <tr><td>Mon</td><td>HTML</td></tr>
  <tr><td>Tue</td><td>CSS</td></tr>
</table>

إذا لزم أن تمتد الخلية على عدة أعمدة فاستخدم colspan أو على عدة صفوف فاستخدم rowspan. ويدل العدد على عدد الخلايا المدموجة.

<table>
  <tr><th colspan="2">Prices</th></tr>
  <tr><td>Tea</td><td>1.00</td></tr>
  <tr><td rowspan="2">Cake</td><td>3.50</td></tr>
  <tr><td>4.00</td></tr>
</table>

قسّم الجداول الطويلة إلى <thead> و<tbody> و<tfoot>. وكتابة scope="col" أو scope="row" على <th> تُعلم قارئ الشاشة بما يخصه العنوان. ويمنح <caption> الجدول اسمًا.

<table>
  <caption>Scores</caption>
  <thead><tr><th scope="col">Name</th><th scope="col">Points</th></tr></thead>
  <tbody>
    <tr><th scope="row">Aysel</th><td>92</td></tr>
    <tr><th scope="row">Murad</th><td>88</td></tr>
  </tbody>
</table>

• اضبط المظهر (الحدود والألوان) بـ CSS لا بسمات HTML.