جدول‌های HTML

می‌توانید از HTML برای ایجاد جدول استفاده کنید.

مثال

جدول
این مثال نشان می‌دهد که چگونه می‌توان جدول در یک مستند HTML ایجاد کرد.
حاشیه جدول
این مثال نمایش می‌دهد که چگونه می‌توان انواع مختلف حاشیه‌های جدول را ایجاد کرد.

(مثال‌های بیشتر را در پایین صفحه پیدا کنید)

جدول

جدول با استفاده از برچسب <table> تعریف می‌شود. هر جدول دارای چندین ردیف است (با استفاده از برچسب <tr> تعریف می‌شود)، هر ردیف به چندین سلول تقسیم می‌شود (با استفاده از برچسب <td> تعریف می‌شود). حرف td به داده‌های جدول (table data) اشاره دارد، یعنی محتوای سلول‌های داده. سلول‌های داده می‌توانند شامل متن، تصاویر، لیست‌ها، پاراگراف‌ها، فرم‌ها، خطوط افقی، جدول‌ها و غیره باشند.

<table border="1">
<tr>
<td>ردیف 1، سلول 1</td>
<td>ردیف 1، سلول 2</td>
</tr>
<tr>
<td>ردیف 2، سلول 1</td>
<td>ردیف 2، سلول 2</td>
</tr>
</table>

در مرورگر به صورت زیر نمایش داده می‌شود:

ردیف 1، سلول 1 ردیف 1، سلول 2
ردیف 2، سلول 1 ردیف 2، سلول 2

جدول و ویژگی حاشیه

اگر ویژگی حاشیه تعریف نشود، جدول حاشیه را نمایش نمی‌دهد. گاهی اوقات این کار مفید است، اما بیشتر اوقات ما می‌خواهیم حاشیه نمایش داده شود.

با استفاده از ویژگی حاشیه برای نمایش یک جدول با حاشیه:

<table border="1">
<tr>
<td>ردیف 1، سلول 1</td>
<td>ردیف 1، سلول 2</td>
</tr>
</table>

عنوان‌های جدول

عنوان‌های جدول با استفاده از برچسب <th> تعریف می‌شوند.

بیشتر مرورگرها عنوان‌های جدول را به عنوان متن فونت تیره و مرکزی نمایش می‌دهند:

<table border="1">
<tr>
<th>عنوان</th>
<th>عنوان دیگری</th>
</tr>
<tr>
<td>ردیف 1، سلول 1</td>
<td>ردیف 1، سلول 2</td>
</tr>
<tr>
<td>ردیف 2، سلول 1</td>
<td>ردیف 2، سلول 2</td>
</tr>
</table>

در مرورگر به صورت زیر نمایش داده می‌شود:

عنوان عنوان دیگری
ردیف 1، سلول 1 ردیف 1، سلول 2
ردیف 2، سلول 1 ردیف 2، سلول 2

خللی خالی در جدول

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

<table border="1">
<tr>
<td>ردیف 1، سلول 1</td>
<td>ردیف 1، سلول 2</td>
</tr>
<tr>
<td></td>
<td>ردیف 2، سلول 2</td>
</tr>
</table>

مرورگر ممکن است به این صورت نمایش دهد:

خللی خالی در جدول

توجه:این سلول خالی‌ای که حاشیه آن نمایش داده نمی‌شود. برای جلوگیری از این مسئله، یک فضای نگهدارنده خالی در سلول‌های خالی اضافه کنید تا حاشیه نمایش داده شود.

<table border="1">
<tr>
<td>ردیف 1، سلول 1</td>
<td>ردیف 1، سلول 2</td>
</tr>
<tr>
<td> </td>
<td>ردیف 2، سلول 2</td>
</tr>
</table>

در مرورگر به صورت زیر نمایش داده می‌شود:

ردیف 1، سلول 1 ردیف 1، سلول 2
　 ردیف 2، سلول 2

مثال‌های بیشتر

جداول بدون حاشیه
این مثال یک جدول بدون حاشیه را نشان می‌دهد
سربرگ جدول در جدول
این مثال نشان می‌دهد که چگونه می‌توان سربرگ جدول را نمایش داد.
سلولهای خالی
این مثال نشان می‌دهد که چگونه می‌توان از " " برای مدیریت سلولهای خالی استفاده کرد.
جدول با عنوان
این مثال یک جدول با عنوان (caption) را نشان می‌دهد
سلولهای جدولی که از چند ردیف یا چند ستون عبور می‌کنند
این مثال نشان می‌دهد که چگونه می‌توان سلولهای جدولی که از چند ردیف یا چند ستون عبور می‌کنند را تعریف کرد.
برچسب‌های داخل جدول
این مثال نشان می‌دهد که چگونه می‌توانید عناصر را در داخل عناصر مختلف نمایش دهید.
حاشیه سلول (Cell padding)
این مثال نشان می‌دهد که چگونه از ویژگی Cell padding برای ایجاد فضای خالی بین محتوای سلول و حاشیه آن استفاده می‌شود.
فاصله سلول (Cell spacing)
این مثال نشان می‌دهد که چگونه از ویژگی Cell spacing برای افزایش فاصله بین سلولها استفاده می‌شود.
رنگ پس‌زمینه یا تصویر پس‌زمینه به جدول اضافه می‌کند
این مثال نشان می‌دهد که چگونه می‌توان به جدول پس‌زمینه اضافه کرد.
رنگ پس‌زمینه یا تصویر پس‌زمینه به سلولهای جدول اضافه می‌کند
این مثال نشان می‌دهد که چگونه می‌توان به یک یا چند سلول جدول پس‌زمینه اضافه کرد.
محتوای داخل سلولهای جدول را مرتب می‌کند
این مثال نشان می‌دهد که چگونه از ویژگی "align" برای قرار دادن محتوای سلولها به گونه‌ای که یک جدول زیبا ایجاد شود استفاده می‌شود.
ویژگی فریم (frame)
این مثال نشان می‌دهد که چگونه از ویژگی "frame" برای کنترل حاشیه‌های اطراف جدول استفاده می‌شود.

برچسب جدول

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