جدول‌های 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> گروه‌بندی ستون‌های جدول را تعریف می‌کند.