100% کامل شده تا
به‌روزرسانی شده در: ۱۴ روز پیش

جداول در اچ‌تی‌ام‌ال (HTML Tables)

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


یک جدول در HTML شامل سلول‌های جدول در داخل سطرها و ستون‌ها است. [۱]



Responsive demo.svg



تعریف جدول HTML

مثال

یک جدول HTML ساده:

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

مثال

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

مثال

<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<body>

<h2>A basic HTML table</h2>

<table style="width:100%">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

<p>To undestand the example better, we have added borders to the table.</p>

</body>
</html>

Responsive demo.svg



سلول‌های جدول (Table Cells)

هر سلول جدول با برچسب <td> و </td> تعریف شده‌است.

td (سرواژهٔ: Table Data) به معنای جدول داده‌ها است.

محتوای سلول‌ها بین عناصر <td> و </td> در جدول قرار می‌گیرد.

مثال

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

مثال

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

مثال

<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<body>

<h2>TD elements define table cells</h2>

<table style="width:100%">
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

<p>To undestand the example better, we have added borders to the table.</p>

</body>
</html>

Responsive demo.svg


توجه:آنها می‌توانند حاوی انواع عناصر HTML باشند: متن، تصاویر، لیست‌ها، جداول دیگر و غیره

آنها می‌توانند حاوی انواع عناصر HTML باشند: متن، تصاویر، لیست‌ها، جداول دیگر و غیره





ردیف‌های جدول (Table Rows)

هر سطر جدول با یک برچسب <tr> شروع می‌شود و با یک برچسب </tr> خاتمه می‌یابد.

tr (سرواژهٔ: Table Row) به معنای ردیف جدول است.

مثال

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

مثال

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

مثال

<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<body>

<h2>TR elements define table rows</h2>

<table style="width:100%">
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

<p>To undestand the example better, we have added borders to the table.</p>

</body>
</html>

Responsive demo.svg


می‌توانید هر تعداد ردیف در جدول داشته باشید، فقط مطمئن شوید که تعداد سلول‌ها در هر سطر یکسان است.

توجه: مواردی وجود دارد که یک سطر می‌تواند تعداد سلول‌های کمتر یا بیشتر از دیگری داشته باشد. در فصل بعد با آن آشنا خواهید شد.



سربرگ‌های جدول (Table Headers)

گاهی اوقات می‌خواهید سلول‌های شما بعنوان سربرگ باشند، در این موارد از تگ <th> به جای تگ <td> استفاده کنید:

مثال

اجازه دهید اولین ردیف، سربرگ جدول باشد:

<table>
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

مثال

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

مثال

<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<body>

<h2>TH elements define table headers</h2>

<table style="width:100%">
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

<p>To undestand the example better, we have added borders to the table.</p>

</body>
</html>

Responsive demo.svg


به‌طور پیش‌فرض، متن سربرگ در عناصر پررنگ و در مرکز است، اما می‌توانید آن را با CSS تغییر دهید.



تگ‌های جدول اچ‌تی‌ام‌ال (HTML Table Tags)

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

منابع آموزشی