آموزش HTML - عنوان‌های جدول

سرعنوان‌ها و عنوان‌های جدول

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

سرعنوان جدول بخش مهمی از آن است که برچسب‌های ستون‌ها را مشخص می‌کند. از عنصر <th> (سرعنوان جدول) برای تعریف سرعنوان‌های جدول استفاده می‌شود.

عنوان‌ها در جدول‌ها برای ارائه یک عنوان یا توضیح درباره جدول به کار می‌روند. عنصر <caption> بلافاصله پس از تگ آغازین جدول قرار می‌گیرد.

تگ <caption> در HTML5 و XHTML منسوخ‌شده محسوب می‌شود. این بدان معناست که بیشتر مرورگرهای وب همچنان از آن پشتیبانی می‌کنند، اما استفاده از آن در صفحات وب جدید توصیه نمی‌شود. اگر در حال نوشتن کد جدید هستید، بهتر است به‌جای آن از عناصر figure و figcaption استفاده کنید. عنصر figure برای گروه‌بندی محتوای مرتبط و عنصر figcaption برای ارائه عنوانی برای آن محتوا به کار می‌رود.

تگ <caption> در HTML5 و XHTML منسوخ‌شده محسوب می‌شود. این بدان معناست که بیشتر مرورگرهای وب همچنان از آن پشتیبانی می‌کنند، اما استفاده از آن در صفحات وب جدید توصیه نمی‌شود. اگر در حال نوشتن کد جدید هستید، بهتر است به‌جای آن از عناصر figure و figcaption استفاده کنید. عنصر figure برای گروه‌بندی محتوای مرتبط و عنصر figcaption برای ارائه عنوانی برای آن محتوا به کار می‌رود.

نحوه نوشتن کد برای ایجاد سرعنوان و عنوان جدول

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

<table>
<caption>Description of table</caption>
<tr>
   <th>heading 1</th>
   <th>heading 2</th>
   <th>heading 3</th>
</tr>
</table>

تعریف یک ردیف سرعنوان برای جدول

از تگ <th> برای نمایش سرعنوان‌های جدول استفاده می‌شود و این تگ معمولاً درون عنصر <tr> (ردیف جدول) قرار می‌گیرد. برخلاف تگ <td> (داده جدول) که برای سلول‌های معمولی استفاده می‌شود، تگ <th> مخصوص سرعنوان‌ها است. در بیشتر موارد، ردیف اول جدول به‌عنوان ردیف سرعنوان در نظر گرفته می‌شود.

مثال

یک جدول ساده HTML را در نظر بگیرید که سرعنوان‌های «نام» و «حقوق» را دارد:

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML Table Header</title>
</head>

<body>
   <table border="1">
   <tr>
      <th>Name</th>
      <th>Salary</th>
   </tr>
   <tr>
      <td>Ramesh Raman</td>
      <td>5000</td>
   </tr>
   <tr>
      <td>Shabbir Hussein</td>
      <td>7000</td>
   </tr>
   </table>
</body>

</html>

استایل‌دهی به سرعنوان‌های جدول

استایل‌دهی به سرعنوان‌های جدول می‌تواند ظاهر آن را جذاب‌تر کند. می‌توان از CSS برای سفارشی‌سازی ظاهر عناصر <th> استفاده کرد. در مثال زیر، یک استایل ساده CSS درون تگ <style> در بخش <head> اضافه شده است تا رنگ پس‌زمینه و تراز متن سرعنوان‌های جدول را تغییر دهد.

مثال

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

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Styled HTML Table Header</title>
   <style>
   th {
      background-color: #4CAF50;
      color: white;
      text-align: left;
      padding: 8px;
   }
   </style>
</head>

<body>
   <table border="1">
   <tr>
      <th>Name</th>
      <th>Salary</th>
   </tr>
   <tr>
      <td>Ramesh Raman</td>
      <td>5000</td>
   </tr>
   <tr>
      <td>Shabbir Hussein</td>
      <td>7000</td>
   </tr>
   </table>
</body>

</html>

استفاده از سلول‌های سرعنوان در هر ردیف

