HTML 테이블 캡션

소개

HTML 에서 <caption> 태그는 표에 캡션 또는 제목을 추가하는 데 사용됩니다. 이 단계별 랩은 HTML 에서 표를 만들고 캡션을 추가하는 과정을 안내합니다.

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

기본 테이블 생성

첫 번째 단계에서는 table 태그를 사용하여 일부 데이터가 있는 기본 표를 만듭니다. 다음은 예시입니다.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

테이블에 캡션 추가

표에 캡션을 추가하려면 여는 <table> 태그 뒤와 표 행 (row) 앞에 <caption> 태그를 삽입하기만 하면 됩니다. 다음은 예시입니다.

<table>
  <caption>
    Employee Information
  </caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

캡션 스타일 지정

캡션의 스타일을 지정하려면 <caption> 태그 내에서 style 속성을 사용합니다. 다음은 예시입니다.

<table>
  <caption style="color: blue; font-size: 20px;">
    Employee Information
  </caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

요약

HTML 에서 <caption> 태그는 표에 캡션 또는 제목을 추가하는 데 사용됩니다. <caption> 태그는 여는 <table> 태그 바로 뒤, <table> 태그 내에서 사용됩니다. 캡션은 표에 대한 간략한 설명을 제공하는 짧은 설명입니다. 이는 표의 목적을 이해하는 데 도움이 됩니다. 표에 캡션을 추가하려면 여는 <table> 태그 뒤와 표 행 (row) 앞에 <caption> 태그를 삽입하기만 하면 됩니다. <caption> 태그 내에서 style 속성을 사용하여 캡션의 스타일을 지정할 수 있습니다.