آموزش قدم به قدم HTML – بخش پنجم: جدول ها و لیست ها

پنج شنبه ۴ شهریور ۱۳۹۵

آموزش قدم به قدم HTML - بخش پنجم: جدول ها و لیست هاReviewed by جواد نبوی on Aug 25Rating: 4.5

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

سلام به دوستان عزیز؛ در قسمت های قبلی آموزش قدم به قدم HTMl از سایت وب تستر، مواردی مثل تصاویر، لینک ها، متون، عنوان ها و … را توضیح داده بودیم.لینک قسمت های قبلی را در پایین همین مطلب میتوانید ببینید. در این قسمت از آموزش قدم به قدم HTML میخواهیم نحوه ایجاد جدول ها و لیست ها در html را برای شما به صورت کامل توضیح دهیم.

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

نحوه ساخت جدول در HTML

جدول ها در html

در html برای ایجاد یک جدول از تگ <table> </table> استفاده می کنیم. به صورت زیر:

<table>
 </table>

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

باید سطر هایی را در جدولتان ایجاد کنید. بدین منظور، از تگ <tr> استفاده می کنیم. به هر تعداد که میخواهید سطر در جدول تان داشته باشید باید این تگ را درون تگ <table> قرار دهید. توجه داشته باشید که <tr> تگی است که باز و بسته میشود و درونش اطلاعات قرار میگیرد. به علاوه، درون هر سطر، تعدادی سلول یا ستون داریم که آنها را باید با تگ <td> ایجاد کنید. به شکل زیر:

<table>

<tr>
 <td></td> <td></td>
 </tr>

<tr>
 <td></td> <td></td>
 </tr>

</table>

کد بالا یک جدول با دو سطر ایجاد میکند که در هر سطر دو ستون یا سلول قرار گرفته. آن را در تست کنید و نتیجه اش را ببینید. مطمئنا چیزی نخواهید دید. چون که درون این جدول هیچ اطلاعاتی قرار نداده اید. پس مقداری متن درون سلول های این جدول قرار دهید و آزمایشش کنید. مثلا به شکل زیر:

<table>

<tr>
 <td>100</td> <td>200</td>
 </tr>

<tr>
 <td>300</td> <td>400</td>
 </tr>

</table>

حالا اگر این کد را در پروژه ای آزمایش کنید، نتیجه ای به شکل زیر میبینید:

جدول در html

همانطور که میبینید، این جدول هیچ لبه یا حاشیه ای ندارد. برای اینکه به آن حاشیه دهید کافیست در تگ <table> از خصوصیت border استفاده کنید. به نمونه زیر دقت کنید:

<table border="1">

<tr>
 <td>100</td> <td>200</td>
 </tr>

<tr>
 <td>300</td> <td>400</td>
 </tr>

</table>

در کد بالا ما border را برابر با یک در نظر گرفتیم. شما میتوانید آن را بزرگتر کنید تا حاشیه پهن تری داشته باشید. نتیجه کد بالا به شکل زیر خواهد بود:

آموزش ایجاد جداول در html

حاشیه این جدول، به صورت دو خطی است. برای آن که آن را تک خطی کنیم کافیست خصوصیت style=”border-collapse:collapse;” را درون تگ <table> بگذاریم.

<table border="1" style="border-collapse:collapse;">

<tr>
 <td>100</td> <td>200</td>
 </tr>

<tr>
 <td>300</td> <td>400</td>
 </tr>

</table>

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

آموزش ساخت جدول در html

توجه داشته باشید برای اینکه کد استانداردتری داشته باشید بهتر است لبه جداول را با استفاده از html تعیین نکنید. یعنی خصوصیت border را در تگ <table> استفاده نکنید. بهتر است در CSS از کد زیر استفاده کنید تا لبه را برای جدول تنظیم کنید:

<style>
 table,th,td
 {
 border:1px solid black;
 border-collapse:collapse
 }
 </style>