اگرچه استفاده از <th> در ردیف اول جدول رایج است، اما می‌توانید با توجه به نیاز خود از آن در هر ردیفی استفاده کنید. این انعطاف‌پذیری امکان ایجاد جدول‌های پیچیده با چندین ردیف سرعنوان یا سرعنوان‌هایی در میان ردیف‌های جدول را فراهم می‌کند.

مثال

در این مثال، سرعنوان‌های جدول را در ردیف اول ایجاد می‌کنیم:

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Styled HTML Table Header</title>
   <style>
      th {
         background-color: #4CAF50;
         color: white;
         text-align: left;
         padding: 8px;
      }
   </style>
</head>

<body>
   <table border="1">
   <tr>
      <th>Name</th>
      <th>Salary</th>
   </tr>
   <tr>
      <td>Ramesh Raman</td>
      <td>5000</td>
   </tr>
   <tr>
      <th>Additional Details</th>
      <th>Specialization</th>
   </tr>
   <tr>
      <td>Technical Lead</td>
      <td>Web Development</td>
   </tr>
   </table>
</body>

</html>

سرعنوان جدول با استفاده از عنصر <thead>

از تگ <thead> برای گروه‌بندی سلول‌های سرعنوان جدول استفاده می‌شود تا بتوان یک استایل CSS مشترک را روی آن‌ها اعمال کرد.

تگ <thead> معمولاً درون عنصر <table> قرار می‌گیرد و شامل یک یا چند عنصر <tr> است که هرکدام به نوبه خود عناصر <th> را در بر می‌گیرند. این عناصر <th> سرعنوان‌های ستون‌ها را مشخص می‌کنند.

مثال

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

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML Table Header</title>
</head>

<body>
   <table border=1>
      <thead>
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
      </thead>
      <!-- Table body goes here -->
   </table>
</body>

</html>

تعریف چندین ردیف سرعنوان

می‌توانید چندین عنصر <tr> را درون <thead> قرار دهید تا چندین ردیف سرعنوان ایجاد کنید. این روش زمانی مفید است که ساختار جدول شما به سلسله‌مراتب پیچیده‌تری از سرعنوان‌ها نیاز داشته باشد.

مثال

در این مثال، دو ردیف را به‌عنوان سرعنوان جدول تعریف می‌کنیم:

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML Table Header</title>
</head>

<body>
<table border=1>
   <thead>
      <tr>
         <th colspan=2>Tutorialspoint</th>
      </tr>
      <tr>
         <th>Role</th>
         <th>Experience</th>
      </tr>
   </thead>
   <tr>
      <td>Technical Lead</td>
      <td>5 Years</td>
   </tr>
   <tr>
      <td>Web Developer</td>
      <td>2 Years</td>
   </tr>
</table>
</body>

</html>

استفاده از تگ «<colgroup>» درون «<thead>»

می‌توان از تگ <colgroup> درون <thead> برای گروه‌بندی مجموعه‌ای از ستون‌ها و اعمال استایل CSS یا ویژگی‌ها به تمام ستون‌های گروه استفاده کرد.

مثال

در این مثال، با گروه‌بندی دو ستون اول جدول در تگ colgroup، روی آن‌ها استایل اعمال می‌کنیم.

<!DOCTYPE html>
<html lang="en">

<head>
   <style>
      .col1 {
         background-color: #f2f2f2;
      }
   </style>
</head>

<body>
   <h1>Table with colgroup</h1>
   <table border="1">
      <colgroup class="col1">
         <col  style="width: 150px;">
         <col  style="width: 200px;">
      </colgroup>
         <col  style="width: 150px;">
         <col  style="width: 100px;">
      <thead>
         <tr>
               <th>Product ID</th>
               <th>Product Name</th>
               <th>Category</th>
               <th>Price</th>
         </tr>
      </thead>
      <tbody>
         <tr>
               <td>1</td>
               <td>Smartphone</td>
               <td>Electronics</td>
               <td>$299.00</td>
         </tr>
         <tr>
               <td>2</td>
               <td>Office Chair</td>
               <td>Furniture</td>
               <td>$89.00</td>
         </tr>
         <tr>
               <td>3</td>
               <td>Laptop</td>
               <td>Electronics</td>
               <td>$999.00</td>
         </tr>
      </tbody>
   </table>
</body>

