BenoService

آکادمی بنو/آموزش HTML

لیست‌ها و جدول‌ها در HTML

بهنام نوبخت · ۱۴۰۵/۶/۲۸

نمایش اطلاعات در یک صفحه وب همیشه به معنی قرار دادن چند پاراگراف متن پشت سر هم نیست. بسیاری از اطلاعات زمانی خواناتر و قابل‌درک‌تر هستند که به صورت لیست یا جدول سازمان‌دهی شوند؛ برای مثال، فهرست خدمات و ویژگی‌های یک محصول را می‌توان با لیست نمایش داد و اطلاعاتی مانند قیمت، وضعیت، مشخصات محصولات یا برنامه‌های زمانی را می‌توان در قالب جدول ارائه کرد. HTML برای هرکدام از این کاربردها عناصر مشخصی در اختیار ما قرار می‌دهد.

بخش اول: لیست‌ها در HTML

لیست چیست؟

لیست مجموعه‌ای از چند مورد مرتبط با یکدیگر است که معمولاً به صورت پشت سر هم نمایش داده می‌شوند.

برای مثال، اگر بخواهیم زبان‌های برنامه‌نویسی مورد علاقه خود را نمایش دهیم:

  • C#

  • JavaScript

  • Python

  • Java

می‌توانیم از لیست HTML استفاده کنیم.

HTML چند نوع لیست دارد که مهم‌ترین آن‌ها عبارت‌اند از:

  1. لیست نامرتب

  2. لیست مرتب

  3. لیست‌های تو در تو

  4. لیست توضیحی

لیست نامرتب — Unordered List

برای ایجاد یک لیست نامرتب از تگ <ul> استفاده می‌کنیم.

هر مورد داخل لیست نیز با تگ <li> مشخص می‌شود.

مثال:

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

مرورگر معمولاً این لیست را به صورت زیر نمایش می‌دهد:

  • HTML

  • CSS

  • JavaScript

تگ <ul> مشخص می‌کند که یک لیست داریم و هر <li> یک مورد از آن لیست است.

تگ <li> چیست؟

تگ <li> مخفف عبارت List Item به معنی «مورد لیست» است.

مثلاً:

<ul>
    <li>طراحی سایت</li>
    <li>طراحی اپلیکیشن</li>
    <li>طراحی رابط کاربری</li>
</ul>

در این مثال سه مورد در لیست داریم.

نکته مهم این است که <li> معمولاً داخل <ul> یا <ol> استفاده می‌شود.

لیست مرتب — Ordered List

گاهی ترتیب آیتم‌های لیست اهمیت دارد.

برای مثال، مراحل طراحی یک سایت:

  1. بررسی نیازمندی‌ها

  2. طراحی رابط کاربری

  3. پیاده‌سازی

  4. تست

  5. انتشار

برای چنین لیستی از <ol> استفاده می‌کنیم.

<ol>
    <li>بررسی نیازمندی‌ها</li>
    <li>طراحی رابط کاربری</li>
    <li>پیاده‌سازی</li>
    <li>تست</li>
    <li>انتشار</li>
</ol>

ol مخفف Ordered List است؛ یعنی «لیست مرتب».

مرورگر به صورت پیش‌فرض شماره آیتم‌ها را نمایش می‌دهد.

تفاوت <ul> و <ol>

تفاوت اصلی بسیار ساده است:

<ul>

برای لیست‌هایی استفاده می‌شود که ترتیب آیتم‌ها اهمیت خاصی ندارد.

<ul>
    <li>قرمز</li>
    <li>سبز</li>
    <li>آبی</li>
</ul>

<ol>

برای لیست‌هایی استفاده می‌شود که ترتیب آیتم‌ها مهم است.

<ol>
    <li>ثبت‌نام</li>
    <li>ورود</li>
    <li>تکمیل اطلاعات</li>
</ol>

به زبان ساده:

اگر ترتیب مهم نیست، معمولاً از <ul> استفاده می‌کنیم.

اگر ترتیب مهم است، معمولاً از <ol> استفاده می‌کنیم.

لیست‌های تو در تو

گاهی یک لیست شامل چند گروه است و هر گروه خودش چند مورد دارد.

