HTML <td> 태그 사용법과 예제

HTML <td> 태그 사용법과 예제

HTML <td> 태그는 테이블 데이터를 표현하는 데 사용됩니다. 웹 페이지에서 정보를 구조적으로 표현하려면 테이블이 필수적이며, <td> 태그는 이러한 테이블 구조를 완성하는 중요한 역할을 합니다. 이 가이드에서는 <td> 태그의 기본적인 사용법부터 고급 활용법까지를 다룹니다.

 

 

목차

1. HTML <td> 태그란?
2. <td> 태그의 기본 사용법
3. 속성 및 스타일 적용 방법
4. 실용적인 예제
5. <td> 태그의 한계 및 대안
6. 정리 및 팁

 

1. HTML <td> 태그란?

<td>는 HTML 테이블에서 "Table Data"를 나타내는 태그입니다. 테이블의 각 행(<tr>) 안에서 데이터를 정의하며, 테이블 셀 하나를 구성합니다.

 

 

2. <td> 태그의 기본 사용법

<table border="1">
    <tr>
        <td>셀 1</td>
        <td>셀 2</td>
        <td>셀 3</td>
    </tr>
</table>
        

위 코드는 3개의 열을 가진 테이블의 기본 예제입니다.

 

 

3. 속성 및 스타일 적용 방법

<td> 태그는 다양한 속성을 지원합니다. 예를 들어:

• colspan: 셀의 가로 병합
• rowspan: 셀의 세로 병합
• align: 텍스트 정렬 (권장되지 않음, CSS 사용 권장)

2열 병합		셀 3
2행 병합	셀 2	셀 6
	셀 4	셀 5

 

 

 

 

4. 실용적인 예제

다음은 <td> 태그를 활용하여 데이터 표를 구성하는 예제입니다:

<table border="1" style="width: 100%; text-align: center;">
    <tr>
        <th>이름</th>
        <th>나이</th>
        <th>직업</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>30</td>
        <td>개발자</td>
    </tr>
    <tr>
        <td>김영희</td>
        <td>25</td>
        <td>디자이너</td>
    </tr>
</table>
        

 

 

5. <td> 태그의 한계 및 대안

<td> 태그는 기본 데이터 표시에는 적합하지만, 레이아웃을 구성하는 데는 권장되지 않습니다. 레이아웃을 위해서는 div와 CSS 그리드 또는 Flexbox를 사용하는 것이 더 유용합니다.

CSS Grid는 2차원 레이아웃 설계에 적합하며, Flexbox는 1차원 정렬에 강력합니다. 두 방법 모두 반복적이고 유연한 레이아웃 구성을 제공합니다.

 

 

6. 정리 및 팁

• <td> 태그는 데이터를 구조적으로 표현하는 데 필수적입니다.
• CSS를 활용하여 테이블 스타일을 더욱 개선하세요.
• 복잡한 레이아웃에는 테이블보다 CSS 레이아웃 기법을 사용하세요.