<table> 태그 사용하기

<table> 태그는 행과 열로 이루어진 2차원 테이블을 정의할 때 사용한다.

 

<table> 태그는 자식요소에 <thead>, <tbody>, <th>, <tr>, <td> 등을 활용하여

정의할 수 있다.

 

<thead> : <table> 태그 내에서 헤더 콘텐츠를 하나의 그룹으로 묶을 때 사용.

<tbody> : <table> 태그 내에서 내용 콘첸츠를 하나의 그룹으로 묶을 떄 사용.

<th> : 테이블 헤더를 정의.

<td> : 테이블 한 셀에 들어가는 데이터를 정의.

<tr> : <td> 태그를 그룹화 하여 한 행으로 묶어주는 역할.

<table>
    <thead>
        <th>첫번째 제목</th>
        <th>두번째 제목</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </tbody>
</table>

 

또한, th에 style="widht:~"를 주어 셀의 열 너비를 조정할 수 있다.

<table>
    <thead>
        <th style="width:300px;">첫번째 제목</th>
        <th>두번째 제목</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </tbody>
</table>