جداول و منو ها در html

جدول و لیست (منو) ها در html

جدول ها در html دارای کاربرد های زیادی هستند، یکی از راه های ساختن قسمت های مختلف یک سند استفاده از جدول است، از جدول همچنین می توانید برای نمایش لیست خود استفاده کنید. محتوای درون سلول های جدول هر چیزی می تواند باشد از قبیل تصویر، ویدئو، متن و…

آنچه در این مقاله می خوانید ...

 

رسم جدول در html

برای رسم جدول از تگ <table> استفاده می کنیم درون این تگ باید به تعداد لازم سطر ایجاد کنیم که این کار توسط تگ های <tr> انجام می گیرد، حال در هر سطر به تعداد نیاز باید سلول ساخت که برای این کار باید از تگ های <td> یا <th> کمک بگیریم که تگ td سلول های خالی و تگ th سلول های تیتر را ایجاد می کند.

در زیر برای آشنایی بیشتر یک جدول را :

  • <table><tbody><tr>
  • <th style=”border:solid thin blue”>تیتر اول</th>
  • <th style=”border:solid thin blue”>تیتر دوم</th>
  • </tr><tr>
  • <td style=”border:solid thin blue”>سطر 1 سلول 1</td>
  • <td style=”border:solid thin blue”>سطر 1 سلول 2</td>
  • </tr><tr>
  • <td style=”border:solid thin blue”>سطر 2 سلول 1</td>
  • <td style=”border:solid thin blue”>سطر 2 سلول 2</td>
  • </tr></tbody></table>

نتیجه آن به شکل زیر است :

تیتر اول تیتر دوم
سطر 1 سلول 1 سطر 1 سلول 2
سطر 2 سلول 1 سطر 2 سلول 2

توجه در صفت style می توانید تمامی خصوصیات سلول ها را تغییر دهید مانند رنگ، فونت، اندازه، حاشیه، گرد کردن لبه ها و ….
توجه از تگ <caption> برای توضیحات جدول استفاده کنید.
توجه همچنین برای چسباندن دو سطر به یکدیگر از rowspan و برای چسباندن دو سلول به یکدیگر از colspan استفاده می شود.

 

لیست در html:

از لیست ها می توانیم برای دسته بندی استفاده کنیم همچنین در ساخت منو ها کاربرد دارند. با استفاده از صفت های مختلف می توانیم لیست هایی با ظاهر مختلف بسازیم.
در html دو نوع لیست داریم: لیست سفارشی و لیست معمولی به مثال زیر توجه کنید:


یک لیست معمولی
• Coffee
• Tea
• Milk
یک لیست سفارشی
1 Coffee
2 Tea
3 Milk

<b>یک لیست معمولی در </b>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<hr>
<b>یک لیست سفارشی در </b>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>


همانطور که مشاهده شد از تگ <li> برای نمایش یک آیتم استفاده می شود.توسط صفت list-style-type می توانیم اشکال و اعداد کنار آیتم ها را تغییر دهیم یا حذف کنیم.همچنین میتوانیم بجای یک آیتم از یک لیست دیگر استفاده کنیم و یا آیتم ها را به جایی لینک کنیم.

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

همچنین بخوانید...!

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *