جداول

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
(تغییرمسیر از جدول در اِچ تی اِم اِل)
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳ویرایشگرها
۴پایه
۵عنصرها
۶ویژگی‌ها
۷عنوان‌ها
۸پاراگراف‌ها
۹استایل‌ها
۱۰قالب‌بندی
۱۱نقل‌قول‌ها
۱۲توضیحات
۱۳رنگ‌ها
۱۴CSS
۱۵لینک‌ها
۱۶تصاویر
۱۷جداول
۱۸لیست‌ها
۱۹بلوک‌ها
۲۰کلاس‌ها
۲۱شناسه
۲۲Iframeها
۲۳جاوا اسکریپت
۲۴مسیرهای فایل
۲۵سرصفحه
۲۶چیدمان‌ها
۲۷واکنش‌گرا
۲۸کد کامپیوتری
۲۹معنایی‌ها
۳۰راهنمای استایل
۳۱موجودیت‌ها
۳۲نماد‌ها
۳۳ایموجی‌ها
۳۴مجموعه کاراکترها
۳۵رمزگذاری URL
۳۶HTML و XHTML
فرم‌های HTML
گرافیک در HTML
رسانه در HTML
APIها در HTML
مثال‌ها
مرجع HTML


مثال جدول HTML

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

تعریف یک جدول HTML

جدول HTML با تگ <table> تعریف می‌شود.[۱]

هر ردیف جدول با تگ <tr> مشخص می‌شود. عنوان جدول با تگ <th> مشخص می‌شود. بطور پیش فرض، عنوان‌های جدول bold و وسط-چین هستند. یک داده / سلول جدول با تگ <td> مشخص می‌شود.

مثال

 1 <table style="width:100%">
 2   <tr>
 3     <th>Firstname</th>
 4     <th>Lastname</th>
 5     <th>Age</th>
 6   </tr>
 7   <tr>
 8     <td>Jill</td>
 9     <td>Smith</td>
10     <td>50</td>
11   </tr>
12   <tr>
13     <td>Eve</td>
14     <td>Jackson</td>
15     <td>94</td>
16   </tr>
17 </table>


مشاهدهٔ نتیجه


توجه: عنصرهای <td> ظرف‌های داده جدول هستند. می‌توان همهٔ انواع عنصرهای HTML را در آنها قرار داد؛ متن، تصویرها، لیست‌ها، جدول‌های دیگر و غیره.

جدول HTML - اضافه کردن یک کادر

اگر برای جدول کادر تعیین نکرده باشید، بدون کادر نمایش داده خواهد شد.

کادر را می‌توان با ویژگی border در CSS تنظیم کرد:

مثال

1 table, th, td {
2   border: 1px solid black;
3 }


مشاهدهٔ نتیجه

به یاد داشته باشید هم برای خود جدول و هم برای سلول‌های آن کادر مشخص کنید.

جدول HTML - کادرهای پنهان شده (به انگلیسی: Collapsed)

اگر می‌خواهید کادرها پنهان شوند و به یک کادر تبدیل شوند، خصوصیت border-collapse را اضافه کنید:

مثال

1 table, th, td {
2   border: 1px solid black;
3   border-collapse: collapse;
4 }


مشاهدهٔ نتیجه


جدول HTML - اضافه کردن حاشیه درونی سلول

حاشیه درونی سلول، فضای بین محتوای سلول و کادرهای آن را مشخص می‌کند.

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

برای تنظیم، از خصوصیت padding در CSS در استفاده کنید:

مثال

1 th, td {
2   padding: 15px;
3 }


مشاهدهٔ نتیجه


جدول HTML - عنوان‌های چپ-چین

بطور پیش فرض، عنوان‌های جدول bold و وسط-چین هستند.

برای چپ-چین کردن عنوان‌های جدول، از خصوصیت text-align در CSS استفاده می‌شود:

مثال

1 th {
2   text-align: left;
3 }


مشاهدهٔ نتیجه


جدول HTML - اضافه کردن فاصله گذاری کادر

فاصله گذاری کادر فاصله بین سلول‌ها را مشخص می‌کند.

برای تنظیم فاصله گذاری کادر برای یک جدول، از خصوصیت border-spacing در CSS استفاده می‌شود:

مثال

1 table {
2   border-spacing: 5px;
3 }


مشاهدهٔ نتیجه

توجه: اگر جدول کادرهای collapsed داشته باشد، border-spacing هیچ اثری ندارد.

جدول HTML - سلول‌هایی که به اندازه چند ستون گسترده می‌شوند

برای گسترده شدن یک ستون به اندازه بیش از یک ستون، از ویژگی colspan استفاده کنید:

مثال

 1 <table style="width:100%">
 2   <tr>
 3     <th>Name</th>
 4     <th colspan="2">Telephone</th>
 5   </tr>
 6   <tr>
 7     <td>Bill Gates</td>
 8     <td>55577854</td>
 9     <td>55577855</td>
