HTML 테이블 만들기- tr, td

HTML 테이블의 기본 구조는 <tr>과 <td> 태그로 구성됩니다.
이번 시간에는 테이블은 만드는 방법에 대해서 알아보겠습니다.

 

1. 테이블의 기본 구조

<tr>태그는 테이블에서 열을 구분해 줍니다. ->
<td>태그는 테이블의 열을 각각의 셀(cell)로 나누어 줍니다.
<th>태그는 각 열의 제목을 나타내며, 굵은 글씨와 가운데 정렬이 됩니다.

<style>
    table, th, td { border: 1px solid black; border-collapse: collapse }
</style>
<table style="width:100%">
    <tr style="background-color:lightgrey">
        <th>순번</th>
        <th>물품</th>
        <th>가격</th>
    </tr>
    <tr>
        <td>1</td>
        <td>사과</td>
        <td>500</td>
    </tr>
    <tr>
        <td>2</td>
        <td>바나나</td>
        <td>1000</td>
    </tr>
</table>

 

 

2. 테이블 행,열 합치기

테이블의 구조를 봐가면서 합치기를 진행하면 쉽게 알수 있습니다.
rowspan : 테이블 행 합치기
colspan : 테이블 열 합치기

<style>
    table, th, td { border: 1px solid black; border-collapse: collapse }
</style>

<table style="width:100%">
    <tr style="background-color:lightgrey">
        <th>순번</th>
        <th>물품</th>
        <th>가격</th>
       
    </tr>
    <tr>
        <td rowspan="2">1</td>
        <td colspan="2" >사과</td>
        
    </tr>
    <tr>
        
        <td>바나나</td>
        <td>1000</td>
    </tr>
</table>

 

3. 테이블 제목 달기

<table> 태그안에 <caption> 태그를 사용하면 상단에 제목이나 짧은 설명을 넣을 수 있습니다.

<style>
    table, th, td { border: 1px solid black; border-collapse: collapse }
</style>


<table style="width:100%">
    <caption>가격표</caption>
    <tr style="background-color:lightgrey">
        <th>순번</th>
        <th>물품</th>
        <th>가격</th>
       
    </tr>
    <tr>
        <td rowspan="2">1</td>
        <td colspan="2" >사과</td>
        
    </tr>
    <tr>
        
        <td>바나나</td>
        <td>1000</td>
    </tr>
</table>

이상으로 HTML 테이블을 생성하는 방법에 대해서 알아보았습니다.