فصل ۱۵ | لیست‌ها و جدول‌ها

سه نوع لیست در HTML

لیست نامرتب

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

unordered-list.html

<ul>
    <li>چای</li>
    <li>قهوه</li>
    <li>شیر</li>
</ul>

لیست مرتب با <ol> ساخته می‌شود و آیتم‌ها به‌طور خودکار شماره‌گذاری می‌شوند؛ مناسب زمانی که ترتیب مهم است، مثل مراحل یک دستورالعمل.

ordered-list.html

<ol>
    <li>آب را بجوشانید</li>
    <li>چای را دم کنید</li>
    <li>سه دقیقه صبر کنید</li>
</ol>

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

nested-list.html

<ul>
    <li>نوشیدنی‌ها
        <ul>
            <li>چای</li>
            <li>قهوه</li>
        </ul>
    </li>
    <li>خوراکی‌ها</li>
</ul>

لیست توصیفی با <dl> برای نمایش جفت‌های «واژه و توضیح» استفاده می‌شود؛ هر واژه با <dt> و توضیح آن با <dd> مشخص می‌شود.

description-list.html

<dl>
    <dt>HTML</dt>
    <dd>زبان ساختاردهی صفحات وب</dd>
    <dt>CSS</dt>
    <dd>زبان استایل‌دهی صفحات وب</dd>
</dl>

نکته: نوع نشانه‌ی لیست (نقطه، عدد، حرف) و حذف نشانه‌ها به‌طور کامل، همگی از طریق CSS و خاصیت list-style قابل تغییرند.