برای مثال:

  • Frontend

    • HTML

    • CSS

    • JavaScript

  • Backend

    • C#

    • Python

    • Java

برای ساخت چنین ساختاری می‌توانیم یک لیست را داخل یک <li> دیگر قرار دهیم.

<ul>
    <li>
        Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>

    <li>
        Backend
        <ul>
            <li>C#</li>
            <li>Python</li>
            <li>Java</li>
        </ul>
    </li>
</ul>

در اینجا یک لیست اصلی داریم و داخل هر بخش، یک لیست دیگر قرار گرفته است.

ترکیب لیست مرتب و نامرتب

لیست‌های تو در تو الزاماً نباید از یک نوع باشند.

مثلاً:

<ol>
    <li>
        Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>

    <li>
        Backend
        <ul>
            <li>C#</li>
            <li>ASP.NET Core</li>
        </ul>
    </li>
</ol>

در این مثال لیست اصلی مرتب است، اما لیست‌های داخلی نامرتب هستند.

تغییر شماره شروع در لیست مرتب

در یک لیست مرتب، می‌توانیم مشخص کنیم شماره‌گذاری از چه عددی شروع شود.

برای این کار می‌توانیم از ویژگی start استفاده کنیم.

مثال:

<ol start="5">
    <li>مورد اول</li>
    <li>مورد دوم</li>
    <li>مورد سوم</li>
</ol>

شماره‌ها از ۵ شروع می‌شوند:

  1. مورد اول

  2. مورد دوم

  3. مورد سوم

البته در طراحی‌های واقعی معمولاً ظاهر و نحوه شماره‌گذاری لیست‌ها را بعداً با CSS کنترل می‌کنیم.

لیست توضیحی — Description List

نوع دیگری از لیست در HTML وجود دارد که برای نمایش یک عنوان و توضیح مربوط به آن مناسب است.

برای این کار از سه تگ استفاده می‌کنیم:

  • <dl> برای کل لیست

  • <dt> برای عنوان

  • <dd> برای توضیح

مثال:

<dl>
    <dt>HTML</dt>
    <dd>برای ساختار صفحات وب استفاده می‌شود.</dd>

    <dt>CSS</dt>
    <dd>برای طراحی و ظاهر صفحات وب استفاده می‌شود.</dd>

    <dt>JavaScript</dt>
    <dd>برای ایجاد رفتار و تعامل در صفحات وب استفاده می‌شود.</dd>
</dl>

می‌توان از این ساختار برای مواردی مانند فرهنگ لغات، مشخصات و توضیحات استفاده کرد.

بخش دوم: جدول‌ها در HTML

جدول چیست؟

جدول روشی برای نمایش اطلاعات در قالب سطر و ستون است.

برای مثال:

نام

سن

شهر

علی

25

تهران

رضا

30

شیراز

مریم

28

تبریز

برای ایجاد چنین ساختاری در HTML از تگ <table> استفاده می‌کنیم.

ساخت یک جدول ساده

یک جدول ساده:

<table>
    <tr>
        <th>نام</th>
        <th>سن</th>
        <th>شهر</th>
    </tr>

    <tr>
        <td>علی</td>
        <td>25</td>
        <td>تهران</td>
    </tr>

    <tr>
        <td>رضا</td>
        <td>30</td>
        <td>شیراز</td>
    </tr>
</table>

حالا بیایید تگ‌های استفاده‌شده را بررسی کنیم.

تگ <table>

تگ <table> مشخص می‌کند که می‌خواهیم یک جدول ایجاد کنیم.

<table>
    ...
</table>

تمام بخش‌های اصلی جدول داخل این تگ قرار می‌گیرند.

تگ <tr>

تگ <tr> برای ایجاد یک سطر جدول استفاده می‌شود.

tr مخفف Table Row است.

مثلاً:

<tr>
    <td>علی</td>
    <td>25</td>
    <td>تهران</td>
</tr>

این کد یک سطر شامل سه سلول ایجاد می‌کند.

تگ <td>

تگ <td> برای ایجاد یک سلول معمولی جدول استفاده می‌شود.

td مخفف Table Data است.

مثال:

<td>علی</td>

هر <td> معمولاً یک مقدار در جدول را نمایش می‌دهد.

