html table 태그 header 사용하기

html 의 table 태그는 행과 열로 이루어진 표를 구성한다. table 태그에 사용되는 th 태그는 table 태그의 제목을 나타내며 각 셀이 어떤 데이터인지를 나타내는 역할을 한다. th 태그는 엑셀의 표에서 나타내는 제목 부분과 같은 의미이기도 하다.

html table 태그 header 사용하기

html의 table 태그에는 제목을 나타내는 header 를 나타내는 태그가 존재하는데 td 와 비슷한 기능을 가진 th 태그이다.

td 와 th 는 코드적으로 셀에 해당하지만, 차이가 있다.

td 태그는 테이블 구조에서 데이터 부분을 의미한다.

th 태그는 테이블 구조에서 가장 처음에 단 한번 사용되며 테이블의 각 컬럼의 제목을 나타낸다.

그리고 th 태그는 td 와는 다르게 기본적으로 글자는 굵게 표시된다.

table 태그의 제목부

html table 태그에서 사용되는 제목 태그인 th 는 컬럼의 데이터가 어떤 의미를 가지는지를 알려준다.

엑셀의 표를 생각해보면 이해가 쉽다.

우리가 엑셀을 이용한 어떤 표를 만들 때 제목을 먼저 작성하고 그 하단에 행을 추가하면서 데이터를 추가한다.

엑셀의 표에 표현하는 제목이 html table 에서 제목을 나타내는 th 태그이다.

th 태그는 제목을 나타내고 td 와 다르게 글자는 굵게 표현된다.

<table>
    <tr>
        <th>제목</th>
        <th>제목</th>
        <th>제목</th>
        ~
    </tr>
</table>

샘플코드

실제로 table 태그에서 th 제목 태그가 어떻게 표현되는지 html 예제를 만들어 본다.

위에서도 언급했지만 th 태그는 table 태그의 가장 첫번째로 사용되고 한 번만 사용된다.

th 태그는 제목을 나타내기 때문에 글자는 굵게 표시된다.

코드를 보자.

<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>

<!-- html 문서 시작 -->
<html>
    
	<!-- 문서 정보 -->
	<head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" href="favicon.ico" type="image/x-icon">
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }
        </style>
    </head>
    <!-- // -->
    
    <!-- 문서 내용 -->
	<body id="bgBody">
        <table>
            <tr>
                <th>회사명</th>
                <th>차명</th>
                <th>배기량</th>
            </tr>
            <tr>
                <td>현대자동차</td>
                <td>아반떼</td>
                <td>1600</td>
            </tr>
            <tr>
                <td>기아자동차</td>
                <td>K3</td>
                <td>1600</td>
            </tr>
            <tr>
                <td>쌍용자동차</td>
                <td>티볼리</td>
                <td>1600</td>
            </tr>
        </table>
    </body>
    <!-- // -->

</html>
<!-- // -->

코드는 길지만 th 부분만 보면 된다.

html 의 table 태그를 구성할 때는 행을 의미하는 tr 태그를 먼저 작성하고 셀을 표현하는 th 와 td 태그를 사용한다.

th 태그는 테이블 컬럼의 제목을 나타내고 글자는 굵게 표현된다.

결과화면을 보자.

아래의 이미지에서 글자가 굵은 부분이 th 태그 부분이다.

'programming > web' 카테고리의 다른 글

비주얼 스튜디오 코드 확장 프로그램 라이브 서버 ( Live Server ) 설치 및 실행하기 (0)	2023.09.17
html5 수정 가능한 태그 만들기 contenteditable 속성 사용 (0)	2023.02.04
html table 테두리 표시하기 using html table border (0)	2022.06.24
html table 행과 열 사용하기 using html table rows and columns (0)	2022.06.19
html 파비콘 link 태그 사용하기 using html link tag for favicon (0)	2022.06.16