HTML 테이블 헤더 (<th>
)와 테이블 요소 스타일링
HTML 테이블은 테이블 헤더(<th>
)와 테이블 요소(<td>
)로 구성됩니다. 테이블 헤더는 열의 제목을 표시하는 데에 사용되며, 테이블 요소는 데이터를 표시하는 데에 사용됩니다. 이번 글에서는 <th>
태그와 테이블 요소의 스타일링에 대해 자세히 알아보겠습니다.
<th>
태그
<th>
태그는 테이블의 헤더 셀을 나타내는 요소입니다. 테이블 헤더는 열의 제목이나 분류를 나타내는 데에 사용됩니다. <th>
태그는 <td>
태그와 유사하지만 시각적으로 구분될 수 있도록 더 굵고 강조된 스타일을 가집니다.
아래는 <th>
태그의 사용 예시입니다:
<table>
<tr>
<th>이름</th>
<th>나이</th>
<th>성별</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>남성</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>여성</td>
</tr>
</table>
위의 예시에서는 <th>
태그를 사용하여 테이블 헤더를 생성했습니다. 테이블 헤더는 <tr>
태그 내에 위치하며, 각 열의 제목을 <th>
태그로 작성했습니다.
테이블 요소 스타일링
HTML 테이블의 스타일은 CSS를 사용하여 적용할 수 있습니다. 다양한 CSS 속성을 활용하여 테이블의 레이아웃, 배경색, 테두리 등을 변경할 수 있습니다. 몇 가지 흔히 사용되는 CSS 속성은 다음과 같습니다:
- border: 테이블의 테두리를 설정합니다.
- border-collapse: 테이블 셀의 경계를 합칠지 여부를 설정합니다.
- background-color: 테이블의 배경색을 설정합니다.
- text-align: 테이블 셀 안의 텍스트의 정렬 방식을 설정합니다.
- CSS 스타일링에 대한 자세한 내용은 다음 글(CSS 강의 예정!) 에서 다루도록 하겠습니다.
마무리
HTML의 <th>
태그는 테이블의 헤더 셀을 나타내는 요소로 사용됩니다. 테이블 헤더는 열의 제목이나 분류를 나타내는 데에 사용됩니다. 테이블 요소의 스타일링은 CSS를 사용하여 적용할 수 있으며, 테이블의 레이아웃과 디자인을 변경하여 웹 페이지를 더욱 효과적으로 표현해보세요. 다음 글에서는 HTML의 다른 유용한 요소들에 대해 다루어보겠습니다. 기대해주세요!
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."