[HTML] Table Headers

HTMl 테이블에는 각 열이나 행 또는 여러 열/행에 대한 헤더가 있을 수 있습니다.

HTMl Table Headers

테이블 헤더는 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>
    <tr>
    	<td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
</table>

 

수직 테이블 헤더

첫 번째 열을 테이블 머리글로 사용하려면 각 행의 첫 번째 셀을 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>

 

테이블 머리글 정렬

• 기본적으로 테이블 헤더는 굵게 표시되며 가운데에 표시됩니다.
• 테이블 헤더를 왼쪽 정렬하려면 CSS text-align 속성을  사용하십시오.

th {
	text-alignL left;
    }

여러 열에 대한 헤더

• 두 개 이상의 열에 걸쳐 있는 헤더를 가질 수 있습니다.
• 이렇게 하려면 <th> 요소에 colspan 속성을 사용합니다.

<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>

Table Caption

• 전체 테이블의 제목 역할을 하는 캡션을 추가할 수 있습니다.
• 테이블에 캡션을 추가하기위해서 <caption> 태그를 사용합니다.

<table style="width::100%">
	<caption>Monthly saving</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>

<caption> 태그는 <table> 태그 바로 뒤에 삽입 되어야 합니다.

 

REFERENCE

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

HTML Table Headers