آموزش HTML - گروه‌بندی ستون‌های جدول

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

در HTML، از عنصر <colgroup> برای تعریف گروهی از ستون‌ها در یک جدول استفاده می‌شود. این عنصر به شما امکان می‌دهد ویژگی‌ها را به‌طور هم‌زمان روی چندین ستون اعمال کنید و روشی کارآمدتر برای استایل‌دهی یا قالب‌بندی ستون‌ها در اختیار داشته باشید.

تگ <colgroup>

عنصر <colgroup> اغلب همراه با عنصر <col> استفاده می‌شود. در این حالت، هر تگ <col> نشان‌دهنده یک ستون مشخص درون گروه است. این گروه‌بندی خوانایی را افزایش می‌دهد و اعمال استایل‌ها یا ویژگی‌ها به ستون‌های مشخص در جدول را ساده‌تر می‌کند.

نحو

در ادامه، نحو استفاده از <colgroup> همراه با تگ <table> آمده است:

<table>
  <colgroup>
    <col span="value" style="width: ...;">
    <col style="...">
    <!-- More <col> elements... -->
  </colgroup>
  <!-- Other table elements such as <thead>, <tbody>, ... -->
</table>

استفاده از تگ <colgroup> در جدول HTML

استفاده از <colgroup> در HTML شامل مراحل زیر است:

۱. درج تگ <colgroup>

تگ <colgroup> را درون عنصر <table> قرار دهید. این تگ معمولاً در داخل بخش <thead> (سرآیند جدول) یا بخش <tbody> (بدنه جدول) قرار می‌گیرد.

<table>
  <colgroup>
    <!-- Column definitions -->
  </colgroup>
  <thead>
    <!-- Table headers -->
  </thead>
  <tbody>
    <!-- Table rows -->
  </tbody>
</table>

۲. تعریف ستون‌ها

درون تگ <colgroup>، از یک یا چند تگ <col> برای نمایش هر ستون استفاده کنید. ویژگی‌ها یا استایل‌های موردنظر ستون‌ها را درون این تگ‌های <col> مشخص کنید.

<table>
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
  <!-- Table content -->
</table>

۳. اعمال ویژگی‌ها یا استایل‌ها

با افزودن ویژگی‌هایی مانند span، width، style یا class به تگ‌های <col>، ویژگی‌ها یا استایل‌های ستون‌ها را تعریف کنید.

<table>
  <colgroup>
    <col style="background-color: lightgrey;" span="2"> <!-- First two columns -->
    <col style="background-color: lightblue;"> <!-- Third column -->
  </colgroup>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

نمونه‌ای از گروه‌بندی ستون‌های جدول در HTML

در این مثال، تگ <colgroup> دو ستون با عرض‌های متفاوت تعریف می‌کند و استایل‌ها با استفاده از تگ‌های <col> روی ستون‌ها اعمال می‌شوند. ردیف دوم جدول با استفاده از یک کلاس CSS برجسته شده است.

<!DOCTYPE html>
<html>
<body>
   <table border=1>
      <colgroup>
         <col style="width: 30%;">
         <col style="width: 70%;">
      </colgroup>
      <thead>
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Row 1, Col 1</td>
            <td>Row 1, Col 2</td>
         </tr>
         <tr class="highlight">
            <td>Row 2, Col 1</td>
            <td>Row 2, Col 2</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

ویژگی‌های CSS برای تگ <colgroup>

در HTML، عنصر <colgroup> امکان استفاده از برخی ویژگی‌های مشخص CSS را برای بهبود نمایش ستون‌های جدول فراهم می‌کند. ویژگی‌های CSS مجازی که می‌توان درون <colgroup> استفاده کرد، عبارت‌اند از:

• ویژگی width - این ویژگی عرض ستون‌های درون <colgroup> را تعیین می‌کند. با استفاده از آن می‌توانید عرض نسبی یا مطلق هر ستون را مشخص کنید.

• ویژگی visibility - از این ویژگی می‌توان برای کنترل قابل‌مشاهده بودن ستون‌های درون <colgroup> استفاده کرد. می‌توانید مقدار آن را روی "hidden" تنظیم کنید تا یک ستون نامرئی شود.