10   </tr>
11 </table>


مشاهدهٔ نتیجه


جدول HTML - سلول‌هایی که به اندازه چند ردیف گسترده می‌شوند

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

مثال

 1 <table style="width:100%">
 2   <tr>
 3     <th>Name:</th>
 4     <td>Bill Gates</td>
 5   </tr>
 6   <tr>
 7     <th rowspan="2">Telephone:</th>
 8     <td>55577854</td>
 9   </tr>
10   <tr>
11     <td>55577855</td>
12   </tr>
13 </table>


مشاهدهٔ نتیجه


جدول HTML - اضافه کردن زیرنویس

برای اضافه کردن زیرنویس به جدول از تگ <caption> استفاده می شود:

مثال

 1 <table style="width:100%">
 2   <caption>Monthly savings</caption>
 3   <tr>
 4     <th>Month</th>
 5     <th>Savings</th>
 6   </tr>
 7   <tr>
 8     <td>January</td>
 9     <td>$100</td>
10   </tr>
11   <tr>
12     <td>February</td>
13     <td>$50</td>
14   </tr>
15 </table>


مشاهدهٔ نتیجه

توجه: تگ <caption> باید بلافاصله بعد از تگ <table> اضافه شود.

استایل خاص برای یک جدول

بمنظور تعریف استایل خاص برای یک جدول، ویژگی id را برای جدول اضافه کنید:

مثال

 1 <table id="t01">
 2   <tr>
 3     <th>Firstname</th>
 4     <th>Lastname</th>
 5     <th>Age</th>
 6   </tr>
 7   <tr>
 8     <td>Eve</td>
 9     <td>Jackson</td>
10     <td>94</td>
11   </tr>
12 </table>


مشاهدهٔ نتیجه


حال می‌توانید یک استایل خاص برای این جدول تعریف کنید:

1 table#t01 {
2   width: 100%;
3   background-color: #f1f1c1;
4 }


مشاهدهٔ نتیجه


استایل‌های بیشتری اضافه کنید:

 1 table#t01 tr:nth-child(even) {
 2   background-color: #eee;
 3 }
 4 table#t01 tr:nth-child(odd) {
 5   background-color: #fff;
 6 }
 7 table#t01 th {
 8   color: white;
 9   background-color: black;
10 }


مشاهدهٔ نتیجه


خلاصه بخش

  • از عنصر <table> در HTML برای تعریف جدول استفاده می‌شود
  • از عنصر <tr> در HTML برای تعریف ردیف جدول استفاده می‌شود
  • از عنصر <td> در HTML برای تعریف دادهٔ جدول استفاده می‌شود
  • از عنصر <th> در HTML برای تعریف عنوان جدول استفاده می‌شود
  • از عنصر <caption> در HTML برای تعریف زیرنویس جدول استفاده می شود
  • از خصوصیت border در CSS برای مشخص کردن کادر استفاده می‌شود
  • از خصوصیت border-collapse در CSS برای collapse کردن کادرهای سلول استفاده می‌شود
  • از خصوصیت padding در CSS برای اضافه کردن حاشیه درونی به سلول‌ها استفاده می‌شود
  • از خصوصیت text-alignدر CSS برای محل قرار گرفتن متن استفاده می‌شود
  • از خصوصیت border-spacing در CSS برای تنظیم فاصله گذاری بین سلول‌ها استفاده می‌شود
  • از ویژگی colspan برای گستردن یک سلول به اندازه چند ستون استفاده می‌شود
  • از ویژگی rowspan برای گستردن یک سلول به اندازه چند ردیف استفاده می‌شود
  • از ویژگی id برای تعریف یک جدول بصورت منحصر بفرد استفاده کنید

تمرین های HTML

تگ های جدول HTML

تگ تعریف
<table> یک جدول تعریف می‌کند
<th> عنوان سلول را در یک جدول مشخص می‌کند
<tr> یک ردیف در جدول تعریف می‌کند
<td> یک سلول در جدول تعریف می‌کند
<caption> زیرنوس یک جدول را مشخص می‌کند
<colgroup> گروهی از یک با چند ستون در جدول برای قالب بندی مشخص می‌کند
<col> خصوصیت‌های ستون را برای هر ستون داخل عنصر <colgroup> مشخص می‌کند
<thead> محتوای عنوان را در جدول گروه‌بندی می‌کند
<tbody> محتوای بدنه را در جدول گروه‌بندی می‌کند
<tfoot> محتوای پاورقی را در جدول گروه‌بندی می‌کند
برای دستیابی به لینک کامل همهٔ تگ‌های HTML، از مرجع تگ HTML ما بازدید کنید.


منابع آموزشی