</html>   

ترکیب با تگ‌های «<tfoot>» و «<tbody>»

تگ <thead> اغلب همراه با <tfoot> (پاورقی جدول) و <tbody> (بدنه جدول) استفاده می‌شود تا ساختاری کامل برای جدول ایجاد شود.

مثال

در کد زیر، ساختار جدول، محتوای سرعنوان، بدنه و پاورقی را از یکدیگر جدا می‌کند تا سازمان‌دهی بهتری داشته باشد.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML Table</title>
</head>

<body>
   <table border>
      <thead>
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
      </thead>

      <tbody>
         <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
         </tr>
      </tbody>

      <tfoot>
         <tr>
            <td>Total</td>
            <td></td>
            <td></td>
         </tr>
      </tfoot>
   </table>
   <p>
      Footers are generally used to enter 
      sum of values of each column.
   </p>
</body>

</html>

تفاوت بین <thead> و <th>

موارد زیر تفاوت‌های بین <thead> و <th> را مشخص می‌کنند:

• تگ <thead> یک عنصر ساختاری است که برای گروه‌بندی محتوای سرعنوان استفاده می‌شود، درحالی‌که <th> عنصری در سطح سلول است که یک سلول سرعنوان را تعریف می‌کند.
• استفاده از <th> درون <thead> رایج است، اما می‌توان از <th> خارج از <thead> نیز برای تعریف سرعنوان‌ها در ردیف‌های معمولی استفاده کرد.
• استفاده از <thead> اختیاری است؛ بااین‌حال، به‌کارگیری آن ساختار معنایی جدول را بهبود می‌بخشد.

افزودن عنوان به جدول HTML

تگ caption به‌عنوان عنوان یا توضیح جدول عمل می‌کند و در بالای جدول نمایش داده می‌شود.

مثال

در کد زیر، یک عنوان را در بالای جدول HTML نمایش می‌دهیم:

<!DOCTYPE html>

<html>
<head>
   <title>HTML Table Caption</title>
</head>

<body>
   <table border="1">
      <caption>This is the caption</caption>
      <tr>
         <td>row 1, column 1</td>
         <td>row 1, column 2</td>
      </tr>
      <tr>
         <td>row 2, column 1</td>
         <td>row 2, column 2</td>
      </tr>
   </table>
</body>

</html>

سرعنوان، بدنه و پاورقی جدول

جدول‌ها را می‌توان به سه بخش تقسیم کرد: سرعنوان، بدنه و پاورقی. سرعنوان و پاورقی تا حد زیادی شبیه سرصفحه و پاصفحه در یک سند متنی هستند که در تمام صفحات یکسان باقی می‌مانند، درحالی‌که بدنه، محتوای اصلی جدول را در خود جای می‌دهد.

سه عنصر مورد استفاده برای جداسازی سرعنوان، بدنه و پاورقی جدول عبارت‌اند از:

• تگ <thead> برای ایجاد یک بخش مجزا برای سرعنوان جدول.
• تگ <tbody> برای مشخص کردن بدنه اصلی جدول.
• تگ <tfoot> برای ایجاد یک بخش مجزا برای پاورقی جدول.

یک جدول می‌تواند شامل چندین عنصر <tbody> باشد تا صفحات یا گروه‌های مختلف داده را مشخص کند. بااین‌حال، توجه داشته باشید که تگ‌های <thead> و <tfoot> باید پیش از <tbody> قرار بگیرند.

مثال

در این مثال، یک جدول HTML شامل سرعنوان، بدنه و پاورقی ایجاد می‌کنیم:

<!DOCTYPE html>
<html>

<head>
   <title>HTML Table</title>
</head>

<body>
   <table border="1" width="100%">
      <thead>
         <tr>
            <th colspan="4">
               This is the head of the table
            </th>
         </tr>
      </thead>
      <tfoot>
         <tr>
            <td colspan="4">
               This is the foot of the table
            </td>
         </tr>
      </tfoot>
      <tbody>
         <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
         </tr>
         <tr>
            <td>Cell 5</td>
            <td>Cell 6</td>
            <td>Cell 7</td>
            <td>Cell 8</td>
         </tr>
      </tbody>
   </table>
</body>

</html>