HTML — جداول - سرفصل ها (Table Headers)

آخرین بروزرسانی: 1404/07/05

قبلی: جداول - اندازه ها (Table Sizes) بعدی: جداول - فاصله گذاری و حاشیه گذاری (Table Padding & Spacing)

جداول - سرفصل ها (Table Headers) در HTML

در HTML می توان برای جداول (Tables) سرفصل یا همان سرستون (Table Header) تعریف کرد. این کار با استفاده از تگ <th> انجام می شود که محتوای آن به صورت پیش فرض ضخیم و وسط چین نمایش داده می شود.

ایجاد سرفصل جدول

برای افزودن سرفصل به جدول، کافی است سلول ها را به جای <td> با <th> تعریف کنید.

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
</table>

سرفصل عمودی (Vertical Headers)

می توانید اولین ستون جدول را به عنوان سرفصل در نظر بگیرید. برای این کار از تگ <th> در ابتدای هر ردیف استفاده کنید.

<table>
  <tr>
    <th>Firstname</th>
    <td>Jill</td>
    <td>Eve</td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td>Smith</td>
    <td>Jackson</td>
  </tr>
</table>

تراز متن سرفصل ها

به صورت پیش فرض متن در <th> وسط چین است. می توانید با ویژگی CSS به صورت چپ چین یا راست چین تغییر دهید.

th {
  text-align: left;
}

سرفصل برای چند ستون

اگر بخواهید یک سرفصل چند ستون را پوشش دهد، باید از ویژگی colspan استفاده کنید.

<table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
</table>

نکته: برای ترکیب سلول ها می توانید از colspan و rowspan استفاده کنید.

افزودن عنوان به جدول (Table Caption)

برای افزودن یک عنوان کلی به جدول از تگ <caption> استفاده کنید. این تگ باید بلافاصله بعد از <table> نوشته شود.

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

خلاصه

سرفصل ها با <th> تعریف می شوند.
سرفصل می تواند افقی یا عمودی باشد.
برای چند ستون از colspan استفاده کنید.
برای کل جدول از <caption> بهره ببرید.

برای یادگیری بیشتر به بخش اندازه جدول در HTML و فاصله گذاری جدول در HTML مراجعه کنید.