SMALL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<style>
body {
padding: 50px;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
.t1 {
border: 1px solid #999;
width: 500px;
}
.t1 caption {
background: #fc0;
padding: 30px 0;
}
.t1 th,
.t1 td {
border:1px solid #999;
}
.t1 td {
text-align: center;
}
.t1 thead td,
.t1 thead th {
background: #ddd;
}
.rank {
width: 100%;
}
.rank caption {
text-align: left;
padding-bottom: 20px;
font-size: 20px;
font-weight: 700;
}
.rank col {
width: 6.6666%;
}
.rank col:nth-child(2) {
width: 40%;
}
.rank th {
border-top:1px solid #444;
border-bottom: 1px solid #aaa;
background: #ddd;
padding: 10px 0;
}
.rank td {
border-top:1px solid #aaa;
border-bottom: 1px solid #aaa;
text-align: center;
padding: 10px 0;
}
.rank th:nth-child(2),
.rank td:nth-child(2) {
text-align: left;
}
.rank tbody tr:nth-child(even) td {
background-color: #eee;
}
.rank tbody tr td:nth-child(6) {
background-color: #fc0;
}
</style>
</head>
<body>
<table class="t1">
<caption>3월 성적표</caption>
<thead>
<tr>
<th>이름</th>
<th>국어</th>
<th>수학</th>
</tr>
</thead>
<tbody>
<tr>
<th>홍길동</th>
<td>100</td>
<td>50</td>
</tr>
<tr>
<th>김길동</th>
<td>80</td>
<td>70</td>
</tr>
</tbody>
</table>
<div class="spacer"></div>
<table class="rank">
<caption>종합순위</caption>
<!-- 열 선언하기 -->
<colgroup>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>순위</th>
<th>팀</th>
<th>경기</th>
<th>승</th>
<th>패</th>
<th>승점</th>
<th>세트득실률</th>
<th>점수득실률</th>
<th>득점</th>
<th>실점</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</html>
LIST
댓글