HTML 테이블 헤더
HTML 테이블에는 각 열이나 행 또는 여러 열/행에 대한 헤더가 있을 수 있습니다.
| 에밀 | 토비아스 | 리누스 |
|---|---|---|
| 8:00 | ||
|---|---|---|
| 9:00 | ||
| 10:00 | ||
| 11:00 | ||
| 12:00 | ||
| 13:00 |
| 월 | 화 | 수 | 모으다 | 금 | |
|---|---|---|---|---|---|
| 8:00 | |||||
| 9:00 | |||||
| 10:00 | |||||
| 11:00 | |||||
| 12:00 |
| 12 월 | ||
|---|---|---|
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>
수직 테이블 헤더
첫 번째 열을 테이블 머리글로 사용하려면 각 행의 첫 번째 셀을 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>
테이블 머리글 정렬
기본적으로 테이블 헤더는 굵게 표시되며 가운데에 표시됩니다.
| 이름 | 성 | 나이 |
|---|---|---|
| 처녀 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
테이블 헤더를 왼쪽 정렬하려면 CSS text-align속성을 사용하세요.
예시
th {
text-align: left;
}
여러 열에 대한 헤더
두 개 이상의 열에 걸쳐 있는 헤더를 가질 수 있습니다.
| 이름 | 나이 | |
|---|---|---|
| 처녀 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
이렇게 하려면 요소 의 colspan속성을
사용하십시오.<th>
예시
<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>
테이블 colspan 및 rowspan 장 에서 colspan과 rowspan에 대해 자세히 알아볼 것 입니다.
표 캡션
전체 테이블의 머리글 역할을 하는 캡션을 추가할 수 있습니다.
| 월 | 저금 |
|---|---|
| 1 월 | $100 |
| 2 월 | $50 |
표에 캡션을 추가하려면 다음 <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>
참고: 태그 는 <caption>태그 바로 뒤에 삽입해야 합니다 <table>.