[HTML/CSS] 테이블 캡션 위치 지정(caption-side), 정렬(text-align)

 

테이블의 제목을 붙이기 위해 <caption> 태그를 사용할 수 있습니다.

여기서는 이 캡션의 위치를 지정하는 방법을 알아보도록 하겠습니다.

 

 

캡션의 위치 지정 (caption-side)

캡션의 위치를 지정하기 위해 caption-side 속성을 사용할 수 있습니다.

• top : 캡션을 테이블의 위쪽에 배치합니다.
• bottom : 캡션을 테이블의 아래쪽에 배치합니다.

 

  캡션 위쪽에 놓기  

<table>
  <caption>학생</caption>
  <tr>
    <th>이름</th>
    <th>나이</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Tina</td>
    <td>22</td>
  </tr>
</table>
  

table, td, th {
  border: 1px solid black;
  border-collapse : collapse;
}

caption {
  caption-side: top;
}

caption-side: top;

caption-side 속성 값을 top으로 지정하여, caption을 테이블의 위쪽에 배치하였습니다.

 

 

  캡션 아래쪽에 놓기  

<table>
  <caption>학생</caption>
  <tr>
    <th>이름</th>
    <th>나이</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Tina</td>
    <td>22</td>
  </tr>
</table>
  

table, td, th {
  border: 1px solid black;
  border-collapse : collapse;
}

caption {
  caption-side: bottom;
}

caption-side: bottom;

caption-side 속성을 bottom으로 지정하여, 캡션을 테이블의 아래쪽에 위치시켰습니다.

 

 

 

캡션 정렬 (text-align)

• start: 쓰기 방향이 (왼쪽->오른쪽)이면 left와 동일하고, (오른쪽->왼쪽)이면 right와 동일합니다. 
• end : 쓰기 방향이 (왼쪽->오른쪽)이면 right와 동일하고, (오른쪽->왼쪽)이면 left와 동일합니다. 
• left : 왼쪽 정렬
• right : 오른쪽 정렬
• center : 가운데 정렬
• justify : 양쪽 정렬 ( 왼쪽과 오른쪽 끝에 텍스트를 맞춥니다.)

 

  캡션 왼쪽 정렬하기 예제  

<table>
  <caption>학생</caption>
  <tr>
    <th>이름</th>
    <th>나이</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Tina</td>
    <td>22</td>
  </tr>
</table>
  

table, td, th {
  border: 1px solid black;
  border-collapse : collapse;
}

caption {
  caption-side: top;
  text-align: left;
}

text-align: left;

text-align  속성을 이용하여 caption을 왼쪽 정렬하였습니다.