elex/html-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2025-03-07T20:29:01

Browse Source
This commit is contained in:
Elex
2025-03-07 20:29:01 +09:00
parent 129046ec26
commit d481cb3b80
12 changed files with 1701 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
doc/html5/57_표.md Normal file
View File

@@ -0,0 +1,170 @@
# 표
```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>
```
- 설명: 열 그룹과 개별 열에 스타일 적용.