HTML / (24) 표 머리글

▶ HTML 표는 각 행, 열 혹은 많은 행, 열에 머리글을 가질 수 있다.

 

■ 표 제목

▶ 표 제목은 <th> 요소로 정의된다.

▶ 각 <th> 요소는 표 셀로 표현된다.

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_th

 

■ 수직 표 제목

▶ 첫 번째 열을 표 머리글으로 사용하려면 각 행의 첫 번째 셀을 <th> 요소로 정의한다.

<table>
  <tr>
    <th>Firstname</th>
    <td>Jill</td>
    <td>Eve</td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td>Smith</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <th>Age</th>
    <td>94</td>
    <td>50</td>
  </tr>
</table>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_th_vertical 

 

■ 표 제목 정렬

▶ 기본적으로 표 머리글은 글씨가 굵고 가운데 정렬한다.

▶ 표 머리글을 왼쪽으로 정렬하고 싶다면 CSS "text-align" 속성을 사용한다.

th {
  text-align: left;
}

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_th_align 

 

■ 여러 열에 머리글

▶ 두 개 이상의 열에 걸쳐 있는 머리글을 가질 수 있다.

<table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_th_colspan 

 

■ 표 표제

▶ 전체 테이블의 머리글 역할하는 표제를 추가할 수 있다.

▶ 표에 표제를 추가하려면 <caption> 태그를 사용한다.

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

 

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables2 

 

※ <caption> 태그는 <table> 태그 바로 뒤에 삽입해야 한다.

 

출처 : https://www.w3schools.com/html/html_table_headers.asp

HTML Table Headers