برچسب <table> در اچ‌تی‌ام‌ال

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< مرجع HTML:تگ‌ها(تغییرمسیر از تگ table)
پرش به ناوبری پرش به جستجو
جدول را تعریف می‌کند
معرفی شده در نسخهٔ:۲
حذف شده در نسخهٔ: هنوز در حال استفاده است
ویژگی‌های مجاز:به پائین مراجعه کنید
تنظیمات پیش‌فرض CSS:به پائین مراجعه کنید

{{منو اسکرول چپ|نام منو={{مرجع منو اچ‌تی‌ام‌ال|expanded=مرجع}}}}

مثال

یک جدول سادهٔ اچ‌تی‌ام‌ال، دارای دو ستون و دو ردیف:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>


مثال‌های بیشتری از «مشاهدهٔ نتیجه» در زیر.

تعریف و کاربرد

برچسب <table> یک جدول را در اچ‌تی‌ام‌ال تعریف می‌کند.[۱]

یک کد اچ‌تی‌ام‌ال از یک عنصر <table> و یک یا چند عنصر <tr> ،<th> و <td> تشکیل شده‌است.

عنصر <tr> یک ردیف از جدول را تعریف می‌کند، عنصر <th> سرآمد (header) یک جدول را تعریف می‌کند، و عنصر <td> یک سلول از جدول را تعریف می‌کند.

یک جدول اچ‌تی‌ام‌ال پیچیده‌تر می‌تواند همچنین دارای عنصرهای <caption> ،<colgroup> ،<thead> ،<tfoot> و <tbody> باشد.

توجه: از جدول‌های برای طرح‌بندی صفحه نباید استفاده کرد! به شکل تاریخی، برخی از نویسندگان وب از جدول‌ها در اچ‌تی‌ام‌ال بعنوان راهی برای کنترل طرح‌بندی صفحه‌شان، استفادهٔ نابه‌جا می‌کرده‌اند. هرچند که انواع جایگزین‌ها به‌جای استفاده از جدول برای طرح‌بندی وجود دارد، که در درجهٔ اول استفاده از CSS است.

پشتیبانی مرورگر

عنصر Chrome Internet Explorer / Edge Firefox Safari Opera
<table> بله بله بله بله بله

ویژگی‌های سراسری

همچنین برچسب <table> از ویژگی‌های سراسری (Global Attributes) در اچ‌تی‌ام‌ال پشتیبانی می‌کند.

ویژگی‌های رویداد

همچنین برچسب <table> از ویژگی‌های رویداد (Event Attributes) در اچ‌تی‌ام‌ال پشتیبانی می‌کند.

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

مثال

چگونه لبه‌ها (border) را به جدول اضافه کنیم (با CSS):

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

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>


مثال

چگونه یک جدول را راست‌چین (right-align) کنیم (با CSS):

<table style="float:right">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>


مثال

چگونه یک جدول را وسط‌چین (center-align) کنیم (با CSS):

<head>
<style>
table, th, td {
  border: 1px solid black;
}
table.center {
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>

<table class="center">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>|showlinenumbers=y|lang=html5|title=|dars=ref_html|link=|textbutton=مشاهدهٔ نتیجه»|highlight=}}

===مثال===
چگونه رنگ پس‌زمینه را به یک جدول اضافه کنیم (با CSS):{{س:خ:د|source=<table style="background-color:#00FF00">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>|showlinenumbers=y|lang=html5|title=|dars=ref_html|link=|textbutton=مشاهدهٔ نتیجه»|highlight=}}

===مثال===
چگونه یک لایه‌گذاری {{معادل زبان/ان|padding}} به جدول اضافه کنیم (با CSS):{{س:خ:د|source=<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}

th, td {
  padding: 10px;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>


مثال

چگونه پهنای جدول را تنظیم کنیم (با CSS):

<table style="width:400px">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>


مثال

چگونه سرآمد (header) جدول را ایجاد کنیم:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john.doe@example.com</td>
    <td>123-45-678</td>
  </tr>
</table>


مثال

چگونه یک جدول با عنوان ایجاد کنیم:

<table>
  <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>$80</td>
  </tr>
</table>


مثال

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

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th colspan="2">Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john.doe@example.com</td>
    <td>123-45-678</td>
    <td>212-00-546</td>
  </tr>
</table>


صفحات مرتبط

آموزش اچ‌تی‌ام‌آل: جدول‌های اچ‌تی‌ام‌ال (HTML Tables)

مرجع DOM اچ‌تی‌ام‌ال: شیء جدول (Table Object)

آموزش CSS: سبک‌دهی به جدول‌ها (Styling Tables)

تنظیمات پیش‌فرض CSS

بیشتر مرورگرها عنصر <table> را با مقادیر پیش‌فرض زیر نمایش می‌دهند:

مثال

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}


منابع آموزشی