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)


منابع آموزشی





به‌روزرسانی شده: ۳۶ روز پیش