100% کامل شده تا

تگ Colgroup - جدول اچ‌تی‌ام‌ال (HTML Table Colgroup)

از موتو کد، دانشنامهٔ برنامه‌نویسی


از عنصر <colgroup> برای استایل‌دهی به ستون‌های خاص یک جدول استفاده می‌شود.[۱]


Colgroup در جدول HTML

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

MON TUE WED THU FRI SAT SUN
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28


عنصر <colgroup> باید به عنوان ظرفی برای خصوصیات ستون استفاده شود.

هر گروه با یک عنصر <col> مشخص شده‌است.

ویژگی span مشخص می‌کند که یک گروه ستون به چه تعداد ستونی باید گسترش یابد.

ویژگی style، وظیفه استایل‌دهی به ستون‌ها را ارائه می‌دهد.

توجه: انتخاب بسیار محدودی از ویژگی‌های مجاز CSS برای خصوصیات colgroups وجود دارد.

مثال

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...

مثال

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Colgroup</h2>
<p>Add the a colgroup with a col element that spans over two columns to define a style for the two columns:</p>

<table style="width: 100%;">
<colgroup>
  <col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>

</body>
</html>

Responsive demo.svg


توجه: تگ<colgroup> باید فرزند عنصر <table> باشد و باید قبل از هر عنصر جدول دیگر مانند: <thead>، <tr>، <td> و غیره قرار گیرد، اما می‌تواند بعد از عنصر <caption> بیاید.

ویژگی‌های مجاز سی‌اس‌اس (Legal CSS Properties)

فقط تعداد بسیار محدودی از ویژگی‌های CSS هستند که مجاز به استفاده در colgroup می‌باشند:

ویژگی width

ویژگی visibility

ویژگی background

ویژگی border

سایر خصوصیات CSS هیچ تأثیری بر جداول شما نخواهند داشت.

چندین عنصر Col

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

مثال

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
    <col span="3" style="background-color: pink">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...

مثال

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Multiple Col Elements</h2>
<p>Add multiple col elements in the colgroup:</p>

<table style="width: 100%;">
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
    <col span="3" style="background-color: pink">
  </colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>

</body>
</html>

Responsive demo.svg


Colgroupهای خالی

اگر می‌خواهید ستون‌های جدول را بگونه‌ای تظیم کنید تا وسط‌چین شوند، قبل از آن یک عنصر <col> «خالی» (بدون استایل)، برای ستون‌ها بسازید:

مثال

<table>
  <colgroup>
    <col span="3">
    <col span="2" style="background-color: pink">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...

مثال

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Empty Colgroups</h2>
<p>Add "empty" col elements that represents the columns before the columns you want to style:</p>

<table style="width: 100%;">
<colgroup>
  <col span="3">
  <col span="2" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>

</body>
</html>

Responsive demo.svg


مخفی کردن ستون‌ها (Hide Columns)

می‌توانید ستون‌ها را با ویژگی visibility: collapse مخفی کنید:

مثال

<table>
  <colgroup>
    <col span="2">
    <col span="3" style="visibility: collapse">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...

مثال

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Hide Columns</h2>
<p>You can hide specific columns with the visibility property:</p>

<table style="width: 100%;">
<colgroup>
    <col span="2">
    <col span="3" style="visibility: collapse">
  </colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>

<p><b>Note:</b> The table columns does not collapse properly in Safari browsers.</p>
</body>
</html>

Responsive demo.svg



منابع آموزشی




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