HTML 테이블 헤더 (<th>)와 테이블 요소 스타일링

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의 다른 유용한 요소들에 대해 다루어보겠습니다. 기대해주세요!