<!DOCTYPE html>
<!-- html/basic_code_03.html -->
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<title>웹 기초 - 테이블 구조</title>
<style>
/* css */
.table_module {
width:700px; height:auto;
margin:auto; margin-bottom:10px;
padding:20px;
background-color: #ddd; }
table { width:100%; height:auto;}
table > caption { width:100%; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#171717; }
table,
table tr,
table td,
table th {
border-width:1px; border-style:solid; border-color:#03a;
border-spacing:0; border-collapse:collapse;
}
.plus {background-color: rgba(100, 200, 255, 0.5); }
/* #faa -> rgba (100, 200, 255, 0.5) */
.minus {background-color: rgba(255, 200, 200, 0.5); }
/* #7af -> rgba (255, 200, 200, 0.5) */
.date { background-color: #fff; }
.content { background-color: #fa3; }
.pay { background-color: #afa; }
</style>
</head>
<body>
<!-- layout -->
<h1><a href="./all_contents.html">웹기초</a></h1>
<hr />
<h2>table구조 이해하기</h2>
<p>테이블 구조란? 엑셀문서에서 표현하는 것과 같이 테이블 구조의 열과 행으로 이루어진 표 형식의 문서구조, <br />
과거 웹페이지의 디자인작업에 빠지지 않는 형식이었지만, 지금은 표 자체의 기능으로만 사용할 수 있도록 변경되었다.</p>
<div class="table_module">
<table summary="210429 한화:기아 야구경기현황" >
<caption>210429 한화:기아 야구경기현황</caption>
<tr> <th></th> <th>기아</th> <th>한화</th> <th>승패</th> </tr>
<tr> <th>1</th> <td>1</td> <td>7</td> <td>한화</td> </tr>
<tr> <th>2</th> <td>2</td> <td>0</td> <td>기아</td> </tr>
<tr> <th>3</th> <td>1</td> <td>2</td> <td>한화</td> </tr>
<tr> <th>4</th> <td>5</td> <td>3</td> <td>기아</td> </tr>
<tr> <th>5</th> <td>3</td> <td>4</td> <td>한화</td> </tr>
<tr> <th>6</th> <td>8</td> <td>4</td> <td>기아</td> </tr>
<tr> <th>7</th> <td>7</td> <td>1</td> <td>기아</td> </tr>
<tr> <th>8</th> <td>9</td> <td>1</td> <td>기아</td> </tr>
<tr> <th>9</th> <td>6</td> <td>5</td> <td>기아</td> </tr>
</table>
</div>
<!-- //table_module =================== -->
<div class="table_module">
<table summary="">
<caption>
<tr> <td colspan=2>1-1</td> <td>1-3</td> <td>1-4</td> <td>1-5</td> </tr>
<tr> <td>2-1</td> <td colspan=3>2-2</td> <td>2-5</td> </tr>
<tr> <td rowspan=3>3-1</td> <td>3-2</td> <td>3-3</td> <td>3-4</td> <td>3-5</td> </tr>
<tr> <td>4-2</td> <td>4-3</td> <td colspan=2 rowspan=2>4-4</td> </tr>
<tr> <td>5-2</td> <td>5-3</td> </tr>
</caption>
</table>
</div>
<!-- // table_module = -->
<div class="table_module">
<table summary="2021년 가계부">
<caption>2021년 04월 가계부</caption>
<colgroup>
<col span="1" class="date">
<col span="1" class="content">
<col span="2" class="pay">
</colgroup>
<thead>
<tr> <th>날짜</th> <th>사용처</th> <th>금액</th> <th>수입/지출 여부</th> </tr>
</thead>
<tfoot>
<tr class="plus"> <td colspan="2">총 계</td> <td>192,500원</td> <td>수입</td></tr>
</tfoot>
<tbody>
<tr class="minus"> <td>2021.04.01</td> <td>아이스크림</td> <td>500원</td> <td>지출</td> </tr>
<tr class="plus"> <td>2021.04.02</td> <td>주식</td> <td>7,000원</td> <td>수입</td> </tr>
<tr class="minus"> <td>2021.04.03</td> <td>점심</td> <td>5,000원</td> <td>지출</td> </tr>
<tr class="plus"> <td>2021.04.04</td> <td>급여</td> <td>8,000,000원</td> <td>수입</td> </tr>
<tr class="minus"> <td>2021.04.05</td> <td>세금</td> <td>6,000,000원</td> <td>지출</td> </tr>
<tr class="minus"> <td>2021.04.06</td> <td>카드값</td> <td>1,800,000원</td> <td>지출</td> </tr>
</tbody>
</table>
</div>
<!-- script -->
<script></script>
</body>
</html>
'coding > html' 카테고리의 다른 글
| 0510 / layout.html 작성 (0) | 2021.05.10 |
|---|---|
| 0504 / basic_code_04_setting.html (0) | 2021.05.07 |
| 0429 / basic_code_02.html (0) | 2021.05.07 |
| 0428 / basic_code_01.html (0) | 2021.05.07 |
| html 조건부주석 (0) | 2021.05.06 |