توجه داشته باشید که کد CSS بالا را باید درون تگ <head> </head> قرار دهید. البته بعدا در مورد CSS هم به شما آموزش خواهیم داد.

شما میتوانید هر نوع اطلاعاتی مثل تصویر، متن، لینک و … را درون سلول های جداول نمایش دهید.

تنظیم فاصله محتویات سلول ها از لبه و سلول ها از یکدیگر

برای اینکه محتویات موجود در سلول های جدول از لبه جدول فاصله بگیرند کافیست خصوصیت padding را در css به کار ببرید:

th,td
 {
 padding:15px;
 }

همچنین برای اینکه سلول ها از یکدیگر فاصله بگیرند میتوانید از خصوصیت border-spacing استفاده کنید:

table
 {
 border-spacing:5px;
 }

کافیست کد های css بالا را درون تگ <style> </style> موجود در تگ <head> </head> پروژه تان قرار دهید. اگر تگ <style> وجود ندارد، آن را ایجاد کنید.

نحوه ایجاد لیست در HTML

لیست ها در html

حال که نحوه ساخت جداول در اچ تی ام ال را یاد گرفتیم بهتر است برویم سراغ لیست ها. در html ما سه نوع لیست داریم. لیست های ترتیبی (مرتب)، لیست های نامرتب و لیست های تعریفی. البته دو نوع اول رایج تر است و نوع سوم خیلی مهم نیست.

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

آیتم های موجود در این نوع لیست ها به ترتیب شماره گذاری میشوند. برای ایجاد لیست های ترتیبی از تگ <ol> استفاده می کنیم. به علاوه برای ایجاد آیتم های آن از تگ <li> استفاده می کنیم. البته برای ایجاد آیتم در همه انواع لیست به غیر از لیست های تعریفی از تگ <li> استفاده می شود. به کد زیر و نتیجه اش دقت کنید:

<ol>
 <li>Coffee</li>
 <li>Milk</li>
 </ol>

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

لیست ها در html

نحوه ایجاد لیست های نامرتب در html

این نوع لیست ها شماره گذاری نمیشوند. از تگ <ul> برای ایجاد این نوع لیست ها استفاده کنید. به علاوه برای ایجاد آیتم های آن از تگ <li> استفاده کنید. آیتم های لیست نامرتب توسط دایره هایی نشانه گذاری میشوند. البته شکل این دایره ها را میتوانید تغییر دهید. کد زیر را نگاه کنید:

<ul>
 <li>Coffee</li>
 <li>Milk</li>
 </ul>

نتیجه کد بالا:

آموزش ساخت لیست در html

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

<ul>
 <li>Coffee</li>
 <li>Tea
 <ul>
 <li>Black tea</li>
 <li>Green tea</li>
 </ul>
 </li>
 <li>Milk</li>
 </ul>

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

آموزش ساخت جدول ها و لیست ها در html

نحوه ساخت لیست های تعریفی در HTML

در این نوع لیست ها آیتم هایی را میبینیم که هر کدام توضیح یا تعریف مخصوص به خودشان را دارند. از تگ <dl> برای ایجاد این لیست ها استفاده می کنیم. از تگ <dt> برای ایجاد یک آیتم درون این لیست ها استفاده می شود. از تگ <dd> هم برای مشخص کردن تعریف یا همان توضیح یک آیتم استفاده می شود.:

<dl>
 <dt>Coffee</dt>
 <dd>- black hot drink</dd>
 <dt>Milk</dt>
 <dd>- white cold drink</dd>
 </dl>

نحوه نمایش کد بالا:

نحوه ایجاد لیست تعریفی در اچ تی ام ال

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

آموزش قدم به قدم HTML بخش اول

آموزش قدم به قدم HTML بخش دوم

آموزش قدم به قدم HTML بخش سوم

آموزش قدم به قدم HTML بخش چهارم

 

تبلیغات

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

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

پاسخ دهید

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