تگ <th>

برای عنوان ستون‌ها از <th> استفاده می‌کنیم.

th مخفف Table Header است.

مثلاً:

<tr>
    <th>نام</th>
    <th>سن</th>
    <th>شهر</th>
</tr>

مرورگر معمولاً متن داخل <th> را به صورت پررنگ‌تر نمایش می‌دهد.

اما اهمیت <th> فقط ظاهر آن نیست؛ این تگ مشخص می‌کند که این سلول، عنوان یک بخش از جدول است.

ساختار یک جدول را به خاطر بسپارید

یک ساختار بسیار ساده:

table
 ├── tr
 │    ├── th
 │    ├── th
 │    └── th
 │
 ├── tr
 │    ├── td
 │    ├── td
 │    └── td
 │
 └── tr
      ├── td
      ├── td
      └── td

یعنی:

  • <table> = جدول

  • <tr> = سطر

  • <th> = عنوان ستون یا بخش

  • <td> = سلول اطلاعات

یک مثال واقعی‌تر

فرض کنید می‌خواهیم لیست محصولات یک فروشگاه را نمایش دهیم:

<table>
    <tr>
        <th>محصول</th>
        <th>قیمت</th>
        <th>موجودی</th>
    </tr>

    <tr>
        <td>لپ‌تاپ</td>
        <td>50000000</td>
        <td>موجود</td>
    </tr>

    <tr>
        <td>موبایل</td>
        <td>30000000</td>
        <td>موجود</td>
    </tr>

    <tr>
        <td>هدفون</td>
        <td>5000000</td>
        <td>ناموجود</td>
    </tr>
</table>

این جدول شامل سه ستون و چهار سطر است.

افزودن عنوان به جدول با <caption>

گاهی بهتر است برای جدول یک عنوان مشخص داشته باشیم.

برای این کار می‌توانیم از <caption> استفاده کنیم.

<table>
    <caption>لیست محصولات</caption>

    <tr>
        <th>محصول</th>
        <th>قیمت</th>
        <th>موجودی</th>
    </tr>

    <tr>
        <td>لپ‌تاپ</td>
        <td>50000000</td>
        <td>موجود</td>
    </tr>
</table>

caption عنوان یا توضیح کوتاهی برای جدول است.

ترکیب جدول با اطلاعات مختلف

محدودیتی نداریم که فقط متن داخل جدول قرار دهیم.

مثلاً می‌توانیم لینک نیز داخل سلول قرار دهیم:

<table>
    <tr>
        <th>نام</th>
        <th>وب‌سایت</th>
    </tr>

    <tr>
        <td>بنو سرویس</td>
        <td>
            <a href="#">مشاهده سایت</a>
        </td>
    </tr>
</table>

حتی می‌توانیم تصویر یا عناصر دیگری نیز داخل سلول‌های جدول قرار دهیم.

ادغام سلول‌ها با colspan

گاهی لازم است یک سلول، چند ستون را پوشش دهد.

برای این کار از ویژگی colspan استفاده می‌کنیم.

مثال:

<table>
    <tr>
        <th colspan="2">اطلاعات کاربر</th>
    </tr>

    <tr>
        <td>نام</td>
        <td>علی</td>
    </tr>

    <tr>
        <td>سن</td>
        <td>25</td>
    </tr>
</table>

در اینجا:

colspan="2"

یعنی این سلول فضای دو ستون را در بر می‌گیرد.

ادغام سطرها با rowspan

مشابه colspan، می‌توانیم یک سلول را در چند سطر قرار دهیم.

برای این کار از rowspan استفاده می‌کنیم.

مثال:

<table>
    <tr>
        <th>نام</th>
        <th>درس</th>
        <th>نمره</th>
    </tr>

    <tr>
        <td rowspan="2">علی</td>
        <td>HTML</td>
        <td>18</td>
    </tr>

    <tr>
        <td>CSS</td>
        <td>19</td>
    </tr>
</table>

در اینجا:

rowspan="2"

یعنی سلول مربوط به «علی» دو سطر را پوشش می‌دهد.

آیا باید برای طراحی صفحه از جدول استفاده کنیم؟

خیر.

این نکته بسیار مهم است.

