فهرست‌ها و جدول‌ها

بخش بزرگی از محتوای واقعی سایت‌ها به شکل «چند مورد» یا «داده در قالب ردیف و ستون» می‌آید: فهرست خرید، مراحل نصب، جدول قیمت‌ها. HTML برای هر دو حالت عنصرهای مخصوصی دارد. خوب نوشتن فهرست‌ها و جدول‌ها یعنی معنا را هم منتقل کنید، نه فقط ظاهر مرتب.

فهرست‌ها: ul و ol

فهرست ناترتیب (Unordered List) با عنصر ul ساخته می‌شود و ترتیب مواردش مهم نیست؛ مثل فهرست علاقه‌مندی‌ها. فهرست ترتیبی (Ordered List) با عنصر ol ساخته می‌شود و ترتیب معنا دارد؛ مثل مراحل یک دستورالعمل. هر مورد داخل li می‌آید:

<ul>
  <li>Bread</li>
  <li>Cheese</li>
  <li>Walnut</li>
</ul>

<ol>
  <li>Download the file.</li>
  <li>Extract the archive.</li>
  <li>Run the installer.</li>
</ol>

عنصر ol دو ویژگی پرکاربرد دارد: start شماره آغازین را تعیین می‌کند و reversed شماره‌گذاری را وارونه می‌کند. فهرست‌ها می‌توانند تو در تو باشند؛ فهرست داخلی را داخل li والد می‌گذارید:

<ol start="3">
  <li>Open the project settings.</li>
  <li>
    Choose a display mode:
    <ul>
      <li>Light mode</li>
      <li>Dark mode</li>
    </ul>
  </li>
  <li>Save the changes.</li>
</ol>

فهرست توصیفی: dl

گاهی محتوا به شکل «اصطلاح و توضیح آن» می‌آید؛ مثل واژه‌نامه یا مشخصات یک محصول. برای این حالت فهرست توصیفی (Description List) داریم: عنصر dl کل فهرست را می‌گیرد، dt اصطلاح را و dd توضیح آن را:

<dl>
  <dt>HTML</dt>
  <dd>The language that structures web content.</dd>
  <dt>CSS</dt>
  <dd>The language that defines the look and layout of a page.</dd>
</dl>

جدول‌ها

جدول با عنصر table ساخته می‌شود؛ هر ردیف یک tr است و داخل ردیف، سلول‌ها می‌آیند: th برای سلول سرستون و td برای سلول داده. عنصر th اعلام می‌کند این سلول عنوان است و ویژگی scope می‌گوید عنوان چه چیزی است: ستون یا ردیف. این اطلاعات دقیقاً همان چیزی است که صفحه‌خوان‌ها برای خواندن جدول به آن نیاز دارند:

<table>
  <caption>First-Term Grades</caption>
  <thead>
    <tr>
      <th scope="col">Subject</th>
      <th scope="col">Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mathematics</td>
      <td>18</td>
    </tr>
    <tr>
      <td>Physics</td>
      <td>16</td>
    </tr>
  </tbody>
</table>

ساختار را کامل کنید: عنصر caption توضیح جدول است و باید نخستین فرزند table باشد؛ thead گروه ردیف‌های سرستون و tbody بدنه داده را مشخص می‌کند. برای جدول‌های بزرگ tfoot هم ردیف‌های جمع‌بندی را می‌گیرد.

برای پوشش دادن چند ستون یا چند ردیف با یک سلول، از ویژگی‌های colspan و rowspan استفاده می‌شود:

<tr>
  <th colspan="2" scope="colgroup">Overall GPA: 17</th>
</tr>

تمرین‌ها

<!-- Write your code here -->

<table>
  <caption>Weekly Schedule</caption>
  <thead>
    <tr>
      <th scope="col">Day</th>
      <th scope="col">Subject</th>
      <th scope="col">Time</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Saturday</td>
      <td>Mathematics</td>
      <td>8 to 10</td>
    </tr>
    <tr>
      <td>Sunday</td>
      <td>Programming</td>
      <td>10 to 12</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Friday</td>
      <td colspan="2">Weekend off</td>
    </tr>
  </tfoot>
</table>

:::

خلاصه

• ul برای موارد بی‌ترتیب و ol برای مراحل شماره‌دار است؛ هر مورد در li می‌آید.
• فهرست تو در تو را داخل li والد می‌گذارید و start و reversed شماره‌گذاری ol را کنترل می‌کنند.
• dl جفت‌های اصطلاح و توضیح را با dt و dd می‌سازد.
• جدول با table و tr و th و td ساخته می‌شود؛ caption و thead و tbody معنا را کامل می‌کنند.
• colspan و rowspan سلول‌ها را روی چند ستون یا ردیف پوشش می‌دهند و جدول هرگز برای چیدمان صفحه به کار نمی‌رود.

داده را می‌توانید فهرست و جدول کنید؛ در درس بعدی یاد می‌گیرید از کاربر داده بگیرید: فرم‌ها.