HTML 테이블에는 각 열 또는 행 또는 많은 열/행에 대한 헤더가 있을 수 있다.
아래 그림은 테이블 헤더의 다양한 예시이다.
HTML 테이블 헤더
테이블 헤더는 th 요소로 정의된다. 각 th 요소는 테이블 셀을 나타낸다.
| <!DOCTYPE html> <html> <style> table, th, td { border:1px solid black; border-collapse: collapse; } </style> <body> <h2>테이블 헤더</h2> <table style="width:100%"> <tr> <th>이름</th> <th>성</th> <th>나이</th> </tr> <tr> <td>길동</td> <td>홍</td> <td>50</td> </tr> <tr> <td>영희</td> <td>이</td> <td>94</td> </tr> <tr> <td>철수</td> <td>김</td> <td>80</td> </tr> </table> </body> </html> |
수직 테이블 헤더(Vertical Table Header)
첫 번째 열을 테이블 머리글로 사용하려면, 각 행의 첫 번째 셀을 th 요소로 정의합니다:
| <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <h2>수직 테이블 헤더</h2> <p>각 테이블 행의 첫 번째 테이블 셀을 TH 요소로 설정하면 첫 번째 열이 테이블 헤더가 됩니다:</p> <table style="width:100%"> <tr> <th>이름</th> <td>길동</td> <td>철수</td> </tr> <tr> <th>성</th> <td>홍</td> <td>김</td> </tr> <tr> <th>나이</th> <td>50</td> <td>94</td> </tr> </table> </body> </html> |
테이블 헤더 정렬
기본적으로 테이블 헤더는 굵고 가운데 정렬로 설정되어 있다.
테이블 헤더를 왼쪽 정렬하려면 CSS text-align 속성을 사용합니다:
| <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th { text-align: left; } </style> </head> <body> <h2>왼쪽 테이블 헤더</h2> <p>>테이블 헤더를 왼쪽 정렬하려면 CSS 텍스트 정렬 속성을 사용합니다:</p> <table style="width:100%"> <tr> <th>이름</th> <td>길동</td> <td>철수</td> </tr> <tr> <th>성</th> <td>홍</td> <td>김</td> </tr> <tr> <th>나이</th> <td>50</td> <td>94</td> </tr> </table> </body> </html> |
여러 열의 헤더
두 개 이상의 열에 걸쳐 있는 머리글을 가질 수 있다.
이 작업을 수행하려면 다음과 같이 about 요소에서 colspan 특성을 사용한다:
| <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <h2>두 열에 걸쳐 있는 머리글</h2> <p>colspan 속성을 사용하여 여러 열에 걸쳐 머리글 범위를 설정합니다.</p> <table style="width:100%"> <tr> <th colspan="2">이름</th> <th>나이</th> </tr> <tr> <td>홍</td> <td>길동</td> <td>50</td> </tr> <tr> <td>김</td> <td>철수</td> <td>94</td> </tr> </table> </body> </html> |
테이블 캡션
전체 테이블의 머리글 역할을 하는 캡션을 추가할 수 있다.
표에 캡션을 추가하려면 <caption> 태그를 사용한다:
| <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } </style> </head> <body> <h2>테이블 캡션</h2> <p>표에 캡션을 추가하려면 캡션 태그 사용.</p> <table style="width:100%"> <caption>월저축</caption> <tr> <th>월</th> <th>저축</th> </tr> <tr> <td>1월</td> <td>100만원</td> </tr> <tr> <td>2월</td> <td>50만원</td> </tr> </table> </body> </html> |
참고: <caption> 태그는 <table> 태그 바로 뒤에 삽입해야 한다.
마무리
이번 글에서는 테이블 헤더와 관련된 기능을 살펴보았다.
테이블 헤더 설정과 수직으로 설정하는 헤더, 헤더의 정렬 설정, 다중 열 헤더 표현하는 방법, 그리고 테이블 캡션에 대해 실습을 하였다.
꼭 기능을 이해하고 실습할 것을 권한다.
쉬운것 같지만, 직접 코딩을 하고 응용을 해야 코딩 실력이 향상됩니다.
모두 화이팅!!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 테이블 Colspan & Rowspan (0) | 2023.05.10 |
|---|---|
| HTML 테이블 채우기와 간격(HTML Table Padding & Spacing) (0) | 2023.05.09 |
| HTML 테이블 크기(Table Sizes) (0) | 2023.05.07 |
| HTML 테이블 테두리(Table Borders) (0) | 2023.05.06 |
| HTML 테이블(Table) (0) | 2023.05.05 |
댓글