HTML 에서 효과적인 테이블 푸터 생성 방법

소개

HTML 에서 <tfoot> 태그를 사용하여 테이블의 푸터 (footer) 내용을 그룹화할 수 있습니다. 테이블 푸터는 요약 정보, 설명 노트 또는 주석을 포함할 수 있습니다. <tfoot> 태그는 <table> 태그의 자식 중 하나이며, <thead> 및 <tbody> 태그와 함께 사용됩니다. 이 랩에서는 <tfoot> 태그를 사용하여 HTML 에서 테이블 푸터를 만드는 방법을 배웁니다.

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

기본 테이블 구조 생성

테이블 헤더 (header), 테이블 바디 (body) 및 테이블 푸터 (footer) 섹션을 포함하는 기본 테이블 구조를 생성하는 것으로 시작합니다.

<!doctype html>
<html>
  <head>
    <title>Table Footer using tfoot Tag</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>35</td>
          <td>Male</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>28</td>
          <td>Female</td>
        </tr>
        <tr>
          <td>David</td>
          <td>42</td>
          <td>Male</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">Table Footer</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

위 코드에서는 이름, 나이, 성별의 세 개의 열 (column) 을 가진 기본 테이블 구조를 생성했습니다. 또한 테이블에 세 개의 데이터 행 (row) 을 추가했습니다. <tfoot> 태그는 세 개의 열에 걸쳐 있는 하나의 셀 (<td>) 을 가진 하나의 행 (colspan="3") 만 포함합니다.

테이블 푸터에 내용 추가

기본 테이블 구조를 생성한 후, <tfoot> 태그에 내용을 추가할 수 있습니다.

<!doctype html>
<html>
  <head>
    <title>Table Footer using tfoot Tag</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>35</td>
          <td>Male</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>28</td>
          <td>Female</td>
        </tr>
        <tr>
          <td>David</td>
          <td>42</td>
          <td>Male</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Average Age:</td>
          <td>35</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

이 예제에서는 테이블에 있는 사람들의 평균 나이를 포함하는 행을 <tfoot> 태그에 추가했습니다. 행의 첫 번째 셀은 두 개의 열 (colspan="2") 에 걸쳐 있으며 "Average Age:" 텍스트를 표시합니다. 두 번째 셀은 실제 평균 나이 값을 표시합니다.

테이블 푸터에 CSS 적용

<tfoot> 태그와 해당 자식 요소에 CSS 스타일을 적용하여 테이블 푸터의 모양을 조정할 수 있습니다.

<!doctype html>
<html>
  <head>
    <title>Table Footer using tfoot Tag</title>
    <style>
      tfoot {
        background-color: #ccc;
        font-weight: bold;
        text-align: center;
      }
      tfoot td {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>35</td>
          <td>Male</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>28</td>
          <td>Female</td>
        </tr>
        <tr>
          <td>David</td>
          <td>42</td>
          <td>Male</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Average Age:</td>
          <td>35</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

이 예제에서는 CSS tfoot 선택자를 사용하여 <tfoot> 태그에 배경 색상, 글꼴 굵기 및 텍스트 정렬 스타일을 적용했습니다. 또한 tfoot td 선택자를 사용하여 테이블 푸터 섹션 내의 셀에 패딩 (padding) 을 적용했습니다.

요약

<tfoot> 태그는 테이블의 푸터 내용을 그룹화하는 데 사용됩니다. <thead> 및 <tbody> 태그와 함께 작동하여 완전한 테이블 구조를 만듭니다. HTML 및 CSS 를 사용하여 <tfoot> 태그와 해당 자식 요소에 내용과 스타일을 추가할 수 있습니다.

HTML 테이블 푸터

소개

기본 테이블 구조 생성

테이블 푸터에 내용 추가

테이블 푸터에 CSS 적용

요약