در گذشته گاهی از جدول برای ساخت layout یا چیدمان کلی صفحه استفاده می‌شد، اما امروزه جدول باید بیشتر برای اطلاعات جدولی استفاده شود.

مثلاً این موارد مناسب جدول هستند:

  • لیست قیمت

  • نمرات

  • برنامه زمانی

  • مشخصات محصولات

  • گزارش‌ها

  • داده‌های آماری

اما برای ساخت قسمت‌های مختلف یک صفحه مانند:

  • Header

  • منوی سایت

  • Sidebar

  • Footer

  • کارت محصولات

نباید از جدول به عنوان ابزار اصلی layout استفاده کنیم.

برای طراحی layout در ادامه دوره با CSS و مخصوصاً Flexbox و Grid آشنا خواهیم شد.

جدول بدون CSS چگونه دیده می‌شود؟

اگر یک جدول را فقط با HTML ایجاد کنیم، ممکن است ظاهر آن خیلی ساده باشد.

مثلاً:

<table>
    <tr>
        <th>نام</th>
        <th>سن</th>
    </tr>

    <tr>
        <td>علی</td>
        <td>25</td>
    </tr>

    <tr>
        <td>مریم</td>
        <td>28</td>
    </tr>
</table>

HTML وظیفه اصلی خود را انجام داده و ساختار داده را مشخص کرده است.

اما اگر بخواهیم:

  • رنگ جدول را تغییر دهیم

  • فاصله سلول‌ها را تنظیم کنیم

  • خطوط جدول را زیباتر کنیم

  • عنوان‌ها را طراحی کنیم

  • جدول را Responsive کنیم

از CSS استفاده خواهیم کرد.

این موضوع را در بخش CSS به صورت کامل‌تر یاد می‌گیریم.

یک مثال کامل: صفحه محصولات

حالا یک صفحه ساده ایجاد کنیم که هم از لیست و هم از جدول استفاده کند.

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>محصولات</title>
</head>

<body>

    <h1>محصولات ما</h1>

    <h2>خدمات</h2>

    <ul>
        <li>طراحی سایت</li>
        <li>طراحی اپلیکیشن</li>
        <li>طراحی ربات تلگرامی</li>
        <li>سئو</li>
    </ul>

    <h2>مراحل سفارش</h2>

    <ol>
        <li>انتخاب سرویس</li>
        <li>ثبت سفارش</li>
        <li>پرداخت</li>
        <li>تحویل</li>
    </ol>

    <h2>لیست محصولات</h2>

    <table>
        <caption>محصولات و قیمت</caption>

        <tr>
            <th>محصول</th>
            <th>قیمت</th>
            <th>وضعیت</th>
        </tr>

        <tr>
            <td>فروشگاه ساز</td>
            <td>10000000</td>
            <td>موجود</td>
        </tr>

        <tr>
            <td>سامانه آزمون گیر</td>
            <td>8000000</td>
            <td>موجود</td>
        </tr>

        <tr>
            <td>سامانه تبلیغات</td>
            <td>12000000</td>
            <td>موجود</td>
        </tr>
    </table>

</body>
</html>

در این مثال چند مفهوم مهم HTML را کنار هم استفاده کردیم:

  • عنوان با <h1> و <h2>

  • لیست نامرتب با <ul>

  • لیست مرتب با <ol>

  • جدول با <table>

  • عنوان جدول با <caption>

  • سطر با <tr>

  • عنوان ستون با <th>

  • اطلاعات جدول با <td>

اشتباهات رایج

۱. قرار دادن <li> خارج از لیست

اشتباه:

<li>HTML</li>
<li>CSS</li>

بهتر است <li> داخل <ul> یا <ol> باشد:

<ul>
    <li>HTML</li>
    <li>CSS</li>
</ul>

۲. استفاده از <td> خارج از <tr>

اشتباه:

<table>
    <td>علی</td>
    <td>25</td>
</table>

ساختار صحیح:

<table>
    <tr>
        <td>علی</td>
        <td>25</td>
    </tr>
</table>

یعنی سلول‌های جدول باید درون یک سطر قرار بگیرند.

۳. استفاده از <td> برای عنوان ستون

اگر یک سلول عنوان ستون است، بهتر است از <th> استفاده کنیم:

