171 lines
2.9 KiB
Markdown
171 lines
2.9 KiB
Markdown
# 표
|
|
```html
|
|
<table>
|
|
<caption>주간 판매 보고서</caption>
|
|
<colgroup>
|
|
<col style="background-color: #f0f0f0;">
|
|
<col span="2">
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">제품</th>
|
|
<th scope="col">판매량</th>
|
|
<th scope="col">매출</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>사과</td>
|
|
<td>50</td>
|
|
<td>50,000원</td>
|
|
</tr>
|
|
<tr>
|
|
<td>바나나</td>
|
|
<td colspan="2">품절</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td>합계</td>
|
|
<td>50</td>
|
|
<td>50,000원</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
```
|
|
- 설명: 모든 태그를 활용한 완전한 표 구조.
|
|
|
|
## table
|
|
```html
|
|
<table>
|
|
<tr>
|
|
<td>셀 1</td>
|
|
<td>셀 2</td>
|
|
</tr>
|
|
</table>
|
|
```
|
|
- 설명: 간단한 1행 2열 표 생성.
|
|
|
|
## tbody
|
|
```html
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>데이터 1</td>
|
|
<td>데이터 2</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
```
|
|
- 설명: 표의 본문 데이터를 그룹화.
|
|
|
|
## thead
|
|
```html
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>이름</th>
|
|
<th>나이</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
```
|
|
- 설명: 표의 머리글 부분 정의.
|
|
|
|
## tfoot
|
|
```html
|
|
<table>
|
|
<tfoot>
|
|
<tr>
|
|
<td>합계</td>
|
|
<td>100</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
```
|
|
- 설명: 표의 바닥글 부분 정의.
|
|
|
|
### caption
|
|
```html
|
|
<table>
|
|
<caption>학생 정보</caption>
|
|
<tr>
|
|
<td>홍길동</td>
|
|
<td>20</td>
|
|
</tr>
|
|
</table>
|
|
```
|
|
- 설명: 표에 제목 추가.
|
|
|
|
## th
|
|
| **속성** | **설명** |
|
|
|---|----|
|
|
| `colspan` | 셀이 차지할 열 수를 지정합니다. (예: `colspan="2"`) |
|
|
| `rowspan` | 셀이 차지할 행 수를 지정합니다. (예: `rowspan="2"`) |
|
|
| `scope` | 셀이 어떤 데이터와 관련 있는지 정의합니다. (예: `row`, `col`, `rowgroup`) |
|
|
|
|
```html
|
|
<table>
|
|
<tr>
|
|
<th scope="col">제품</th>
|
|
<th scope="col">가격</th>
|
|
</tr>
|
|
</table>
|
|
```
|
|
- 설명: 머리글 셀로 열 제목 정의.
|
|
|
|
## td
|
|
| **속성** | **설명** |
|
|
|---|----|
|
|
| `colspan` | 셀이 차지할 열 수를 지정합니다. (예: `colspan="2"`) |
|
|
| `rowspan` | 셀이 차지할 행 수를 지정합니다. (예: `rowspan="2"`) |
|
|
|
|
```html
|
|
<table>
|
|
<tr>
|
|
<td>사과</td>
|
|
<td>1000원</td>
|
|
</tr>
|
|
</table>
|
|
```
|
|
- 설명: 데이터 셀로 내용 입력.
|
|
|
|
## tr
|
|
```html
|
|
<table>
|
|
<tr>
|
|
<td>1행 1열</td>
|
|
<td>1행 2열</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2행 1열</td>
|
|
<td>2행 2열</td>
|
|
</tr>
|
|
</table>
|
|
```
|
|
- 설명: 표의 행을 정의.
|
|
|
|
## col
|
|
| **속성** | **설명** |
|
|
|---|----|
|
|
| `span` | 적용될 열 수를 지정합니다. (예: `span="2"`) |
|
|
|
|
## colgroup
|
|
| **속성** | **설명** |
|
|
|---|----|
|
|
| `span` | 적용될 열 수를 지정합니다. (예: `span="2"`) |
|
|
|
|
```html
|
|
<table>
|
|
<colgroup>
|
|
<col span="1" style="background-color: lightblue;">
|
|
<col span="1" style="background-color: lightgreen;">
|
|
</colgroup>
|
|
<tr>
|
|
<td>첫 번째 열</td>
|
|
<td>두 번째 열</td>
|
|
</tr>
|
|
</table>
|
|
```
|
|
- 설명: 열 그룹과 개별 열에 스타일 적용.
|