Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

HTML 테이블에 캡션을 추가하는 방법

HTML에서 테이블에 제목(캡션)을 추가하려면 <caption> 태그를 사용합니다. 캡션 태그는 반드시 <table> 태그 바로 뒤에 위치해야 하며, 별도의 스타일 지정이 없으면 테이블 상단 중앙에 자동으로 표시됩니다.

예제

아래 코드를 실행하면 HTML 테이블에 캡션이 포함된 결과를 직접 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
            border: 1px solid black;
         }
      </style>
   </head>
   <body>
      <h2>Cricketers</h2>
      <table style = "width:100%">
         <caption>Indian Cricketers</caption>
         <th>Name</th>
         <tr>
            <td>Sachin Tendulkar</td>
         </tr>
         <tr>
            <td>Virat Kohli</td>
         </tr>
      </table>
   </body>
</html>

위 코드에서 <caption>Indian Cricketers</caption> 부분이 테이블 상단에 나타나는 제목 역할을 합니다. 캡션은 스크린 리더 사용자에게도 테이블의 내용을 안내하는 접근성 요소이므로, 데이터 테이블에는 가능한 한 캡션을 함께 작성하는 것이 좋습니다.