• ویژگی‌های پس‌زمینه - ویژگی‌های پس‌زمینه، مانند background-color، برای اعمال استایل پس‌زمینه به ستون‌ها استفاده می‌شوند. این کار می‌تواند ظاهر بصری جدول را جذاب‌تر کند.

• ویژگی‌های حاشیه - ویژگی‌های حاشیه، مانند border-color و border-width، امکان سفارشی‌سازی حاشیه‌های اطراف ستون‌ها را فراهم می‌کنند. این ویژگی‌ها برای ایجاد مرزهای بصری مشخص و منظم مفید هستند.

تلاش برای اعمال سایر ویژگی‌های CSS تأثیری بر استایل ستون‌های جدول نخواهد داشت. بنابراین، هنگام استایل‌دهی جدول‌ها با استفاده از <colgroup>، برای دستیابی به چیدمان و ظاهر دلخواه، روی ویژگی‌های قابل‌استفاده تمرکز کنید.

مثال

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      table {
         width: 100%;
         border-collapse: collapse;
      }
      colgroup {
         /* Setting width for columns */
         width: 20%;
         background-color: #f0f0f0;
         /* Background color for columns */
         visibility: visible;
         /* Making columns visible */
         border: 2px solid #3498db;
         /* Border around columns */
      }
      col {
         /* Additional styling for individual columns */
         background-color: #ecf0f1;
         border: 1px solid #bdc3c7;
      }
      td,
      th {
         border: 1px solid #dddddd;
         text-align: left;
         padding: 8px;
      }
   </style>
</head>
<body>
   <table>
      <colgroup>
         <col>
         <col style="width: 30%;">
         <col>
      </colgroup>
      <thead>
         <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
         </tr>
         <tr>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

چندین عنصر Col

عنصر <colgroup> در HTML به شما امکان می‌دهد مجموعه‌ای از ستون‌ها را در یک جدول گروه‌بندی کرده و استایل‌ها را به‌صورت یکپارچه روی آن‌ها اعمال کنید. درون <colgroup> می‌توانید از چندین عنصر <col> برای تعریف استایل‌های متفاوت برای ستون‌های جداگانه استفاده کنید.

مثال

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      col {
         /* Additional styling for individual columns */
         background-color: #ecf0f1;
         border: 1px solid #bdc3c7;
      }
   </style>
</head>
<body>
   <table border=5>
      <colgroup>
         <col style="width: 20%;">
         <col style="width: 30%;">
         <col style="width: 50%;">
      </colgroup>
      <thead>
         <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
         </tr>
         <tr>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

عنصر <colgroup> شامل سه عنصر <col> است که هرکدام دارای یک استایل مشخص برای ویژگی 'width' هستند و عرض ستون‌های جداگانه را تعیین می‌کنند.

گروه‌های ستون خالی

در HTML، می‌توان از عنصر <colgroup> برای تعریف گروهی از ستون‌ها در یک جدول استفاده کرد. یک عنصر <colgroup> خالی می‌تواند به‌عنوان جایگاهی ساختاری برای استایل‌دهی احتمالی یا استفاده در آینده به کار رود. اگرچه این عنصر شامل عناصر صریح <col> نیست، همچنان می‌تواند بر ساختار کلی جدول تأثیر بگذارد.

مثال

در ادامه، مثالی ساده از استفاده از یک عنصر <colgroup> خالی ارائه شده است. در این مثال، عنصر <colgroup> خالی است، اما به‌عنوان جایگاهی برای استایل‌دهی احتمالی در آینده عمل می‌کند. برای کل عنصر <colgroup> یک رنگ پس‌زمینه و یک حاشیه تعریف شده است. عناصر <col> به‌طور صریح استفاده نشده‌اند، اما استایل آن‌ها را می‌توان برای استفاده در آینده یا حفظ یکپارچگی ساختار، درون <colgroup> تعریف کرد.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      colgroup {
         /* Styling for the colgroup (can be empty) */
         background-color: #f0f0f0;
         /* Background color for the entire colgroup */
         border: 2px solid #3498db;
         /* Border around the entire colgroup */
      }
      /* Additional styling for individual columns */
      col {
         background-color: #ecf0f1;
         border: 1px solid #bdc3c7;
      }
   </style>
</head>
<body>
   <table border=3>
      <colgroup></colgroup>
      <thead>
         <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
         </tr>
         <tr>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
         </tr>
      </tbody>
   </table>
</body>
</html>