لیست ها در html

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

لیست ها (Lists) از موارد پرکاربرد در طراحی سایت می باشد. با استفاده از لیست ها می توانید به عنوان مثال منو یا لیستی از لینک ها و ... را طراحی کنید. لیست انواع مختلفی دارد که در این مطلب با لیست های مرتب، نامرتب، تودرتو و توضیحی در html آشنا خواهید شد.

لیست های مرتب

لیست مرتب همان طور که از اسمش پیداست تمامی موارد به صورت مرتب نمایش داده می شود.

همان طور که در کد پایین مشاهده می کنید برای ساخت لیست مرتب، از تگ ol و برای افزودن داده به جدول از تگ li استفاده می کنیم.

کد:

<ol>
  <li>سفید</li>
  <li>سبز</li>
</ol>

اجرا

در مثال بالا لیست به صورت عددی مرتب شده است و حالت های مرتب سازی دیگری برای این مورد وجود دارد.

برای تغییر حالت مرتب سازی از صفت type در تگ ol استفاده می کنیم.

نوع	توضیحات
1 (پیش فرض)	مرتب سازی بر اساس عدد
A	مرتب سازی بر اساس حروف انگلیسی بزرگ
a	مرتب سازی بر اساس حروف انگلیسی کوچک
I	مرتب سازی بر اساس عدد یونانی بزرگ
i	مرتب سازی بر اساس عدد یونانی کوچک

به عنوان مثال می خواهیم لیست بر اساس حروف انگلیسی بزرگ مرتب شود.

کد:

<ol type="A">
  <li>سفید</li>
  <li>سبز</li>
</ol>

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

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

برای ساخت لیست نامرتب از تگ ul و برای افزودن داده به لیست از تگ li استفاده می کنیم.

کد:

<ul>
  <li>سفید</li>
  <li>سبز</li>
</ul>

اجرا

برخلاف لیست های مرتب که داده ها را به ترتیب اعداد، حروف و ... مرتب سازی می شود لیست های نامرتب، نشانه هایی از قبیل دایره، مربع و ...  را قبل از داده نمایش می دهد که در صورت لزوم می توانید تغییر دهید و یا کلا حذفش کنید.

برای این کار باید از list-style یا list-style-type در css کمک گرفت.

نوع	توضیحات
disk (پیش فرض)	نمایش به صورت دایره توپر
circle	نمایش به صورت دایره توخالی
square	نمایش به صورت مربع توپر
none	حذف نشانه

به عنوان مثال می خواهیم لیست با نشانه مربع نمایش داده شود.

برای نوشتن کد css درون تگ html از صفت style استفاده می کنیم.

کد:

<ul style="list-style-type: square;">
  <li>سفید</li>
  <li>سبز</li>
</ul>

در صورتی که مایل به نوشتن کد list-style-type در css هستید به این صورت عمل کنید:

کد CSS:

ul {
  list-style-type: square;
}

لیست های توضیحی

این لیست برای توضیح در مورد یک موضوع خاص کاربرد دارد.

برای ایجاد لیست توضیحی از تگ dl استفاده می کنیم و با تگ dt عنوان مورد نظر و با تگ dd توضیحات را می نویسیم.

ایجاد لیست توضیحی: تگ dl

افزودن عنوان: تگ dt

افزودن توضیحات: تگ dd

کد:

<dl>
  <dt>سفید</dt>
    <dd>HEX code: #ffffff</dd>
  <dt>سبز</dt>
    <dd>HEX code: #00a550</dd>
</dl>

اجرا

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

چگونه لیستی را زیر مجموعه لیست دیگر قرار دهیم؟

برای این کار کافیست تگ ul به همراه داده هایش را درون تگ li قرار دهید.

کد:

<ul>
  <li>میوه ها</li>
  <li>رنگ ها
    <ul>
      <li>سفید</li>
      <li>سبز</li>
    </ul>
  </li>
</ul>

اجرا

نکته: لیست ها کاربرد فراوانی در طراحی سایت دارند و برای مانور و زیبایی بیشتر باید از css استفاده کرد.

سازگاری با مرورگرها

لیست با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS