🌐 درس چهارم: لیست‌ها و جداول در HTML

👋

سلام مهمان عزیز!

برای دسترسی به تمام محتوا و امکانات، وارد شوید.

🎯 هدف این درس: یادگیری ساخت لیست‌های مرتب، نامرتب و تو در تو و همچنین ساخت جدول‌های استاندارد و کاربردی در HTML

مهمان عزیز! 👋 به درس چهارم از دوره جامع HTML سطح مقدماتی خوش آمدی.

تا اینجا با ساختار HTML، تگ‌های متنی، لینک‌ها و تصاویر آشنا شدی. حالا می‌خواهیم سراغ دو ابزار بسیار پرکاربرد در طراحی صفحات وب برویم:
لیست‌ها و جدول‌ها.

تقریباً در هر وب‌سایتی که با آن کار می‌کنی، نمونه‌ای از این دو ساختار را می‌بینی؛ از منوهای سایت و فهرست مطالب گرفته تا مشخصات محصولات، برنامه‌های آموزشی، قیمت‌ها و اطلاعات کاربران.

💡 نکته کلیدی مهمان:

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

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

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

🔹 لیست نامرتب با <ul>
🔢 لیست مرتب با <ol>
📑 لیست‌های تو در تو با قرار دادن یک لیست داخل <li>

لیست نامرتب با ul

زمانی که ترتیب آیتم‌ها اهمیت ندارد، از <ul> استفاده می‌کنیم. هر آیتم نیز باید داخل تگ <li> قرار بگیرد.

🌐
لیست نامرتب

HTML
HTML5


<!DOCTYPE html>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>PHP</li>
</ul>

🔎 ساختار لیست را به خاطر بسپار:

<ul> ظرف اصلی لیست است و هر <li> یک آیتم از آن لیست محسوب می‌شود.

لیست مرتب با ol

اگر ترتیب آیتم‌ها اهمیت داشته باشد، از <ol> استفاده می‌کنیم. مرورگر به صورت پیش‌فرض آیتم‌ها را با شماره نمایش می‌دهد.

🌐
لیست مرتب

HTML
HTML5


<!DOCTYPE html>
<ol>
    <li>ثبت‌نام در سایت</li>
    <li>انتخاب دوره</li>
    <li>مطالعه درس</li>
    <li>انجام تمرین</li>
</ol>

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

گاهی لازم است یک لیست شامل چند زیرمجموعه باشد. برای این کار می‌توانیم یک <ul> یا <ol> دیگر را داخل یک <li> قرار دهیم.

🌐
لیست تو در تو

HTML
HTML5


<ul>
    <li>
        زبان‌های برنامه‌نویسی
        <ul>
            <li>PHP</li>
            <li>Python</li>
            <li>JavaScript</li>
        </ul>
    </li>

    <li>
        طراحی وب
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </li>
</ul>

⚠️ اشتباه رایج:

لیست داخلی باید داخل یک <li> قرار بگیرد. قرار دادن مستقیم <ul> داخل <ul> ساختار مناسبی نیست.

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

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

یک جدول HTML معمولاً از این عناصر تشکیل می‌شود:

<table> برای ساخت جدول
<tr> برای ساخت یک سطر
<th> برای سلول عنوان
<td> برای سلول معمولی

یک جدول ساده

🌐
جدول ساده

HTML
HTML5


<table>

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

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

    <tr>
        <td>سارا</td>
        <td>29</td>
        <td>اصفهان</td>
    </tr>

</table>

🧱 بخش ۴: ساختار حرفه‌ای جدول با thead و tbody

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

<thead> برای سرستون‌های جدول
<tbody> برای محتوای اصلی جدول
<tfoot> برای بخش پایانی یا جمع‌بندی جدول

🌐
جدول استاندارد

HTML
HTML5


<table>

    <thead>
        <tr>
            <th>محصول</th>
            <th>تعداد</th>
            <th>قیمت</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>لپ‌تاپ</td>
            <td>2</td>
            <td>50,000,000 تومان</td>
        </tr>

        <tr>
            <td>مانیتور</td>
            <td>1</td>
            <td>12,000,000 تومان</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>جمع</td>
            <td>3</td>
            <td>62,000,000 تومان</td>
        </tr>
    </tfoot>

</table>

💡 نکته حرفه‌ای مهمان:

استفاده از thead، tbody و tfoot فقط برای ظاهر نیست. این ساختار به مرورگرها، ابزارهای کمکی و موتورهای جستجو کمک می‌کند مفهوم بخش‌های مختلف جدول را بهتر درک کنند.

🔗 بخش ۵: ادغام سلول‌ها با colspan و rowspan

گاهی لازم است یک سلول بیش از یک ستون یا بیش از یک سطر را پوشش دهد. برای این کار از دو ویژگی مهم استفاده می‌کنیم:

colspan برای ادغام چند ستون
rowspan برای ادغام چند سطر

استفاده از colspan

🌐
ادغام ستون‌ها

HTML
HTML5


<table>
    <tr>
        <th colspan="3">اطلاعات دانشجو</th>
    </tr>

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

استفاده از rowspan

🌐
ادغام سطرها

HTML
HTML5


<table>
    <tr>
        <td rowspan="2">HTML</td>
        <td>مقدماتی</td>
    </tr>

    <tr>
        <td>متوسط</td>
    </tr>
</table>

🚫 اشتباه رایج مهمان:

تعداد ستون‌هایی که در هر سطر ایجاد می‌کنی باید با ساختار جدول هماهنگ باشد. هنگام استفاده از colspan و rowspan باید تعداد سلول‌های واقعی جدول را با دقت محاسبه کنی.

♿ بخش ۶: دسترسی‌پذیری جدول‌ها

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

یکی از روش‌های مهم، مشخص کردن رابطه بین عنوان جدول و ستون‌ها با ویژگی scope است.

🌐
جدول دسترس‌پذیر

HTML
HTML5


<table>
    <caption>لیست دانشجویان دوره PHP</caption>

    <thead>
        <tr>
            <th scope="col">نام</th>
            <th scope="col">دوره</th>
            <th scope="col">وضعیت</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>علی</td>
            <td>HTML</td>
            <td>در حال یادگیری</td>
        </tr>
    </tbody>
</table>

💡 نکته مهم:

تگ <caption> عنوان یا توضیح کوتاهی برای جدول مشخص می‌کند و scope="col" مشخص می‌کند که یک عنوان مربوط به ستون است.

🛠️ پروژه عملی: جدول برنامه هفتگی

🎯 پروژه: برنامه هفتگی یادگیری

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

روز هفته
موضوع مطالعه
مدت زمان مطالعه

🔍 نمونه راه‌حل:

🌐
برنامه هفتگی

HTML
HTML5


<!DOCTYPE html>
<html lang="fa">

<body>

    <h1>برنامه هفتگی یادگیری</h1>

    <table>
        <caption>برنامه مطالعه هفتگی</caption>

        <thead>
            <tr>
                <th scope="col">روز</th>
                <th scope="col">موضوع</th>
                <th scope="col">مدت زمان</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>شنبه</td>
                <td>HTML</td>
                <td>۶۰ دقیقه</td>
            </tr>

            <tr>
                <td>یکشنبه</td>
                <td>CSS</td>
                <td>۴۵ دقیقه</td>
            </tr>

            <tr>
                <td>دوشنبه</td>
                <td>تمرین HTML</td>
                <td>۶۰ دقیقه</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

📝 تمرین‌های عملی

🎯 تمرین شماره ۱: لیست دوره‌ها

یک لیست نامرتب بساز و حداقل پنج زبان یا فناوری مورد علاقه خودت را داخل آن قرار بده.

🎯 تمرین شماره ۲: مراحل یادگیری

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

🎯 تمرین شماره ۳: جدول مشخصات

یک جدول برای معرفی سه محصول یا سه دوره آموزشی ایجاد کن. جدول باید حداقل سه ستون و سه ردیف داشته باشد.

🧠 نکات کلیدی درس

✅ برای لیست نامرتب از <ul> استفاده می‌کنیم.
✅ برای لیست مرتب از <ol> استفاده می‌کنیم.
✅ هر آیتم لیست باید داخل <li> قرار بگیرد.
✅ می‌توان لیست‌ها را به صورت تو در تو ایجاد کرد.
✅ برای ساخت جدول از <table> استفاده می‌کنیم.
✅ هر سطر جدول با <tr> ساخته می‌شود.
✅ برای عنوان ستون‌ها از <th> استفاده می‌کنیم.
✅ برای سلول‌های معمولی از <td> استفاده می‌کنیم.
✅ ساختار <thead>، <tbody> و <tfoot> باعث سازمان‌دهی بهتر جدول می‌شود.
✅ با colspan می‌توان چند ستون را ادغام کرد.
✅ با rowspan می‌توان چند سطر را ادغام کرد.
✅ استفاده صحیح از <caption> و scope به دسترسی‌پذیری جدول کمک می‌کند.

🎯 برای درس بعدی آماده‌ای مهمان؟

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

🔗 لینک‌های مرتبط

⬅️
درس قبل: لینک‌ها و تصاویر

🚀
درس بعدی: فرم‌ها

🏠
صفحه دوره‌ها

👤

نویسنده یونس رجستری

📅

تاریخ انتشار 24 مرداد 1405

🔄

آخرین بروزرسانی 24 مرداد 1405

دنیای تکنولوژی
از یادگیری شروع می‌شود

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