3 سال پیش / خواندن دقیقه

آموزش جدول در HTML به زبان ساده + مثال کاربردی

تگ جدول داده ها را به صورت جدول (سطر در ستون) نمایش می دهد. تعداد ستون های زیادی می تواند در یک سطر وجود داشته باشد.

تگ <table> به همراه عناصر<tr> ، <td> و<th> یک جدول برای نمایش داده ها ایجاد می کند.

در هر جدول، سطر جدول با تگ <tr>، سرآیند جدول توسط <th> و همچنین داده های جدول (هر سلول یا خانه) توسط تگ <td> تعریف می شوند.

از جدول های HTML برای مدیریت طراحی صفحه استفاده می شود، مشابه بخش های سرآیند ، نوار پیمایش، محتوای صفحه، پانویس (فوتر) و غیره، اما برای مدیریت طراحی صفحه تگ div به جای تگ جدول توصیه می شود.

تگ های جدول در HTML

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

مثال

<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>

خروجی

First_Name	Last_Name	Marks
Sonoo	Jaiswal	۶۰
James	William	۸۰
Swati	Sironi	۸۲
Chetna	Singh	۷۲

در جدول بالا، ۵سطر، ۳ستون و ۱۵ مقدار (سلول جدول) وجود دارد.

حاشیه ها جدول

دو روش برای تعیین مرز یا حاشیه برای جدول در HTML وجود دارد.

توسط صفتborder در تگ table
توسط صفت border در CSS

۱) صفت border

برای تعیین حاشیه می توان از صفت border در تگ جدول ستفاده کنید، اما این روش توصیه نمی شود.

مثال

<table border=”1″>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>

خروجی

آموزش جدول در HTML به زبان ساده + مثال کاربردی

۲) صفت boder در CSS

در حال حاضر برای تعیین حاشیه در جدول صفت border در CSS توصیه می شود.

<style>
table, th, td {
  border: ۱px solid black;
}
</style>

می توانید با صفت border-collapse تمام خطوط حاشیه ها را در یک حاشیه جمع کنید. این صفت همه حاشیه ها را یکی می کند.

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

خروجی

جدول با فاصله سلولی

می توانید فاصله داده های هر سلول (سلو ل های بدنه و سرآیند) تا حاشیه سلول را با دو روش تعیین کنید:

صفت cellpadding در تگ جدول در HTML
صفت padding در CSS

صفت cellpadding در تگ جدول منسوخ شده و توصیه می شود از CSS استفاده کنید.

مثال

<style>
table, th, td {
  border: ۱px solid pink;
  border-collapse: collapse;
}
th, td {
  padding: ۱۰px;
}
</style>

خروجی

آموزش جدول در HTML به زبان ساده + مثال کاربردی

عرض جدول

می توانیم با استفاده از صفت width در CSS اندازه عرض جدول را تعیین کنیم. مقدار آن را می توان با واحدهای پیکسل یا درصد تعیین کرد.

می توانیم براساس نیاز اندازه عرض جدول را تنظیم کنیم. در مثال زیر صفت width جدول را نمایش می دهد.

table{
     width: ۱۰۰%;
    }

مثال

<!DOCTYPE html>
<html>
<head>
    <title>table</title>
    <style>
        table{
            border-collapse: collapse;
            width: ۱۰۰%;
        }
    th,td{
        border: ۲px solid green;
        padding: ۱۵px;
    }
    </style>
  </head>
<body>
  <table>
    <tr>
        <th>1 header</th>
        <th>1 header</th>
        <th>1 header</th>
    </tr>
    <tr>
        <td>1data</td>
        <td>1data</td>
        <td>1data</td>
    </tr>
    <tr>
        <td>2 data</td>
        <td>2 data</td>
        <td>2 data</td>
    </tr>
    <tr>
        <td>3 data</td>
        <td>3 data</td>
        <td>3 data</td>
    </tr>
</table>
</body>
</html>

خروجی

آموزش جدول در HTML به زبان ساده + مثال کاربردی

ادغام سلول ها در جدول

اگر بخواهید اندازه (عرض) یک سلول بیش از اندازه یک ستون باشد، می توانید از صفت colspan استفاده کنید.

این صفت چندین ستون را با هم ترکیب می کند مقدار صفت colspan تعداد ستون های ادغامی را تعیین می کند.

مثال زیر، یک خانه از جدول با اندازه دو ستون را نمایش می دهد.

کد CSS

<style>
table, th, td {
  border: ۱px solid black;
  border-collapse: collapse;
}
th, td {
  padding: ۵px;
}
</style>

کد HTML

<table style=”width:100%”>
  <tr>
  <th>Name</th>
  <th colspan=”2″>Mobile No.</th>
  </tr>
  <tr>
  <td>Ajeet Maurya</td>
  <td>7503520801</td>
  <td>9555879135</td>
  </tr>
</table>

خروجی

آموزش جدول در HTML به زبان ساده + مثال کاربردی

ادغام سطرها در جدول

اگر بخواهید اندازه (ارتفاع) یک سلول بیش از اندازه یک ردیف باشد، می توانید از صفت rowspan استفاده کنید.

این صفت چندین ردیف را با هم ترکیب می کند. تعداد ردیف های ادغام شده به مقدار صفت rowspan بستگی دارد.

در مثال زیر یک خانه از جدول به اندازه دو ردیف را نشان می دهد.

کد CSS

<style>
table, th, td {
  border: ۱px solid black;
  border-collapse: collapse;
}
th, td {
  padding: ۱۰px;
}
</style>

کد HTML

<table>
<tr><th>Name</th><td>Ajeet Maurya</td></tr>
<tr><th rowspan=”2″>Mobile No.</th><td>7503520801</td></tr>
<tr><td>9555879135</td></tr>
</table>

خروجی

آموزش جدول در HTML به زبان ساده + مثال کاربردی

عنوان جدول

عنوان جدو در بالای آن نمایش داده می شود. فقط باید بعد از تگ table استفاده شود.

مثال

<table>
<caption>Student Records</caption>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
<tr><td>Mike</td><td>Warn</td><td>60</td></tr>
<tr><td>Shane</td><td>Warn</td><td>42</td></tr>
<tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
</table>

خروجی

استایل دهی به ردیف های زوج و فرد جدول

کد css

<style>
table, th, td {
  border: ۱px solid black;
  border-collapse: collapse;
}
th, td {
  padding: ۱۰px;
}
table#alter tr:nth-child(even) {
  background-color: #eee;
}
table#alter tr:nth-child(odd) {
  background-color: #fff;
}
table#alter th {
  color: white;
  background-color: gray;
}
</style>