HTML 테이블 열 그룹화 마스터하기 - CSS 로 테이블 열 스타일 지정

소개

HTML <colgroup> 태그는 HTML 테이블에서 하나 이상의 열에 다양한 스타일을 적용하는 데 사용됩니다. <colgroup> 태그를 사용하면 테이블의 모든 셀에서 스타일을 정의할 필요가 없습니다. 이 태그의 span 속성을 사용하면 스타일을 적용하려는 열에 스타일을 적용할 수 있습니다.

이 Lab 에서는 HTML <colgroup> 태그를 사용하여 색상이 지정된 열이 있는 테이블을 만드는 방법을 배웁니다.

참고: index.html에서 코딩을 연습하고 Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

HTML 테이블 생성

먼저, <colgroup> 태그를 사용하여 스타일을 적용하려는 HTML 테이블을 생성합니다. 다음 코드를 HTML 파일에 추가하십시오.

<!doctype html>
<html>
  <head>
    <title>Colored Table</title>
  </head>
  <body>
    <table border="1">
      <caption>
        Colored Table
      </caption>
      <colgroup>
        <col style="background-color: gray;" />
        <col style="background-color: lightblue;" />
        <col style="background-color: lightgreen;" />
      </colgroup>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 2, Column 3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

위 코드는 테두리가 1 이고 캡션이 "Colored Table"인 테이블을 생성합니다. <colgroup> 태그는 세 개의 <col> 태그를 포함하며, 각 태그는 세 개의 열에 서로 다른 색상을 적용합니다. <thead> 태그는 세 개의 열의 제목을 포함하는 세 개의 <th> 태그를 포함합니다. 그리고 <tbody> 태그는 각각 세 개의 열이 있는 두 개의 행을 포함합니다.

더 나은 스타일링을 위한 CSS 작성

이 단계에서는 CSS 를 사용하여 위에서 생성한 테이블에 스타일을 적용합니다.

다음 CSS 코드를 HTML 파일에 추가하십시오.

<!doctype html>
<html>
  <head>
    <title>Colored Table</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
      }
      th {
        background-color: #4169e1;
        color: white;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <caption>
        Colored Table
      </caption>
      <colgroup>
        <col style="background-color: gray;" />
        <col style="background-color: lightblue;" />
        <col style="background-color: lightgreen;" />
      </colgroup>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 2, Column 3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

index.html 파일에서 완성된 코드를 검토하십시오. 각 열에 서로 다른 색상이 있는 세 개의 열로 구성된 테이블을 볼 수 있습니다.

요약

HTML <colgroup> 태그는 HTML 테이블의 하나 이상의 열에 다양한 스타일을 적용하는 데 사용되며, 테이블의 각 셀에서 스타일을 정의할 필요가 없습니다. 이 랩에서는 <colgroup> 태그를 사용하여 색상이 지정된 열이 있는 테이블을 만들고 CSS 를 사용하여 스타일을 적용하는 방법을 배웠습니다.