jennet1 님의 블로그
HTML <table> 태그 본문
HTML 에서 표 형식으로 표현할 때 주로 사용하는 태그이다. <table> 의 기본 구조,속성,예시를 살펴보자.
1. table 의 기본구조
- <table>: 테이블 전체를 감싸는 태그입니다.
- <thead>: 테이블 헤더를 정의합니다.
- <tbody>: 테이블 본문을 정의합니다.
- <tr>: 행(row)을 나타냅니다.
- <th>: 헤더 셀을 나타내며, 기본적으로 텍스트가 굵고 중앙에 정렬됩니다.
- <td>: 데이터 셀을 나타냅니다.
<body>
<table>
<thead>
<tr>
<th>헤더 1</th>
<th>헤더 2</th>
<th>헤더 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>데이터 1</td>
<td>데이터 2</td>
<td>데이터 3</td>
</tr>
<tr>
<td>데이터 4</td>
<td>데이터 5</td>
<td>데이터 6</td>
</tr>
</tbody>
</table>
</body>결과
1. table 태그의 주요 속성
border: 테이블에 테두리를 추가합니다.
<table border="1">...</table>cellpadding과 cellspacing: 셀 안쪽 여백과 셀 간격을 설정합니다.
<table cellpadding="10" cellspacing="5">...</table>colspan과 rowspan: 셀을 가로 또는 세로로 병합할 때 사용합니다.
<td colspan="2">병합된 셀</td>
<td rowspan="2">세로 병합</td>
실습1 : table 에 속성 추가해보기
<table border = 1 cellspacing = 0 cellpadding = 10>
<thead >
<tr>
<th>제품명</th>
<th>가격</th>
<th>재고</th>
</tr>
</thead>
<tbody>
<tr>
<td>노트북</td>
<td>1,000,000원</td>
<td>50</td>
</tr>
<tr>
<td>스마트폰</td>
<td>800,000원</td>
<td>200</td>
</tr>
</tbody>
</table>결과
실습2 : 셀 병합해보기
<table border="1" cellspacing = 0 cellpadding = 5 width = "300" height = 200>
<tr>
<td colspan="3">1</td>
<td rowspan="2">2</td>
</tr>
<tr>
<td rowspan="3">3</td>
<td>center</td>
</tr>
<tr>
<td colspan="4">4</td>
</tr>
</table>
주의사항 :
테이블은 데이터를 구조적으로 표현할 때 적합하지만 레이아웃 디자인 목적으로 사용하는 것은
지양하는 것이 좋다. CSS Flexbox 또는 Grid 레이아웃을 하는 것이 더 좋은 방법이다.
반응형 웹 디자인을 고려할 때, 테이블의 폭이 좁은 화면에서는 제대로 보이지 않을 수 있으므로,
미디어 쿼리를 사용해 테이블 가독성을 높일 수 있다.
table 태그를 활용하여 다양한 데이터를 쉽게 관리가 가능하다.
'WEB/HTML' Related Articles
more