<th>نام</th>
<th>سن</th>

و برای داده‌های معمولی:

<td>علی</td>
<td>25</td>

۴. استفاده از جدول برای چیدمان صفحه

مثلاً نباید کل صفحه را با یک جدول بزرگ طراحی کنیم.

جدول برای داده‌های جدولی است، نه ساختار کلی صفحه.

تمرین عملی

حالا نوبت شماست.

یک فایل با نام زیر ایجاد کنید:

article7.html

سپس یک صفحه با مشخصات زیر بسازید.

تمرین ۱ — لیست ساده

یک لیست نامرتب از پنج زبان برنامه‌نویسی ایجاد کنید.

مثلاً:

C#
JavaScript
Python
Java
PHP

تمرین ۲ — مراحل انجام کار

یک لیست مرتب برای مراحل ساخت یک وب‌سایت ایجاد کنید.

حداقل چهار مرحله داشته باشد.

تمرین ۳ — لیست تو در تو

یک لیست برای دسته‌بندی مهارت‌های خود ایجاد کنید.

مثلاً:

Frontend
    HTML
    CSS
    JavaScript

Backend
    C#
    ASP.NET Core

تمرین ۴ — جدول

یک جدول برای اطلاعات پنج محصول ایجاد کنید.

ستون‌های جدول:

محصول | قیمت | وضعیت

و برای هر محصول یک سطر ایجاد کنید.

تمرین ۵ — ترکیبی

یک صفحه HTML ایجاد کنید که شامل موارد زیر باشد:

  • یک عنوان اصلی

  • یک لیست خدمات

  • یک لیست مرتب برای مراحل سفارش

  • یک جدول محصولات

  • عنوان برای جدول

در این تمرین سعی کنید بدون CSS، فقط با HTML ساختار صفحه را ایجاد کنید.

جمع‌بندی

در این مقاله یاد گرفتیم:

  • <ul> برای لیست نامرتب است.

  • <ol> برای لیست مرتب است.

  • <li> یک مورد از لیست را مشخص می‌کند.

  • می‌توان لیست‌ها را داخل یکدیگر قرار داد.

  • <dl>، <dt> و <dd> برای لیست‌های توضیحی استفاده می‌شوند.

  • <table> برای ایجاد جدول است.

  • <tr> یک سطر جدول است.

  • <th> برای عنوان بخش یا ستون جدول است.

  • <td> برای داده‌های جدول است.

  • <caption> می‌تواند عنوان جدول را مشخص کند.

  • colspan برای ادغام چند ستون استفاده می‌شود.

  • rowspan برای ادغام چند سطر استفاده می‌شود.

  • جدول برای نمایش داده‌های جدولی مناسب است، نه طراحی layout کلی صفحه.

  • ظاهر لیست‌ها و جدول‌ها را در ادامه با CSS حرفه‌ای‌تر خواهیم کرد.

لیست‌ها و جدول‌ها دو ابزار مهم HTML برای سازمان‌دهی اطلاعات هستند.

با لیست‌ها می‌توانیم اطلاعات را به شکل مرتب و قابل خواندن نمایش دهیم و با جدول‌ها می‌توانیم داده‌هایی را که رابطه سطر و ستون دارند به شکل مناسب ارائه کنیم.

در این مرحله هنوز تمرکز ما روی ساختار HTML است و قرار نیست ظاهر حرفه‌ای ایجاد کنیم. این کار را در بخش CSS یاد خواهیم گرفت.

تا اینجا با بخش مهمی از عناصر پایه HTML آشنا شده‌ایم:

HTML
├── ساختار صفحه
├── متن‌ها
├── لینک‌ها
├── تصاویر و رسانه‌ها
├── لیست‌ها
└── جدول‌ها

در مقاله بعدی وارد یکی از مهم‌ترین بخش‌های HTML می‌شویم:

فرم‌ها و کنترل‌های ورودی در HTML

در آنجا یاد می‌گیریم چگونه فرم ثبت‌نام، ورود، جستجو و دریافت اطلاعات از کاربر را با HTML ایجاد کنیم.

۰۰

نظرات

کد در دسترس نیست

هنوز نظری ثبت نشده است.