HTML <colgroup> 태그

1. HTML colgroup 태그란?
2. colgroup 태그의 기본 문법
3. colgroup 태그의 주요 기능
   • 여러 개의 열을 그룹화
   • span 속성을 사용하여 여러 열을 한 번에 스타일링
4. colgroup 태그의 주요 속성
   • span 속성
5. colgroup 태그와 td 태그 스타일 적용 차이점
6. colgroup 태그를 사용할 때
7. td 태그에서 개별 스타일을 적용할 때
8. colgroup 태그 사용 시 주의 사항
9. colgroup 태그 사용 장점

 

• colgroup 태그는 테이블의 여러 열을 그룹화하여 스타일을 지정하는 데 사용됩니다.
• col 태그와 함께 사용되며, span 속성을 활용해 여러 열을 한 번에 스타일링할 수 있습니다.
• td 태그에 개별 스타일을 적용하는 것보다 유지보수가 쉽습니다.

 

---

 

HTML colgroup 태그란?

HTML colgroup 태그는 HTML table 태그에서 여러 개의 열(column)을 그룹화하고, 해당 열들에 스타일을 적용할 때 사용하는 태그입니다. colgroup 태그 내부에서 col 태그를 사용하여 각 열의 스타일을 지정할 수 있습니다.

 

---

 

colgroup 태그의 기본 문법

<table>
  <colgroup>
    <col style="background-color: lightgray;">
    <col style="background-color: lightblue;">
  </colgroup>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

위 코드에서는 <colgroup> 내부의 <col> 태그를 사용하여 첫 번째 열은 회색, 두 번째 열은 파란색으로 스타일을 지정했습니다.

 

---

 

colgroup 태그의 주요 기능

💡 여러 개의 열을 그룹화

colgroup 태그를 사용하면 특정 열을 그룹화하여 동일한 스타일을 적용할 수 있습니다. 또한 col 태그를 사용하여 개별 열에도 스타일을 지정할 수 있습니다.

 

💡 span 속성을 사용하여 여러 열을 한 번에 스타일링

특정 열을 하나의 col 태그로 묶어서 스타일을 적용할 수 있습니다.

 

---

 

colgroup 태그의 주요 속성

💡 span 속성

• 여러 개의 열(column)을 하나의 col 태그로 묶어 스타일을 지정할 수 있습니다.
• span="n"을 사용하면 해당 col 태그가 n개의 열에 영향을 미칩니다.

 

🌈 span 속성 예제:

<table>
  <colgroup>
    <col span="2" style="background-color: yellow;"> <!-- 첫 번째 & 두 번째 열 적용 -->
    <col style="background-color: lightgray;">  <!-- 세 번째 열 적용 -->
  </colgroup>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

span="2"을 사용하면 첫 번째와 두 번째 열에 같은 스타일(노란색 배경)을 적용할 수 있습니다.

 

---

 

colgroup 태그와 td 태그 스타일 적용 차이점

💡 colgroup 태그를 사용할 때

• 열 전체(column)에 일괄적으로 스타일 적용 가능
• CSS 코드를 단순화하고 유지보수 용이

 

💡 td 태그에서 개별 스타일을 적용할 때

<td style="background-color: yellow;">Data</td>

각각의 <td> 태그에 스타일을 직접 적용해야 하므로 코드가 길어지고 관리가 어려워짐.

 

---

 

colgroup 태그 사용 시 주의 사항

1. 반드시 table 태그 내부에서 사용해야 함.
2. colgroup 태그 내부에는 col 태그만 포함 가능 (텍스트, 다른 태그 포함 불가)
3. 셀 안의 개별 요소(텍스트, 폰트 크기 등)에는 스타일 적용 불가
4. colgroup 태그와 col 태그는 열 전체의 스타일(배경색, 테두리 등)을 적용하지만, 개별 td 태그의 내용(text color, font-size 등)은 직접 지정해야 함.

 

---

 

colgroup 태그 사용 장점

1. 테이블의 특정 열을 그룹화하여 스타일을 쉽게 변경하고 싶을 때
2. HTML 코드를 단순화하고 유지보수를 쉽게 하고 싶을 때
3. 각 td 태그에 개별적으로 스타일을 적용하는 대신, 열 전체에 일괄 적용하고 싶을 때

 

---

 

• [HTML] col 태그
• [HTML] footer 태그
• [HTML] code 태그