[HTML] col 태그

1. HTML <col> 태그란?
2. 기본 구조
3. <col> 태그 속성
   • span 속성
4. <col>과 <td> 태그의 스타일 적용 차이점
   • <col> 태그에 스타일 적용할 때
   • <td> 태그에 직접 스타일 적용할 때
5. <col> 태그 주의 사항
6. <col> 태그 장점

 

• <col> 태그는 테이블의 특정 열에 스타일을 적용하는 용도로 사용됩니다.
• <colgroup> 내부에서 사용되며, span 속성을 통해 여러 열을 한 번에 스타일링할 수도 있습니다.
• 개별 <td>에 스타일을 적용하는 것보다 유지보수가 쉽고 깔끔한 코드 작성이 가능합니다.

 

---

 

HTML <col> 태그란?

<col> 태그는 HTML 테이블(<table>)에서 특정 열(column)의 스타일을 지정할 때 사용하는 태그입니다. <colgroup> 태그 내부에서 사용되며, 테이블의 개별 열에 대해 CSS 스타일을 적용하거나 속성을 설정할 수 있습니다.

 

---

 

기본 구조

<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>

위 코드에서는 <col> 태그를 사용하여 첫 번째 열은 회색(lightgray), 두 번째 열은 파란색(lightblue)으로 배경색을 설정했습니다.

 

---

 

<col> 태그 속성

💡 span 속성

• 특정 <col> 태그가 몇 개의 열(column)을 차지할지를 지정합니다.
• 기본값은 1이며, 여러 개의 열을 하나의 <col> 태그로 묶어 스타일을 적용할 수 있습니다.

<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"을 사용하면, 첫 번째 <col> 태그가 첫 번째와 두 번째 열을 함께 스타일링합니다.

 

---

 

<col>과 <td> 태그의 스타일 적용 차이점

💡 <col> 태그에 스타일 적용할 때

• 전체 열(column)에 일괄적인 스타일을 적용할 수 있습니다.
• <td> 또는 <th>에 개별적으로 스타일을 적용할 필요가 없습니다.

 

💡 <td> 태그에 직접 스타일 적용할 때

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

• 개별적으로 스타일을 지정해야 하므로 관리가 어렵습니다.
• <col>을 사용하면 중복 스타일링을 방지할 수 있습니다.

 

---

 

<col> 태그 주의 사항

1. <col> 태그는 반드시 <colgroup> 태그 내부에서 사용해야 합니다.
2. <col> 태그 자체에는 콘텐츠(텍스트 등)를 포함할 수 없습니다.
3. <col> 태그는 열(column) 전체에 스타일을 적용하지만, 개별 셀(cell)마다 다른 스타일을 적용하는 것은 어렵습니다.

 

---

 

<col> 태그 장점

1. 테이블 열마다 다른 스타일을 적용하고 싶을 때
2. CSS를 이용하여 테이블을 깔끔하게 스타일링할 때
3. HTML 구조를 단순화하면서 스타일을 효과적으로 관리하고 싶을 때

 

---

 

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