77 lines
2.3 KiB
Markdown
77 lines
2.3 KiB
Markdown
# 테이블
|
|
HTML에서 테이블을 만들고 데이터를 표 형식으로 정렬하여 보여주기 위해 다양한 태그들이 사용됩니다. 각 태그의 역할과 사용법을 자세히 알아보겠습니다.
|
|
|
|
* `<table>`: 테이블 전체를 감싸는 최상위 태그입니다.
|
|
* `<tr>`: 테이블의 한 행을 나타냅니다.
|
|
* `<th>`: 테이블의 헤더 셀(제목)을 나타냅니다. 일반적으로 굵은 글씨로 표시되며 가운데 정렬됩니다.
|
|
* `<td>`: 테이블의 데이터 셀을 나타냅니다.
|
|
* `<caption>`: 테이블 전체에 대한 설명이나 제목을 추가합니다.
|
|
* `<thead>`: 테이블 헤더 부분을 감싸는 태그입니다.
|
|
* `<tbody>`: 테이블 본문 부분을 감싸는 태그입니다.
|
|
* `<tfoot>`: 테이블 푸터 부분을 감싸는 태그입니다.
|
|
* `<col>`: 테이블의 열에 대한 속성을 정의합니다.
|
|
* `<colgroup>`: 여러 열에 대한 속성을 그룹으로 정의합니다.
|
|
|
|
```html
|
|
<table>
|
|
<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>
|
|
```
|
|
|
|
* 테이블은 데이터를 표 형식으로 정렬하여 보여주는 데 효과적입니다.
|
|
* 복잡한 레이아웃을 구현하기 위해 테이블을 사용하는 것은 권장되지 않습니다. CSS Grid나 Flexbox를 사용하는 것이 더 적합합니다.
|
|
* 모바일 환경에서 테이블이 제대로 표시되지 않을 수 있으므로, 반응형 웹 디자인을 고려해야 합니다.
|
|
|
|
|
|
## 셀 병합하기
|
|
* rowspan: 셀을 여러 행에 걸쳐 병합합니다.
|
|
* colspan: 셀을 여러 열에 걸쳐 병합합니다.
|
|
|
|
```html
|
|
<table>
|
|
<tr>
|
|
<th colspan="2">개인 정보</th>
|
|
</tr>
|
|
<tr>
|
|
<td>이름</td>
|
|
<td>홍길동</td>
|
|
</tr>
|
|
<tr>
|
|
<td rowspan="2">연락처</td>
|
|
<td>010-1234-5678</td>
|
|
</tr>
|
|
<tr>
|
|
<td>hong@example.com</td>
|
|
</tr>
|
|
</table>
|
|
```
|
|
|
|
## 테이블 스타일링
|
|
CSS를 사용하여 테이블의 모양과 레이아웃을 다양하게 변경할 수 있습니다. 예를 들어, 테이블 테두리, 배경색, 글꼴 등을 설정할 수 있습니다.
|
|
|
|
```css
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
td, th {
|
|
border: 1px solid black;
|
|
padding: 10px;
|
|
}
|
|
```
|
|
|