جداول

---

« صفحهٔ قبل

صفحهٔ بعد »

مثال جدول 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> مشخص می‌شود.

مثال

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

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

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

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

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

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

مثال

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

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

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

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

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

مثال

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

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

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

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

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

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

مثال

th, td {
  padding: 15px;
}

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

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

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

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

مثال

th {
  text-align: left;
}

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

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

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

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

مثال

table {
  border-spacing: 5px;
}

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

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

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

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

مثال

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

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

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

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

مثال

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

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

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

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

مثال

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

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

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

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

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

مثال

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

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

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

table#t01 {
  width: 100%;
  background-color: #f1f1c1;
}

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

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

table#t01 tr:nth-child(even) {
  background-color: #eee;
}
table#t01 tr:nth-child(odd) {
  background-color: #fff;
}
table#t01 th {
  color: white;
  background-color: black;
}

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

خلاصه بخش

• از عنصر <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

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

برای دستیابی به لینک کامل همهٔ تگ‌های HTML، از مرجع تگ HTML ما بازدید کنید.

---

« صفحهٔ قبل

صفحهٔ بعد »